Typography

Headings

Bold (600 - Default)

h1. Title Subtitle

h2. Title Subtitle

h3. Title Subtitle

h4. Title Subtitle

h5. Title Subtitle

Extra Bold (700)

h1. Title Subtitle

h2. Title Subtitle

h3. Title Subtitle

h4. Title Subtitle

h5. Title Subtitle

Normal (400)

h1. Title Subtitle

h2. Title Subtitle

h3. Title Subtitle

h4. Title Subtitle

h5. Title Subtitle

Light (300)

h1. Title Subtitle

h2. Title Subtitle

h3. Title Subtitle

h4. Title Subtitle

h5. Title Subtitle

Headings

Title Display 1

Title Display 2

Title Display 3

Title Display 4

Title Display 5

Title Display 6

Typography

Badges

Default

Default Primary Success Info Warning Danger

Home Settings Great! More Info Attention Error

Pills

Default Primary Success Info Warning Danger

Home Settings Great! More Info Attention Error

Text

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

Contextual Colors

This text has the success color..

This text has the info color..

This text has the warning color..

This text has the danger color..

This text has the muted color..

This text has the primary darker color..

This text has the primary dark color..

This text has the primary color ..

This text has the primary light color..

This text has the primary lighter color..

This text has the gray darker color..

This text has the gray dark color..

This text has the gray color ..

This text has the gray light color..

This text has the gray lighter color..

Lists

Unordered List

  • First item
  • Second item
  • Sublist
    • First subitem
    • Second subitem
    • Third subitem
  • Third item

Ordered List

  1. First item
  2. Second item
  3. Sublist
    1. First subitem
    2. Second subitem
    3. Third subitem
  4. Third item

Icon List

  • First item
  • Second item
  • Sublist
    • First subitem
    • Second subitem
    • Second subitem
  • Third item

Unstyled List

  • First item
  • Second item
  • Sublist
    • First subitem
    • Second subitem
    • Third subitem
  • Third item
Icon Lists

Projects

  • Project
    WordPress Theme
  • Tasks
    72
  • Hours
    190
  • Deadline
    in 10 days

Real Estate

  • Location
    London
  • Type
    Apartment
  • Rent Per Month
    $800
  • Last Updated
    2 hours ago

Orders

  • Basket
    7 products
  • Discount
    -30%
  • Total
    $27.8
  • Created
    1 month ago

Contextual Backgrounds

Success

Info

Warning

Danger

Muted

Success Light

Info Light

Warning Light

Danger Light

Muted Light

Darker

Dark

Primary

Light

Lighter

Blockquotes

There is nothing permanent except change.

If you cannot do great things, do small things in a great way.

Addresses

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com

Paragraphs

Lead

This is a lead paragraph. You can use it you highlight your main point before your article. It is great for such usage.

Normal

Potenti elit lectus augue eget iaculis vitae etiam, ullamcorper etiam bibendum ad feugiat magna accumsan dolor, nibh molestie cras hac ac ad massa, fusce ante convallis ante urna molestie vulputate bibendum tempus ante justo arcu erat accumsan adipiscing risus, libero condimentum venenatis sit nisl nisi ultricies sed, fames aliquet consectetur consequat nostra molestie neque nullam scelerisque neque commodo turpis quisque etiam egestas vulputate massa, curabitur tellus massa venenatis congue dolor enim integer luctus, nisi suscipit gravida fames quis vulputate nisi viverra luctus id leo dictum lorem, inceptos nibh orci.

Potenti elit lectus augue eget iaculis vitae etiam, ullamcorper etiam bibendum ad feugiat magna accumsan dolor, nibh molestie cras hac ac ad massa, fusce ante convallis ante urna molestie vulputate bibendum tempus ante justo arcu erat accumsan adipiscing risus, libero condimentum venenatis sit nisl nisi ultricies sed, fames aliquet consectetur consequat nostra molestie neque nullam scelerisque neque commodo turpis quisque etiam egestas vulputate massa, curabitur tellus massa venenatis congue dolor enim integer luctus, nisi suscipit gravida fames quis vulputate nisi viverra luctus id leo dictum lorem, inceptos nibh orci.