Scroll down

Ui-kit

Everything you need...

Typography

Headings, body and other common text elements.

Hero
Display
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Subtitle
Paragraph
Paragraph Small
Label Medium
Label Small
Italic
Aa

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.

SFT Schrifted Serif Italic
Voice
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789!@#§%^&*_+
SFT Schrifted Serif
House
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789!@#§%^&*_+
BR Shape
Content
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789!@#§%^&*_+

Foreground

Foreground Primary
Foreground Secondary

Inverse

Foreground Inverse Primary
Foreground Inverse Secondary

Background

Background Primary
Background Secondary

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Colors
Black
Dark Grey
White
Warm Medium Beige
Warm Beige
Warm Leight Beige
Others
Fonts
Font-color-darkgrey
Font-color-warmlightbeige
Font-color-white
Font-uppercase
Font-align-center
Columns
Opacity
Opacity 50
Opacity 20
Opacity 10
Helping elements
Card Rounded 24
Card Rounded 16
Card Rounded 8
Card actionable
Margins
no-margin
margin-top-25
margin-top-80
margin-top-120
margin-top-200
margin-bottom-80
Paddings
no-padding
padding-top-bottom-0
padding-left-24
Flex Vertical
flex-vertical-8
flex-vertical-16
flex-vertical-24
flex-vertical-40
flex-vertical-56
flex-vertical-120
Flex Horizontal
flex-horizontal-8
flex-horizontal-16
flex-horizontal-24
Mobile
mobile-flex-vertical
Animations
Anim1
Anim2
Anim3
Anim4
Anim5
width-100
Flex vertical align center
Flex vertical align bottom
Flex horizontal top
Flex horizontal stretch
Flex horizontal spacebetween
Flex horizontal spacebetween
no-padding
overflow-hidden