LIVE
CSS Components JS FDS Symbolset

Typography (Heading Level 1)

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      2. Aliquam tincidunt mauris eu risus.
    2. Aliquam tincidunt mauris eu risus.
  4. Aliquam tincidunt mauris eu risus.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Aliquam tincidunt mauris eu risus.
      • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      • Aliquam tincidunt mauris eu risus.
      • Aliquam tincidunt mauris eu risus.
    • Aliquam tincidunt mauris eu risus.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. Aliquam tincidunt mauris eu risus.
      • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      • Aliquam tincidunt mauris eu risus.
      • Aliquam tincidunt mauris eu risus.
    3. Aliquam tincidunt mauris eu risus.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      • Aliquam tincidunt mauris eu risus.
    • Aliquam tincidunt mauris eu risus.
  • Aliquam tincidunt mauris eu risus.

Tables

Table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
(Num) (First) (Last) (Handle)

Condensed Table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
(Num) (First) (Last) (Handle)

Bordered Table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
(Num) (First) (Last) (Handle)

Striped Table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
(Num) (First) (Last) (Handle)

Forms

Fancy Check List

Don't have an SSN?
Missing needed classes...
Reason for Validation Error
Are you sure?
Success?
$
$
$
Message
$
$ .00
$ .00
$ .00
Message
$ .00
.00
.00
.00
Message
.00

Fancy Check List

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Basic Check List

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Basic Check List

Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Testing validation messages on inputs of all sizes

Don't use anything less than col-sm-4. col-sm-6 is safest.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Inline Controls

chairs
chairs
chairs
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
chairs
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
$

Leaving a gap between two choices styled like buttons:

or

Leaving a gap between two choices, no conjunction:

Repeater

deleteRemove
deleteRemove
deleteRemove
deleteRemove
Warning Will Ronbinson!
Danger Will Ronbinson!
deleteRemove
deleteRemove

You can put anything inside a repeater.

Not that you should. Link Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Success! deleteRemove

Buttons

High-contrast button groups (based on primary button color)

Testing active styles and borders between buttons



Testing sizes



Testing disabled

Inverse Labels

Label Label Label Label Label Label