Typography

The base css framework comes with a variety of typography settings.

Font family

The default font family can be changed in the input.css configuration file

Headings

<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Paragraphs

Wrapping up normal text with a p tag for paragraphs

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Ipsam, ex dolore voluptatum, rerum accusamus accusantium 
obcaecati odio eius reiciendis vel nam autem quas tempore 
pariatur. Temporibus a rerum nobis consequatur?</p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, ex dolore voluptatum, rerum accusamus accusantium obcaecati odio eius reiciendis vel nam autem quas tempore pariatur. Temporibus a rerum nobis consequatur?

Anchor text

The framework is styled by default as below for link tags. You may change this in the SASS configuration file

<a href="#">link</a>

Text colors

• text-primary
• text-white
• text-muted
• text-black
• text-danger
• text-success
• text-info
• text-center
• pull-right

<div class="text-primary">hello</div>
<div class="text-white">hello</div>
<div class="text-muted">hello</div>
<div class="text-black">hello</div>
<div class="text-danger">hello</div>
<div class="text-success">hello</div>
<div class="text-info">hello</div>
<div class="text-center">hello</div>
<div class="pull-right">hello</div>

Code

You can print code blocks using the code class

<div class="code">This is a code block</div>

Ordered and unordered lists

<ol>
 <li>test</li>
 <li>test</li>
 <li>test</li>
</ol>

<ul>
 <li>test</li>
<li>test</li>
</ul>

1. test
2. test
3. test

• test
• test