Class .Header with 100vh height

Simple flex grid layout

.Flex > 3x .Col, this cols will always auto sizing without screen width limitation

.Col
.Col
.Col

.Flex .Flex--lg > 3x .Col, this cols will only displayed flex if the screen is in large width (1200px or above). Beneath that measurement they are displayed block with full width.

.Col
.Col
.Col

Same with .Flex--md (990px -> 1100px)

.Col
.Col
.Col

Same with .Flex--sm (790px -> 989px)

.Col
.Col
.Col

Same with .Flex--xs (<= 779px)

.Col
.Col
.Col

Combined: .Flex--lg .Flex--md .Flex--sm

.Col
.Col
.Col

.Flex--lg .Flex--md with 1x .Col--big (double width) 1x Col--small (half width)

.Col
.Col

.Flex--lg .Flex--md .Flex--sm with 2x .Col--big (double width) 3x Col--small (half width)

.Col
.Col
.Col
.Col
.Col

Typography

h1.YACSSFW Heading

h2.YACSSFW Heading

h3.YACSSFW Heading

h4.YACSSFW Heading

h5.YACSSFW Heading
h6.YACSSFW Heading


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla sollicitudin venenatis. Nunc eget elit consequat, mattis ex lobortis, vestibulum mauris. Aenean accumsan elementum leo. Nunc vestibulum, odio eu efficitur porta, libero justo pellentesque risus, quis facilisis ipsum urna vel risus. Duis laoreet feugiat scelerisque. Sed lacinia quis nunc sit amet sagittis. In varius et lacus in pulvinar. Pellentesque sed rhoncus arcu, non vestibulum libero. Aenean quis orci nec sem malesuada elementum. Curabitur vehicula et ligula vel aliquet. Nullam sodales a tellus in fermentum.

Duis laoreet feugiat scelerisque. Sed lacinia quis nunc sit amet sagittis. In varius et lacus in pulvinar. Pellentesque sed rhoncus arcu, non vestibulum libero. Aenean quis orci nec sem malesuada elementum. Curabitur vehicula et ligula vel aliquet. Nullam sodales a tellus in fermentum.

Maecenas lectus libero, tincidunt at suscipit et, elementum in mauris. Fusce aliquet odio tortor, non consectetur dolor porta eu. Aenean pulvinar ante turpis, non volutpat risus euismod nec. Cras vitae imperdiet lectus. Sed non urna id metus aliquet porttitor. Suspendisse ut semper augue. In ut mollis nunc.

Duis laoreet feugiat scelerisque. Sed lacinia quis nunc sit amet sagittis. In varius et lacus in pulvinar. Pellentesque sed rhoncus arcu, non vestibulum libero. Aenean quis orci nec sem malesuada elementum. Curabitur vehicula et ligula vel aliquet. Nullam sodales a tellus in fermentum.

Pellentesque venenatis venenatis ex, quis sagittis magna viverra quis. Quisque at auctor mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque efficitur augue quis quam laoreet suscipit. Aenean tristique dui dignissim elit dictum convallis. Aliquam finibus libero in luctus aliquam. Nullam congue ligula pulvinar, vehicula sem nec, interdum mi. Integer efficitur risus vel porta dapibus. Quisque molestie purus sit amet ante suscipit, a pulvinar orci aliquet. Nunc ultrices placerat blandit. Phasellus felis nunc, aliquam nec risus ut, venenatis facilisis tortor.

Duis laoreet feugiat scelerisque. Sed lacinia quis nunc sit amet sagittis. In varius et lacus in pulvinar. Pellentesque sed rhoncus arcu, non vestibulum libero. Aenean quis orci nec sem malesuada elementum. Curabitur vehicula et ligula vel aliquet. Nullam sodales a tellus in fermentum.

Quotes

Class Output
.Quote
Lorem ipsum dolor sit amet
.Quote__Footer
.Quote .Quote--info
Lorem ipsum dolor sit amet
.Quote .Quote--success
Lorem ipsum dolor sit amet
.Quote .Quote--warning
Lorem ipsum dolor sit amet
.Quote .Quote--error
Lorem ipsum dolor sit amet
Nulla vel risus eu metus gravida molestie nec sed ante. Praesent scelerisque dapibus ante eget varius. Suspendisse maximus, felis id viverra varius, quam mi porttitor lacus, quis vestibulum nisl libero ut metus. Julius Caesar
Nulla vel risus eu metus gravida molestie nec sed ante. Praesent scelerisque dapibus ante eget varius. Suspendisse maximus, felis id viverra varius, quam mi porttitor lacus, quis vestibulum nisl libero ut metus. Julius Caesar
Nulla vel risus eu metus gravida molestie nec sed ante. Praesent scelerisque dapibus ante eget varius. Suspendisse maximus, felis id viverra varius, quam mi porttitor lacus, quis vestibulum nisl libero ut metus. Julius Caesar
Nulla vel risus eu metus gravida molestie nec sed ante. Praesent scelerisque dapibus ante eget varius. Suspendisse maximus, felis id viverra varius, quam mi porttitor lacus, quis vestibulum nisl libero ut metus. Julius Caesar
Nulla vel risus eu metus gravida molestie nec sed ante. Praesent scelerisque dapibus ante eget varius. Suspendisse maximus, felis id viverra varius, quam mi porttitor lacus, quis vestibulum nisl libero ut metus. Julius Caesar

Quotes inside flex grid.

Nulla vel risus eu metus gravida molestie nec sed ante. Praesent scelerisque dapibus ante eget varius. Suspendisse maximus, felis id viverra varius, quam mi porttitor lacus, quis vestibulum nisl libero ut metus. Julius Caesar
Nulla vel risus eu metus gravida molestie nec sed ante. Praesent scelerisque dapibus ante eget varius. Suspendisse maximus, felis id viverra varius, quam mi porttitor lacus, quis vestibulum nisl libero ut metus. Julius Caesar

Links

Class Output
.Link Normal link
.Link .Link--info Info link
.Link .Link--success Success link
.Link .Link--warning Warning link
.Link .Link--error Error link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus risus, scelerisque ut lorem a, tincidunt cursus est. Nam sagittis maximus rhoncus. Maecenas non sapien et lorem blandit eleifend eget ut sem. Nulla sit amet congue mauris. Vivamus non ante elementum, convallis eros eget, volutpat lorem. Phasellus vel arcu nec turpis pellentesque condimentum. Duis scelerisque erat non nisl maximus faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus risus, scelerisque ut lorem a, tincidunt cursus est. Nam sagittis maximus rhoncus. Maecenas non sapien et lorem blandit eleifend eget ut sem. Nulla sit amet congue mauris. Vivamus non ante elementum, convallis eros eget, volutpat lorem. Phasellus vel arcu nec turpis pellentesque condimentum. Duis scelerisque erat non nisl maximus faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus risus, scelerisque ut lorem a, tincidunt cursus est. Nam sagittis maximus rhoncus. Maecenas non sapien et lorem blandit eleifend eget ut sem. Nulla sit amet congue mauris. Vivamus non ante elementum, convallis eros eget, volutpat lorem. Phasellus vel arcu nec turpis pellentesque condimentum. Duis scelerisque erat non nisl maximus faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus risus, scelerisque ut lorem a, tincidunt cursus est. Nam sagittis maximus rhoncus. Maecenas non sapien et lorem blandit eleifend eget ut sem. Nulla sit amet congue mauris. Vivamus non ante elementum, convallis eros eget, volutpat lorem. Phasellus vel arcu nec turpis pellentesque condimentum. Duis scelerisque erat non nisl maximus faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus risus, scelerisque ut lorem a, tincidunt cursus est. Nam sagittis maximus rhoncus. Maecenas non sapien et lorem blandit eleifend eget ut sem. Nulla sit amet congue mauris. Vivamus non ante elementum, convallis eros eget, volutpat lorem. Phasellus vel arcu nec turpis pellentesque condimentum. Duis scelerisque erat non nisl maximus faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus risus, scelerisque ut lorem a, tincidunt cursus est. Nam sagittis maximus rhoncus. Maecenas non sapien et lorem blandit eleifend eget ut sem. Nulla sit amet congue mauris. Vivamus non ante elementum, convallis eros eget, volutpat lorem. Phasellus vel arcu nec turpis pellentesque condimentum. Duis scelerisque erat non nisl maximus faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus risus, scelerisque ut lorem a, tincidunt cursus est. Nam sagittis maximus rhoncus. Maecenas non sapien et lorem blandit eleifend eget ut sem. Nulla sit amet congue mauris. Vivamus non ante elementum, convallis eros eget, volutpat lorem. Phasellus vel arcu nec turpis pellentesque condimentum. Duis scelerisque erat non nisl maximus faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacus risus, scelerisque ut lorem a, tincidunt cursus est. Nam sagittis maximus rhoncus. Maecenas non sapien et lorem blandit eleifend eget ut sem. Nulla sit amet congue mauris. Vivamus non ante elementum, convallis eros eget, volutpat lorem. Phasellus vel arcu nec turpis pellentesque condimentum. Duis scelerisque erat non nisl maximus faucibus.

Alerts

Class Output
.Alert .Alert--light
Light alert
.Alert .Alert--info
Info alert
.Alert .Alert--success
Success alert
.Alert .Alert--warning
Warning alert
.Alert .Alert--error
Error alert
Light alert
Info alert
Success alert
Warning alert
Error alert

Buttons

Class Output Disabled
.Button
.Button .Button--info
.Button .Button--success
.Button .Button--warning
.Button .Button--error

Buttons inside a .Grid

Buttons with .width--100 helper

Keys

Class Output
.Key A B C
.Key__Secondary in .Key Aa Bb Cc
.Key__Teritary in .Key Aa Bb Cc
.Key__Secondary + .Key__Teritary in .Key A+a B+b C+c
.Key .Key--active A+a B+b C+c
.Key .Key--info Aa Bb Cc
.Key .Key--success Aa Bb Cc
.Key .Key--warning Aa Bb Cc
.Key .Key--error Aa Bb Cc

Without active keys

q w e r t z u i o p ü +*~
a s d f g h j k l ö ä #'
<>| y x c v b n m ,; .: - shift

With active keys

q w e r t z u i o p ü +*~
a s d f g h j k l ö ä #'
<>| y x c v b n m ,; .: - shift

Keys with colors

q w e r t z u i o p ü +*~
a s d f g h j k l ö ä #'
<>| y x c v b n m ,; .: - shift

Forms

Male
Female
Other
Yes, I want to receive 100 spam mails - per day! Awwwwww yeah!

Dropdowns

Dropup

With tertiary menu

Dropdown

Dropup

NavBar