Welcome to the Oak demo!

This is already a demonstration of the hero element.

Typography

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Headline 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Headline 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Headline 4

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Headline 5

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Headline 6

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

This is a narrow paragraph to make long paragraphs easier to read. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

This is a blockqoute
This is some code

XXL font size

XL font size

L font size

M font size

S font size

XS font size (default text size)

XXS font size

Colors

Base color
Brand color
Accent color (same as notice by default)
Danger color
Warning color
Success color
Notice color
Muted color

Panels

Default panel

Base panel

Brand panel

Accent panel

Danger panel

Warning panel

Success panel

Notice panel

Panel with heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Tight panel

Buttons

Buttons are accent-colored by default.

Forms

Legend

Grid

Resize your browser window to see the effect on the grids!

col-6 col-s-12 col-m-3 col-l-4
col-6 col-s-12 col-m-3 col-l-8
col-6 col-m-3 col-l-8
col-6 col-m-3 col-l-4
col-12 col-m-6
col-12 col-m-6
col-6 col-l-5
col-6 col-l-4
col-12 col-l-3
col-12 col-s-6
col-12 col-s-6
col-12

Notice how Oak's grid system is mobile-first? Contrary to many other Frameworks, the default width is always for extra small screens. From there on you specify the behaviour on larger screens.

Dynamic column width

col-min
col-max
col-6 col-m-max
col-6 col-m-min

Tight grid

col-6 col-m-4
col-6 col-m-4
col-6 col-m-4
col-6 col-m-4
col-6 col-m-4
col-6 col-m-4
col-6 col-m-4
col-6 col-m-4

Vertical alignment

Work in progress!

default behaviour (align-top)

			
col-align-middle

			
col-align-bottom

			

Shaded content

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Eyecatcher content

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Parallax image

Super simple, super adaptable and just works.

Container

First element inside a default container
Second element inside a default container
First element inside a default container
Second element inside a default container
First element inside a spacious container
Second element inside a spacious container

Groups

group group
group-item
group-item

Group alignment

group-item
group-item
group-item
group-item
group-item
group-item

Conditional alignment

Resize your browser window to see the effect on the group below!

group-item
group-item
group-item

Tight groups

group group
group-item
group-item

Lists

  1. List item
  2. List item
  3. List item

Descriptive lists

Title
Data
Title
Data

List groups

Tables

Head Head Head
Data Data Data
Data Data
Data Data
Foot Foot Foot
Data Data Data
Data Data Data
Data Data Data

Highlighting

Head Head Head
Data Data Data
Data Data Data
Data Data Data

Slider

Example

Lorem Ipsum

Example

Lorem Ipsum

Example

Lorem Ipsum

Cards

Example

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Example

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.