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

.box

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. 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 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 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 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

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.

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
Button
Link Button
External button
Secondary button
Button
Secondary link button
External secondary button
External secondary link button

Forms

Input
Input with information message
Input with success message
Input with warning message
Input with error message
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
Form elements in a list

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.

Code blocks & snippets

Lorem ipsum dolor sit amet sample code Lorem ipsum dolor sit amet, consectetur..

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem culpa dicta illo dolor est, enim adipisci aliquam asperiores hic voluptate reprehenderit, libero aspernatur nihil quos eligendi quidem voluptatum nemo esse assumenda omnis vitae quas sit. Iste dicta saepe, a quo, vel provident laborum eligendi nesciunt incidunt obcaecati maiores, molestias nobis!
                        Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet.
                    
                        Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet.
                    
                        Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet.
                        Lorem ipsum dolor sit amet.

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. 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. Delectus non doloremque, ullam sed quasi perferendis.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio laudantium enim consectetur perspiciatis, fugit numquam!

Ordered list

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus saepe architecto itaque et cum, quod.
  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit officia, sit minima asperiores iusto tempora.
  3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut facilis omnis expedita atque facere, sunt.
  4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non doloremque, ullam sed quasi perferendis.
  5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non doloremque, ullam sed quasi perferendis.

.list

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus non doloremque, ullam sed quasi perferendis.
  • 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. Distinctio laudantium enim consectetur perspiciatis, fugit numquam!

.no-bullets

  • 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 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.

.inline-list

  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum

.grid-list

.inline-logos

  • Lenovo
  • EMC
  • AMD
  • Dell
  • IBM
  • Cisco
  • HP
  • ChaosPrime
  • Allwinner Technology
  • Real-Time Innovations
  • OSRF
  • LeMaker
  • Fairwaves
  • Zora Robotics
  • CloudPlugs
  • SolidRun

Stepped list

  1. 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. 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. 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. 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. 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.

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

Row hero

This is a hero unit title

Here you can have a subtitle or short introduction to the page.

Main button

Ubuntu on a laptop

Helper classes

.left and .right

left content
right content

.row-grey

Row with grey background

.no-border

Row with border

Row without border

.caps

This is uppercased

.touch-border

.accessibility-aid

You should not see this text

.align-center

This text should be centered

.video-container

.priority-0

This should not be visible on small screens

.for-medium

This should be visible on medium and large screens

.for-small

This should only be visible on small screens

.med-six-col