Grid

.twelve-col

.eleven-col

.ten-col

.two-col

.nine-col

.three-col

.eight-col

.four-col

.seven-col

.five-col

.six-col

.four-col

.three-col

.two-col

.eight-col

.two-col

.three-col

.six-col

.three-col

Nested grid

.eight-col

.four-col

.two-col

.three-col

.one-col

.seven-col

.two-col

Equal heights

with divs

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at elit augue. Maecenas eleifend varius leo id facilisis. Nunc sit amet hendrerit nisl. Fusce posuere bibendum mi dignissim venenatis. Ut ornare quis velit ac lobortis. Vestibulum faucibus tortor iaculis hendrerit viverra. Maecenas in molestie sapien.

Short piece of text

Vertically center an element

Sets the element to center an inner element vertically.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt suscipit magna purus lorem, fishcakes dictum vel dolor eu, tincidunt suscipit magna. Suspendisse dignissim nisl vitae turpis iaculis, tincidunt suscipit magna. Suspendisse dignissim nisl vitae turpis iaculis, tincidunt suscipit magna ut tempor enim gravida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus lorem, dictum vel dolor eu, hipster tincidunt suscipit magna. Suspendisse tin hat dignissim nisl vitae turpis iaculis, ut tempor enim gravida.

.equal-height__align-vertically

with list

Title

Lorem ipsum dolor sit amet.
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at elit augue. Maecenas eleifend varius leo id facilisis.
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at elit augue. Maecenas eleifend varius leo id facilisis. Nunc sit amet hendrerit nisl. Fusce posuere bibendum mi dignissim venenatis. Ut ornare quis velit ac lobortis.
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at elit augue. Maecenas eleifend varius leo id facilisis. Nunc sit amet hendrerit nisl. Fusce posuere bibendum mi dignissim venenatis. Ut ornare quis velit ac lobortis. Vestibulum faucibus tortor iaculis hendrerit viverra. Maecenas in molestie sapien.

Equal heights with vertical divider

with divs

Title

Lorem ipsum dolor sit amet, consectetur consectetur consectetur adipiscing elit. Donec at elit augue. Maecenas eleifend varius leo id facilisis. Nunc sit amet hendrerit nisl. Ut ornare quis velit ,fusce posuere bibendum mi moleskin venenatis. Ut ornare quis velit ac lobortis. Vestibulum faucibus tortor iaculis hendrerit viverra. Maecenas in molestie sapien.

Title

with list

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at elit augue. Maecenas eleifend varius leo id facilisis. Nunc sit amet hendrerit nisl. Fusce posuere bibendum mi dignissim venenatis. Ut ornare quis velit ac lobortis. Vestibulum faucibus tortor iaculis hendrerit viverra. Maecenas in molestie sapien.
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at elit augue. Maecenas eleifend varius leo id facilisis. Nunc sit amet hendrerit nisl. Fusce posuere bibendum mi dignissim venenatis. Ut ornare quis velit ac lobortis. Vestibulum faucibus tortor iaculis hendrerit viverra. Maecenas in molestie sapien.
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at elit augue. Maecenas eleifend varius leo id facilisis. Nunc sit amet hendrerit nisl. Vestibulum faucibus tortor iaculis hendrerit viverra. Maecenas in molestie sapien.
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at elit augue. Maecenas eleifend varius leo id facilisis. Nunc sit amet hendrerit nisl. Fusce posuere bibendum mi dignissim venenatis. Ut ornare quis velit ac lobortis. Vestibulum faucibus tortor iaculis hendrerit viverra. Maecenas in molestie sapien.

Buttons

Button

Link Button

Secondary button

Button

Secondary link button

Link

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

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

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.

.list-ticks

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non doloremque, ullam sed quasi perferendis.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.

.list-ticks--compact

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non doloremque, ullam sed quasi perferendis.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.

.list-ticks--canonical

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non doloremque, ullam sed quasi perferendis.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.

.list-ticks--canonical-compact

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non doloremque, ullam sed quasi perferendis.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
Lorem ipsum dulor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.

.inline-list

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Stepped list

1 First step

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus lorem, dictum vel dolor eu, tincidunt suscipit magna. Suspendisse dignissim nisl vitae turpis iaculis, ut tempor enim gravida.
2 Second step

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus lorem, dictum vel dolor eu, tincidunt suscipit magna. Suspendisse dignissim nisl vitae turpis iaculis, ut tempor enim gravida.
3 Third step

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus lorem, dictum vel dolor eu, tincidunt suscipit magna. Suspendisse dignissim nisl vitae turpis iaculis, ut tempor enim gravida.
4 Forth step

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus lorem, dictum vel dolor eu, tincidunt suscipit magna. Suspendisse dignissim nisl vitae turpis iaculis, ut tempor enim gravida.
5 Last but not least

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus lorem, dictum vel dolor eu, tincidunt suscipit magna. Suspendisse dignissim nisl vitae turpis iaculis, ut tempor enim gravida.