Sensible default styles

Hit the ground running with sensible default styles that are easily customized.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph text with strong or emphasis added. Also links.

Unordered list:

  • Unordered list
  • Unordered list
    • Unordered list
    • Unordered list
    • Unordered list
  • Unordered list

Ordered list:

  1. Ordered list
  2. Ordered list
    1. Ordered list
    2. Ordered list
    3. Ordered list
  3. Ordered list

Blockquotes:

Lorem ipsum dolor sit amet

— Citation

Code examples:

class Greeter
  def speak
    "Hello, world!"
  end
end

An inline code works, too.

Sexy buttons

Use pre-made buttons in various sizes to call your users to action.

Save
Save changes
Save changes
Save changes

Left
Middle
Right

Design forms with ease

Hit the ground running with sensible default styles that are easily customized.

Error message
Confirmation message
Warning message
Input lines
must be at least 6 characters long
Stacked form
is visible to your friends and family.
needs to be checked before you can continue
or cancel

Flexible, mobile-first grid

Divide your page into columns using a flexible grid system, with optional customisation of the grid for larger screens.

span-3-5 push-2-5
span-2-5 pull-5-5

span-5-5 large-span-2-5
span-3-5 large-span-2-5
span-2-5 large-span-1-5

span-1-5
span-1-5
span-1-5
span-1-5
span-1-5

span-2-5
span-3-5

span-4-5
span-1-5

span-2-5
column--right span-2-5

span-5-5

Vertical stacks

Use flex-box to create versatile vertical layouts with less markup.

Header
Content
Footer
Header
Content
Footer
Content
Footer