1. Home
  2. UI Elements
  3. Typography

Headers and leads

h1. SmartAdmin heading

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

 'Open Sans' 26px Light

h2. SmartAdmin heading

SmartAdmins's global default font-size is 13px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

 'Open Sans' 22px Light

h3. SmartAdmin heading

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>
'Open Sans' 18px Light

h4. SmartAdmin heading

 'Open Sans' 17px Light
h5. SmartAdmin heading
 'Open Sans' 16px Light
h6. SmartAdmin heading
 'Open Sans' 14px Bold 
<h1>h1. SmartAdmin heading</h1>
<h2>h2. SmartAdmin heading</h2>
<h3>h3. SmartAdmin heading</h3>
<h4>h4. SmartAdmin heading</h4>
<h5>h5. SmartAdmin heading</h5>
<h6>h6. SmartAdmin heading</h6>

h1. SmartAdmin heading Secondary text

h2. SmartAdmin heading Secondary text

h3. SmartAdmin heading Secondary text

h4. SmartAdmin heading Secondary text
h5. SmartAdmin heading Secondary text
h6. SmartAdmin heading Secondary text
 
<h1>h1. SmartAdmin heading <small>Secondary text</small></h1>
<h2>h2. SmartAdmin heading <small>Secondary text</small></h2>
<h3>h3. SmartAdmin heading <small>Secondary text</small></h3>
<h4>h4. SmartAdmin heading <small>Secondary text</small></h4>
<h5>h5. SmartAdmin heading <small>Secondary text</small></h5>
<h6>h6. SmartAdmin heading <small>Secondary text</small></h6>

Text and BG color options

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. .bg-color-green

.txt-color-green

Nullam id dolor id nibh ultricies vehicula ut id elit. .bg-color-greenDark

.txt-color-greenDark

Duis mollis, est non commodo luctus, nisi erat porttitor ligula. .bg-color-greenLight

.txt-color-greenLight

Maecenas sed diam eget risus varius blandit sit amet non magna. .bg-color-purple

.txt-color-purple

Etiam porta sem malesuada magna mollis euismod. .bg-color-magenta

.txt-color-magenta

Donec ullamcorper nulla non metus auctor fringilla. .bg-color-pink

.txt-color-pink

Lorem ipsum dolor sit amet, consectetur adipiscing elit. .bg-color-pinkDark

.txt-color-pinkDark

Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. .bg-color-blue

.txt-color-blue

Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien. bg-color-blueLight

.txt-color-blueLight

Libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros. .bg-color-blueDark

.txt-color-blueDark

Donec sodales sagittis magna. Sed consequat. .bg-color-teal

.txt-color-teal

Leo eget bibendum sodales, augue velit cursus nunc. .bg-color-yellow

.txt-color-yellow

Sed ut perspiciatis unde omnis iste natus error. .bg-color-orange

.txt-color-orange

Nemo enim ipsam voluptatem quia voluptas sit aspernatur. .bg-color-orangeDark

.txt-color-orangeDark

Qui dolorem ipsum quia dolor sit amet, consectetur. .bg-color-red

.txt-color-red

Nam libero tempore, cum soluta nobis est eligendi optio. .bg-color-redLight

.txt-color-redLight

Cumque nihil impedit quo minus id quod maxime placeat facere.

.text-muted

Qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

.text-primary

Ducimus qui blanditiis praesentium voluptatum deleniti.

.text-success

Aolorem eum fugiat quo voluptas nulla pariatur?

.text-danger

Ut enim ad minima veniam, quis nostrum exercitationem.

.text-warning

Tempora incidunt ut labore et dolore magnam aliquam quaerat.

.text-info

All Lists

  • Unordered List Item
  • I am inside a strong tag
  • I am Italic!
    • We can also be red
    • Or green
    • Even purple!
  • I am inside a strong and Italic tag, I may also break into a new line if squized
  • I am inside a small tag
<ul>
  <li>...</li>
</ul>
  1. Ordered List Item
  2. Ordered List Item
  3. Ordered List Item
    • Unstyled list with custom icon
    • Unstyled list with custom icon
    • Unstyled list with custom icon
  4. I am inside a strong and Italic tag, I may also break into a new line if squized
  5. I am a label
<ol>
  <li>...</li>
</ol>
  • Inline List Item #1
  • Inline List Item #2
  • Inline List Item #3 
<ul class="list-inline">
  <li>...</li>
</ul>

Quotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title 
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title 
<blockquote class="pull-right">
  ...
</blockquote>

Discription Lists

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Address

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com 
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

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>

Text sizes

Take full control over the font by controling the size with the following CSS

  • .font-xl
  • .font-lg
  • .font-md
  • .font-sm
  • .font-xs