Icons

Typography

Headline Styles

Display Headline

Main Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Medium Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Light Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Multiline Headlines

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Block Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Reiciendis soluta ab, soluta molestiae nesciunt ipsum est quis debitis voluptas qui at sed quo? Praesentium voluptate voluptatum placeat ea molestiae doloribus deserunt?

Exercitationem eum esse quos minus, maiores suscipit cupiditate delectus reprehenderit illo quidem distinctio esse nam aliquam fugit, reiciendis veritatis a expedita nisi deserunt rem repellat quos placeat illum, minima est iusto itaque iure? Odit facere possimus architecto sunt facilis voluptatibus eaque maiores necessitatibus, dolor deserunt est.

Lead body copy

lorem ipsum dolor sit amet consectetur adipisicing elit

architecto ab dolor explicabo inventore fugit quis doloribus minus nesciunt cumque sint

Text Alignment

lorem ipsum dolor sit amet consectetur adipisicing elit

lorem ipsum dolor sit amet consectetur adipisicing elit

lorem ipsum dolor sit amet consectetur adipisicing elit

Lists

Ordered & Unordered

  1. Apples
    • Cox
    • Gala
    • Bræburn
  2. Oranges
  3. Pears

Bordered

Inline Lists

Definition Lists

Apple
dicta possimus iusto voluptatibus blanditiis totam incidunt excepturi mollitia quia aliquid eius
enim architecto velit corporis doloremque soluta sapiente eum ad optio dolorem sit
Orange
accusantium mollitia facilis nostrum iusto et iure unde dolorum alias corporis ullam
Pear
sint ullam exercitationem aliquid saepe ratione labore neque quis molestias dolorem inventore

Buttons

Link

Dropdowns

Button Dropdowns

Navigation

Horizontal Menu

Vertical Menu

Navbar with brand + primary nav

Inverted Navbar + primary nav

Navbar with brand + primary nav + secondary nav

Navbar with brand + secondary nav

Navbar with brand + secondary nav button

Breadcrumb

  1. Categories
  2. Games
  3. Side Scrolling Shoot 'Em Ups

Default Pagination

Pagination with break

Forms

Default Forms

By default individual form controls receive styling, with minimal classing and without any required base class on the form or large changes in markup.

Results in stacked, left-aligned labels on top of form controls.

Form help text
Payment Details
Form help text
Inline form help text

Inline Form

Simple inline form

Required Inputs

To mark a form control as required, add the required attribute.

Disabled Inputs

To mark a form control as disabled, add the disabled attribute.

Readonly Inputs

Checkboxes & Radios

Radio inputs default, stacked
Radio inputs inline, stacked
Checkbox default, stacked
Checkbox inline, stacked

Layout, including Pure (ues-) Grids

Outer 1/5

lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore

Inner 1/2 of 4/5

lorem ipsum dolor sit amet consectetur adipisicing elit

Inner 2/2 of 4/5

lorem ipsum dolor sit amet consectetur adipisicing elit

Feedback

Static messages, warnings, errors, notices

Message

Disabled

Success

Warning

Error

Pulsating error

Information

Closable

Block element with border

Warning with an important link

Tables

Default table

Fruit Weight Colour
Apple 150g Red|Green
Orange 200g Orange

Small table

Fruit Weight Colour
Apple 150g Red|Green
Orange 200g Orange

Bordered Table

Fruit Weight Colour
Apple 150g Red|Green
Orange 200g Orange

Horizontal border

Fruit Weight Colour
Apple 150g Red|Green
Orange 200g Orange

Striped

Fruit Weight Colour
Apple 150g Red|Green
Orange 200g Orange
Banana 110g Yellow
Strawberry 5g Red
Tomato 80g Red
Pineapple 600g Greenyellow
Basket 130g Brown

Caption, colgroup, cols, tfoot

Fruits and their attributes
Fruit Weight Colour
Averages 175g Bright colours
Apple 150g Red|Green
Orange 200g Orange