style-tests.md

published	permalink	layout	filename	title
true	/style-tests/	hero	style-tests.md	Style Tests

Typography

<div class="row">
  <div class="col-md-8">
	  <h3 class='display-one styleguide-only'>This is Display 1</h3>
	  <h3 class='display-two'>This is Display 2</h3>
	  <h1>This is an h1</h1>
	  <h2>This is an h2</h2>
	  <h3>This is an h3</h3>
	  <h4>This is an h4</h4>
	  <h5>This is an h5</h5>
	  <h6>This is an h6</h6>
  </div>
</div>


<div class="row mt-30">
  <div class="col-md-5">
    <p class='lead'>
      <span class='highlight'>Lead Paragraph</span> risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
    </p>
  </div>
</div>

Large Paragraph Text (17px) Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Paragraph (16px) Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>

Italic Paragraph Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

    <p class='italic'>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper  nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>

Tables

Column 1	Column 2	Column 3
Natoque penatibus et magnis dis parturient montes	mollis ornare	Nullam quis risus
Natoque penatibus et magnis dis parturient montes	mollis ornare	Nullam quis risus
Natoque penatibus et magnis dis parturient montes	mollis ornare	Nullam quis risus

Column 1	Column 2	Column 3
Natoque penatibus et magnis dis parturient montes	mollis ornare	Nullam quis risus
Natoque penatibus et magnis dis parturient montes	mollis ornare	Nullam quis risus
Natoque penatibus et magnis dis parturient montes	mollis ornare	Nullam quis risus

Column 1	Column 2	Column 3
Natoque penatibus et magnis dis parturient montes	mollis ornare	Nullam quis risus
Natoque penatibus et magnis dis parturient montes	mollis ornare	Nullam quis risus
Natoque penatibus et magnis dis parturient montes	mollis ornare	Nullam quis risus

List Group

Item A Item B Item C Item D Item E

Alerts

Success Alert

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes

Info Alert

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes

Warning Alert

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes

Danger Alert

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes

Buttons

Primary Buttons

Default Active Hover

Default Active Hover

Secondary Buttons

Default Active Hover

Default Active Hover

Disabled Button

Default

Big Button

Default Default

Charts

{% include charts/sample-pie.html %}

{% include charts/sample-doughnut.html %}

{% include charts/sample-line.html %}

<script> window.onload = function() { var ctx = document.getElementById("sample-pie-chart-area").getContext("2d"); window.myPie = new Chart(ctx).Pie(SamplePieData, { responsive: false, segmentStrokeWidth: 3 }); document.getElementById('pieLegend').innerHTML = myPie.generateLegend(); var ctx = document.getElementById("sample-doughnut-data").getContext("2d"); window.myDoughnut = new Chart(ctx).Doughnut(sampleDoughnutData, { responsive: false, segmentStrokeWidth: 3, percentageInnerCutout: 70 }); document.getElementById('doughnutLegend').innerHTML = myDoughnut.generateLegend(); var ctx = document.getElementById("sample-line-data").getContext("2d"); window.myLine = new Chart(ctx).Line(sampleLineChartData, { responsive: true }); document.getElementById('lineLegend').innerHTML = myLine.generateLegend(); } </script>