Flexible Grid

A simple 12-column flexbox grid to get your content in shape.


1/12
.grid__cell--xxs-1

1/12
.grid__cell--xxs-1

1/12
.grid__cell--xxs-1

1/12
.grid__cell--xxs-1

1/12
.grid__cell--xxs-1

1/12
.grid__cell--xxs-1

1/12
.grid__cell--xxs-1

1/12
.grid__cell--xxs-1

1/12
.grid__cell--xxs-1

1/12
.grid__cell--xxs-1

1/12
.grid__cell--xxs-1

1/12
.grid__cell--xxs-1

2/12
.grid__cell--xxs-2

2/12
.grid__cell--xxs-2

2/12
.grid__cell--xxs-2

2/12
.grid__cell--xxs-2

2/12
.grid__cell--xxs-2

2/12
.grid__cell--xxs-2

3/12
.grid__cell--xxs-3

3/12
.grid__cell--xxs-3

3/12
.grid__cell--xxs-3

3/12
.grid__cell--xxs-3

4/12
.grid__cell--xxs-4

4/12
.grid__cell--xxs-4

4/12
.grid__cell--xxs-4

6/12
.grid__cell--xxs-6

6/12
.grid__cell--xxs-6

12/12
.grid__cell--xxs-12

10/12, Offset 2/12
.grid__cell--xxs-10 .grid__cell-offset-left--xxs-2

8/12, Offset 4/12
.grid__cell--xxs-8 .grid__cell-offset-left--xxs-4

6/12, Offset 6/12
.grid__cell--xxs-6 .grid__cell-offset-left--xxs-6

4/12, Offset 8/12
.grid__cell--xxs-4 .grid__cell-offset-left--xxs-8

2/12, Offset 10/12
.grid__cell--xxs-2 .grid__cell-offset-left--xxs-10

Typography Styles

Headings, Paragraphs, Lists and general text styles


Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Big copy (.text--big): Argentinien hat eine Fläche von 2,78 Millionen Quadratkilometern und ist damit der zweitgrößte Staat Südamerikas. Die Ausdehnung von Norden nach Süden beträgt 3.694 km, die von Westen nach Osten an der breitesten Stelle circa 1.423 km. Es grenzt im Osten an den Atlantischen Ozean, im Westen an Chile, im Norden an Bolivien und Paraguay, im Nordosten an Brasilien und Uruguay.

Regular copy: Lorem ipsum dolor super Text sit amet, consectetuer sub Text adipiscing elit, this is how a Textlink looks like sed diam nonummy nibh euismod this text is marked dolore magna aliquam erat strike through volutpat. Lorem ipsum dolor sit amet this text is bold nonummy nibh euismod italic text tincidunt ut inserted text laoreet dolore magna.

Small copy (.text--small): Argentinien hat eine Fläche von 2,78 Millionen Quadratkilometern und ist damit der zweitgrößte Staat Südamerikas. Die Ausdehnung von Norden nach Süden beträgt 3.694 km, die von Westen nach Osten an der breitesten Stelle circa 1.423 km. Es grenzt im Osten an den Atlantischen Ozean, im Westen an Chile, im Norden an Bolivien und Paraguay, im Nordosten an Brasilien und Uruguay.

.font-size--5xl / @include fontsize(5xl)

Argentina is a country located mostly in the southern half of South America.

.font-size--4xl / @include fontsize(4xl)

Argentina is a country located mostly in the southern half of South America.

.font-size--xxxl / @include fontsize(xxxl)

Argentina is a country located mostly in the southern half of South America.

.font-size--xxl / @include fontsize(xxl)

Argentina is a country located mostly in the southern half of South America.

.font-size--xl / @include fontsize(xl)

Argentina is a country located mostly in the southern half of South America.

.font-size--l / @include fontsize(l)

Argentina is a country located mostly in the southern half of South America.

.font-size--m / @include fontsize(m) Default

Argentina is a country located mostly in the southern half of South America.

.font-size--s / @include fontsize(s)

Argentina is a country located mostly in the southern half of South America.

.font-size--xs / @include fontsize(xs)

Argentina is a country located mostly in the southern half of South America.

Lists

(Un)ordered, Nested, Definitions


Unordered List

  • Unordered list item
  • Unordered list item
  • Unordered list item

Unordered List with nested items

  • Unordered list item
    • Nested unordered list item
    • Nested unordered list item
    • Nested unordered list item
  • Unordered list item
  • Unordered list item

Ordered List

  1. Ordered list item
  2. Ordered list item
  3. Ordered list item

Ordered List with nested items

  1. Unordered list item
    1. Nested unordered list item
    2. Nested unordered list item
    3. Nested unordered list item
  2. Unordered list item
  3. Unordered list item

Definition List

Defintion Term
Defintion Description duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Defintion Term
Defintion Description duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

FlexTable

A flexible table optimized for small screens


  Table header Table header Table header
  Table footer Table footer Table footer
Table row header Loremipsumdolorsitamet Loremipsumdolorsitamet Loremipsumdolorsitamet
Table row header Colspan content
Table row header Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Table row header Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

FlexForm

A simple, responsive form template


Associated help text or error message that can easily take some lines curabitur blandit tempus porttitor. Cras mattis amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Checkboxes

Radio Buttons