Typography
Headings
H1 36pt Open Sans Light h1 small text
H2 30pt Open Sans Light h2 small text
H3 24pt Open Sans Light h3 small text
H4 18pt Open Sans Light h4 small text
H5 13pt Open Sans Light h5 small text
H6 12pt Open Sans Light
<h1>H1 36pt Open Sans Light <small>h1 small text</small></h1>
<h2>H2 30pt Open Sans Light <small>h2 small text</small></h2>
<h3>H3 24pt Open Sans Light <small>h3 small text</small></h3>
<h4>H4 18pt Open Sans Light <small>h4 small text</small></h4>
<h5>H5 13pt Open Sans Light <small>h5 small text</small></h5>
<h6>H6 12pt Open Sans Light</h6>
Content Headings
Add the
.content-header to any html header entity, and it will automatically add a border below the header text.
H1 36pt Open Sans Light h1 small text
H2 30pt Open Sans Light h2 small text
H3 24pt Open Sans Light h3 small text
H4 18pt Open Sans Light h4 small text
H5 13pt Open Sans Light h5 small text
H6 12pt Open Sans Light h6 small text
<h1 class="content-header">H1 36pt Open Sans Light
<small>h1 small text</small>
</h1>
<h2 class="content-header">H2 30pt Open Sans Light
<small>h2 small text</small>
</h2>
<h3 class="content-header">H3 24pt Open Sans Light
<small>h3 small text</small>
</h3>
<h4 class="content-header">H4 18pt Open Sans Light
<small>h4 small text</small>
</h4>
<h5 class="content-header">H5 13pt Open Sans Light
<small>h5 small text</small>
</h5>
<h6 class="content-header">H6 12pt Open Sans Light
<small>h6 small text</small>
</h6>
Sometimes you'll want to treat multiple entities, such as Server name and it's description, as the content header. Wrap your content in a div with the .content-header class.
QA1DEVLBTEST01
Load Balancer Test VM
<div class="content-header">
<h1>QA1DEVLBTEST01</h1>
<p class="lead">Load Balancer Test VM</p>
</div>
Body Copy
The default font-size is 14px, with a line-height of 1.428 (20px).
I could see why some of the boys took him for snobby. He had a quiet way about him, a walk and a talk that just wasn't normal around here. He strolled, like a man in a park without a care or a worry in the world, like he had on an invisible coat that would shield him from this place. Yeah, I think it would be fair to say...I liked Andy from the start.
I could see why some of the boys took him for snobby. He had a quiet way about him, a walk and a talk that just wasn't normal around here. He strolled, like a man in a park without a care or a worry in the world, like he had on an invisible coat that would shield him from this place. Yeah, I think it would be fair to say...I liked Andy from the start.
<p>...</p>
Alignment
Left aligned text.
Center aligned text.
Right aligned text.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
Color
Success Text Color
Warning Text Color
Danger Text Color
De-emphasize
<p class="text-success">Success Text Color</p>
<p class="text-warning">Warning Text Color</p>
<p class="text-danger">Danger Text Color</p>
<p class="deemphasize">De-emphasize</p>
Transformation
Lowercase text.
Upperscase text.
Capitalized text.
<p class="text-lowercase">Lowercase text.</p>
<p class="text-uppercase">Upperscase text.</p>
<p class="text-capitalize">Capitalized text.</p>