By default, the standard set of typography tags will look like this:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Emphasized

Strong

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
  <em>Emphasized</em>
<p>
<p>
  <strong>Strong</strong>
<p>

Responsive

Font sizes and line-heights are set with responsive sizing based on the viewport width. Try changing the size of this screen or view on a different-sized screen for an example.

Content-optimized

To use content-optimized default paragraph text, simply pass in true to p()

Direct descendants will also acquire these styles, so this can be applied to a parent container as well.

Classes with .semantic and their direct descendants will be optimized for content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p class="readable">Lorem...</p>

p.readable {
  @include p(true);
}


<p class="readable">Lorem...</p>

or

<div class="readable">
  <p>Lorem...</p>
</div>

Headers

Create spacious, dominating header lines

How to cook a pie

The first step to cooking a pie is to choose a fancy tin.

<header class="page-heading">
  <h1>How to cook a pie</h1>
</header>
<p>The first step to cooking a pie is to choose a fancy pie tin.</p>

.page-heading {
  @include page-heading();
}

Lists

Sometimes bullets are annoying. Kickstart provides a couple ways of displaying unstyled lists:

Unstyled vertical

  • Apples
  • Bread
  • Nuts
  • Sugar
  • Flour

<ul class="list list-unstyled">
  <li>Apples</li>
  <li>Bread</li>
  ...
</ul>


<ul class="groceries">
  <li>Apples</li>
  <li>Bread</li>
  ...
</ul>

.groceries {
  @include list($style: 'unstyled');
}

Unstyled horizontal

  • Apples
  • Bread
  • Nuts
  • Sugar
  • Flour

<ul class="list list-unstyled list-horizontal">
  <li>Apples</li>
  <li>Bread</li>
  ...
</ul>


<ul class="groceries">
  <li>Apples</li>
  <li>Bread</li>
  ...
</ul>

.groceries {
  @include list($style: 'unstyled', $layout: 'horizontal');
}

Decoupled

While different sizes of text can be selected with the h1-h6 tags, this fringes on using HTML for styling. The level of a heading should dictate its hierarchy, but not necessarily its size.

For this reason, a set of heading classesmixins are available that can be added to the heading tags. Notice in each example below, an h1 tag is used, although the sizes vary.

Size xxl

Hello World

h1.xxl {
  @include heading-xxl();
}
 
<h1 class="xxl">Hello World</h1>
<h1 class="xxl">Hello World</h1>

Size xl

Hello World

h1.xl {
  @include heading-xl();
}
 
<h1 class="xl">Hello World</h1>
<h1 class="xl">Hello World</h1>

Size lg

Hello World

h1.lg {
  @include heading-lg();
}
 
<h1 class="lg">Hello World</h1>
<h1 class="lg">Hello World</h1>

Size md

Hello World

h1.md {
  @include heading-md();
}
 
<h1 class="md">Hello World</h1>
<h1 class="md">Hello World</h1>

Size rg

Hello World

h1.rg {
  @include heading-rg();
}
 
<h1 class="rg">Hello World</h1>
<h1 class="rg">Hello World</h1>

Size sm

Hello World

h1.sm {
  @include heading-sm();
}
 
<h1 class="sm">Hello World</h1>
<h1 class="sm">Hello World</h1>

Size xs

Hello World

h1.xs {
  @include heading-xs();
}
 
<h1 class="xs">Hello World</h1>
<h1 class="xs">Hello World</h1>

Size xxs

Hello World

h1.xxs {
  @include heading-xxs();
}
 
<h1 class="xxs">Hello World</h1>
<h1 class="xxs">Hello World</h1>