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

Justified text.

No wrap text.

Truncating text. Truncating text. Truncating text. Truncating text. Truncating text. Truncating text. Truncating text. Truncating text.

Left aligned text.

Center aligned text.

Right aligned text.

Right aligned text on viewports sized SM (small) or wider.

Right aligned text on viewports sized MD (medium) or wider.

Right aligned text on viewports sized LG (large) or wider.

Right aligned text on viewports sized XL (extra-large) or wider.

        
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

<p class="text-sm-right">Right aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-right">Right aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-right">Right aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-right">Right aligned text on viewports sized XL (extra-large) or wider.</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>
        
      
anchor link to top of page