Grid
.twelve-col
.eleven-col
.ten-col
.two-col
.nine-col
.three-col
.eight-col
.four-col
.seven-col
.five-col
.six-col
.six-col
.four-col
.four-col
.four-col
.three-col
.three-col
.three-col
.three-col
.two-col
.eight-col
.two-col
.three-col
.six-col
.three-col
Nested grid
.eight-col
.four-col
.four-col
.two-col
.three-col
.three-col
.one-col
.seven-col
.two-col
.two-col
Buttons
.neutral--button
.button--positive
.button--destructive
button--base
Text Link
Forms
Input
Input inside a fieldset
Input number
Input search
Input password
Input email
Input telephone
Disabled input
Submit input
Select box
Checkbox
Checkbox disabled
Radio
Radio disabled
Textarea
Readonly textarea
Typography
h1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
h2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
h3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
h4 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
h5 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
h6 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
A Paragraph
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.
Blockquote
“ Ubuntu is an ancient African word meaning 'humanity to others'. ”
Canonical
“ Ubuntu is an ancient African word meaning 'humanity to others'. ”
Canonical
“ Ubuntu is an ancient African word meaning 'humanity to others'. ”
Canonical
“ Ubuntu is an ancient African word meaning 'humanity to others'. ”
Canonical
Pull quote
“ Ubuntu is an ancient African word meaning 'humanity to others'. ”
Canonical
Pull quote
“ Ubuntu is an ancient African word meaning 'humanity to others'. ”
Canonical
Row quote
“ Ubuntu is an ancient African word meaning 'humanity to others'. ”
Canonical
Lists
Un-ordered list
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis vel ratione, consectetur ullam quidem soluta!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic optio rerum tempore iste delectus necessitatibus.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate praesentium voluptatum laudantium, officia mollitia labore.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae quia, ipsum odio doloribus ut, molestias!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nesciunt ab corporis dolores optio minima.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio laudantium enim consectetur perspiciatis, fugit numquam!
Ordered list
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit officia, sit minima asperiores iusto tempora.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur suscipit quis repudiandae fugit, sint blanditiis!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel officia obcaecati eveniet adipisci? Impedit, assumenda!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut facilis omnis expedita atque facere, sunt.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non doloremque, ullam sed quasi perferendis.
.list
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis vel ratione, consectetur ullam quidem soluta!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic optio rerum tempore iste delectus necessitatibus.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate praesentium voluptatum laudantium, officia mollitia labore.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae quia, ipsum odio doloribus ut, molestias!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nesciunt ab corporis dolores optio minima.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio laudantium enim consectetur perspiciatis, fugit numquam!
.no-bullets
- Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit officia, sit minima asperiores iusto tempora.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur suscipit quis repudiandae fugit, sint blanditiis!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel officia obcaecati eveniet adipisci? Impedit, assumenda!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut facilis omnis expedita atque facere, sunt.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non doloremque, ullam sed quasi perferendis.
.inline-list
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
Table
| Header | Header | Header | |
|---|---|---|---|
| Footer | Footer | Footer | |
| Header row | Table cell | Table cell | Table cell |
| Header row | Table cell | Table cell | Table cell |
| Header row | Table cell | Table cell | Table cell |
Page hero
This is a hero unit title
Here you can have a subtitle or short introduction to the page.
