• $white: #fff
  • $gray-light: #f9f9f9
  • $gray-light-2: #eee
  • $gray-light-3: #ddd
  • $gray-light-4: #bbb
  • $gray: #808080
  • $gray-med: #666
  • $gray-dark: #444
  • $gray-dark-2: #131313
  • $black: #000
  • $dim-light: rgba(0,0,0,0.2)
  • $dim: rgba(0,0,0,0.5)
  • $dimmer: rgba(0,0,0,0.8)
  • $orange: #ffc872
  • $info-light: #d3f2ff
  • $info: #0192d0
  • $error-light: #fdded8
  • $error: #b12a0b
  • $success-light: #d4f3e6
  • $success: #03804d
  • $warning-light: #fffecf
  • $warning: #a59b15
Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
Fade: Duration: 0.1s Easing: ease-out (Hover to see effect)

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y


Created by Brad Frost
  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item
  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item
Checkbox *
Radio
thisisalongusernamenamename
  • #icon-bin

  • #icon-bullet

  • #icon-cancel-circle

  • #icon-checkmark

  • #icon-checkmark2

  • #icon-cross

  • #icon-facebook

  • #icon-facebook3

  • #icon-gear

  • #icon-google

  • #icon-heart-broken

  • #icon-heart

  • #icon-link

  • #icon-linkedin2

  • #icon-list-countdown

  • #icon-list-numbered

  • #icon-list2

  • #icon-mail

  • #icon-mention

  • #icon-minus

  • #icon-plus

  • #icon-radio-checked

  • #icon-radio-unchecked

  • #icon-search

  • #icon-star-empty

  • #icon-star-full

  • #icon-twitter

  • #icon-twitter3

1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4

Heading

Subheading

  • Lorem ipsum dolor sit This is a link.
    Info Message
    Success Message
    Error Message
    Warning Message
    bin bin2 cancel-circle checkmark checkmark2 cross facebook gear google heart heart-broken link linkedin2 list-countdown list-numbered list2 mail mention minus plus radio-checked radio-checked2 radio-unchecked search star-empty star-full twitter
    bin bin2 cancel-circle checkmark checkmark2 cross facebook gear google heart heart-broken link linkedin2 list-countdown list-numbered list2 mail mention minus plus radio-checked radio-checked2 radio-unchecked search star-empty star-full twitter

    Heading

    List Heading

    List Heading

    List Heading

    List Heading

    thisisalongusernamenamename

    Thisisauser Withaverylongname

    thisisalongusernamenamename

    I am a web designer, speaker, writer, consultant, musician, and artist in beautiful Pittsburgh, PA. Author of Atomic Design. Married to the lovely @minifrost.

    Tab 1 Content

    Tab 2 Content