h1 - Lorem ipsum dolor sit amet, consectetur.

h2 - Lorem ipsum dolor sit amet, consectetur.

h3 - Lorem ipsum dolor sit amet, consectetur.

h4 - Lorem ipsum dolor sit amet, consectetur.

h5 - Lorem ipsum dolor sit amet, consectetur.
h6 - Lorem ipsum dolor sit amet, consectetur.

Section head

Pre head

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa nemo temporibus quos dicta aperiam quisquam, totam iste eos sed, soluta laborum ab quis! Enim laudantium quasi repellat a maiores ratione.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, eaque deserunt ullam asperiores dicta deleniti atque natus, suscipit quibusdam tempora sed perspiciatis. Commodi suscipit esse quibusdam vitae amet, sed atque. Quasi accusantium assumenda voluptatum, totam quas tempora veritatis quae omnis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolor cum optio asperiores saepe libero perferendis quam incidunt veniam amet?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, consequatur a aliquam nulla nam voluptatum amet vitae nesciunt expedita eligendi.

  • Lorem ipsum dolor sit.
  • Lorem ipsum dolor sit.
  • Lorem ipsum dolor sit.
  • Lorem ipsum dolor sit.
  • Lorem ipsum dolor sit.
  1. Lorem ipsum dolor sit.
  2. Lorem ipsum dolor sit.
  3. Lorem ipsum dolor sit.
  4. Lorem ipsum dolor sit.
  5. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, ipsum facere. Voluptatem aspernatur iste consectetur beatae fugit nesciunt, dolor maxime.

Button theme Button dark Button light

Button theme Button dark Button light
Button block
Lorem Lorem Lorem
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum

Columns

.col-10
.col-10
.col-10
.col-10
.col-10
.col-10
.col-10
.col-10
.col-10
.col-10
.col-16
.col-16
.col-16
.col-16
.col-16
.col-16
.col-20
.col-20
.col-20
.col-20
.col-20
.col-25
.col-25
.col-25
.col-25
.col-33
.col-33
.col-33
.col-50
.col-50
.col-100
.col-40
.col-60
.col-33
.col-33
.col-30
.col-70
.col-20
.col-80
.col-10
.col-90

Responsive

.col-100 + .col-l-90 + .col-m-60 + .col-s-80 + .col-xs-100

Containers

.container--small
.container
.container--big
.container-fluid

Rows

.row--center > .col-33
.row--v-center > .col-50

.row--v-center > .col-50

.row--flat > .col-50
.row--flat > .col-50

.block + .white-bg

.block + .gray-bg

.block + .dark-bg + .light-color

.block + .theme-bg + .light-color

.block + .block--compact


Legend
Help text block
Error text

Oh yhea, you did it!

Form dark UI
Help text block

Helper classes (ig-base.css)

.nm

Removes margin from element

.np

Removes padding from element

.flex-center

Centers first level child vertically and horizontally

.text-left, .text-center, .text-right

Aligns text of element using text-align

.hidden

Hides element using visibility and opacity

.hide

Hides element using display

.show--m, .show--s, .show--xs

Element will only be visible from selected viewport width size and lower

.hide--m, .hide--s, .hide--xs

Element will be hidden from selected viewport width size and lower

.sr-only

Element will only be visible to screen readers

.loading

Adds loading animation to element.