Styleguide
Typography
Fonts
General Sans
Heading
General Sans
Body
Headings
Heading
Heading
Heading
Heading
Heading
Heading
Class
Class
Class
Class
Class
Class
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
- Example Ordered List
- Example Ordered List
- Example Ordered List
- Example Unordered List
- Example Unordered List
- Example Unordered List
Responsive text
This text is 1.125em at 767px and below.
This text is 1em at 767px and below.
This text is 0.875em at 767px and below.
This text is 0.75em at 767px and below.
This text is 0.625em at 767px and below.
Font weight
Weight regular
Weight medium
Weight semibold
Weight bold
Colors
Background
Dark
White
Text
Brand
Dark
White
Modes Element
Text fade
text-fade
text-fade
Modes
Base
Invert
Utilities
Margin
Margin utilities
Margin sizes
Margin other
Text
Alignement
text-align: center;
text-align: right;
text-align: left;
Clamping
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Wrapping
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
Overflow
overflow: hidden;
overflow: visible;
overflow: scroll;
Display & position
Display
display: none;
display: block;
display: flex;
Positions
position: relative;
position: sticky;
position: absolute;
Responsive modifiers
display: none; (Tablet down)
display: none; (Mobile (L) down)
display: none; (Mobile only)
display: block; (Tablet down)
display: block; (Mobile (L) down)
display: block; (Mobile only)
Size
width: 100%;
height: 100%;
min-height: 100svh;
Aspect ratio
Multiple properties
Multiple properties
Multiple properties
Helpers
Multiple properties
Multiple properties
Multiple properties
Multiple properties
Multiple properties
Icon
Multiple properties
Multiple properties
Multiple properties
Multiple properties