Style& elements
H1 Heading
Heading Hero
H2 Heading
Heading Section Display
H3 Heading
H4 Heading
H5 Heading
H6 Heading
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.
- This is a List Item
- This is a List Item
- This is a List Item
- This is a List Item
- This is a List Item
- This is a List Item
This is a Block Quote
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
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.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.
This is a H4 heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.
This is a H5 heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.
This is a H5 heading
- This is a List Item
- This is a List Item
- This is a List Item
- This is a List Item
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.
This is a H6 heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
SOMETHING NICE WE LOVE
Born in Napoli, la pizza Napoletana is one of the most famous types of Italian pizza.
Select different (decorative) graphics
for your own featured cards.
Pizza Napoletana
special
Born in Napoli, la pizza Napoletana is one of the most famous types of Italian pizza.
SOMETHING ELSE WE LOVE
Pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo fringilla vel.
CLASSIC TIRAMISU
Style Guide
Pro-tips: Paste this content into a dedicated page named “Style guide”. Convert each color style below to global swatches so they can be used in text, borders, backgrounds, and gradients. To do this, select a color style element, navigate to the Background Color section in the Style panel, edit the color, and add it as a global swatch.
Color styles
Theme/Brand/Primary/Surface - #80A188
DarkOverlay - #333333
Theme/Background/00 - #FFFFFF
Theme/Background/01 - #F4F6F5
Theme/Background/02 - #E5EBE6
Theme/Background/03 - #111713
Theme/Greys/Main/Text-Primary - #171C19
Theme/Greys/Main/Text-Secondary - #465349
Theme/Greys/Main/Surface - #F9FAF9
Theme/Greys/Main/Surface-Hover - #F4F6F5
Theme/Greys/Main/Surface-Pressed - #ECEFEC
Theme/Greys/Main/Border - #C8D0CA
Theme/Greys/Main/Border-Focus - #ACB9B0
Theme/Greys/Secondary/Text-Primary - #201D13
Theme/Greys/Secondary/Text-Secondary - #6F6644
Theme/Greys/Secondary/Surface - #E9E7DF
Theme/Greys/Secondary/Surface-Light - #F5F4F0
Theme/Greys/Secondary/Surface-Hover - #D5D0BC
Theme/Greys/Secondary/Surface-Pressed - #C0B898
Theme/Greys/Secondary/Border - #E9E7DF
Theme/Greys/Secondary/Border-Focus - #D5D0BC
Theme/Greys/Invert/Text-Primary - #F9F9FB
Theme/Greys/Invert/Text-Secondary - #A1A6B9
Theme/Greys/Invert/Surface - #1A1C23
Theme/Greys/Invert/Surface-Hover - #21232C
Theme/Greys/Invert/Surface-Pressed - #272A35
Theme/Greys/Invert/Border - #363A49
Theme/Greys/Invert/Border-Focus - #4C5167
Theme/Brand/Primary/Text - #3D674C
Theme/Brand/Primary/Text-Invert - #FCFFFD
Theme/Brand/Primary/Surface-Hover - #63806F
Theme/Brand/Primary/Surface-Pressed - #3D674C
Theme/Brand/Primary/Border - #B8CABA
Theme/Brand/Primary/Border-Alpha - #80A188
Theme/Brand/Primary-Light/Text-Invert - #FCFFFD
Theme/Brand/Primary-Light/Surface - #C4D4C8
Theme/Brand/Primary-Light/Surface-Hover - #B7C8BC
Theme/Brand/Primary-Light/Surface-Pressed - #A8BDAE
Theme/Brand/Primary-Light/Border - #E2E9E4
Theme/Brand/Primary-Light/Text - #63806F
Theme/Brand/Accent/Text - #BC6A52
Theme/Brand/Accent/Text-Invert - #FBF6F4
Theme/Brand/Accent/Surface - #DF8368
Theme/Brand/Accent/Surface-Hover - #D38062
Theme/Brand/Accent/Surface-Pressed - #BC6A52
Theme/Brand/Accent/Background - #F0B295
Theme/Brand/Accent/Border - #DF8368
Theme/Brand/Accent-light/Text - #DF8368
Theme/Brand/Accent-light/Text-Invert - #FBF6F4
Theme/Brand/Accent-light/Surface - #F6D7CD
Theme/Brand/Accent-light/Surface-Hover - #E3AE9B
Theme/Brand/Accent-light/Surface-Pressed - #D4A091
Theme/Brand/Accent-light/Background - #FCEFE9
Theme/Brand/Accent-light/Border - #EDBAAB
Theme/Semantic/Info/Text - #80A5B5
Theme/Semantic/Info/Text-Invert - #0C4C6A
Theme/Semantic/Info/Surface - #80A5B5
Theme/Semantic/Info/Surface-Hover - #638594
Theme/Semantic/Info/Surface-Pressed - #41707F
Theme/Semantic/Info/Surface-Alpha - #80A5B5
Theme/Semantic/Success/Text - #84C03F
Theme/Semantic/Success/Text-Invert - #3D581D
Theme/Semantic/Success/Surface - #B5D98C
Theme/Semantic/Success/Surface-Hover - #A4D071
Theme/Semantic/Success/Surface-Pressed - #93C756
Theme/Semantic/Success/Border - #4C7529
Theme/Semantic/Warning/Surface - #E8A626
Theme/Semantic/Warning/Surface-Hover - #D6993C
Theme/Semantic/Warning/Surface-Pressed - #C1832A
Theme/Semantic/Warning/Text - #D6993C
Theme/Semantic/Warning/Text-Invert - #754600
Theme/Semantic/Warning/Border - #9E5000
Theme/Semantic/Warning/background-alpha - #FFC266
Theme/Semantic/Danger/Surface - #F1B1B1
Theme/Semantic/Danger/Surface-Hover - #F1B1B1 / #FFFFFF
Theme/Semantic/Danger/Surface-Pressed - #F1B1B1 / #000000
Theme/Semantic/Danger/Text - #DE4444
Theme/Semantic/Danger/Text-Invert - #6D1313
Theme/Semantic/Error/Text - #FF0F00
Theme/Semantic/Error/Text-Invert - #750008
Theme/Semantic/Error/Surface - #F77A6E
Theme/Semantic/Error/Surface-Hover - #F65B4C
Theme/Semantic/Error/Surface-Pressed - #F43C2A
Theme/Semantic/Error/Border - #93000A
Dark/Background/00 - #0B0A0A
Dark/Background/01 - #171515
Dark/Background/02 - #212020
Dark/Background/03 - #F4F3F3
Dark/Greys/Main/Text-Primary - #F4F3F3
Dark/Greys/Main/Text-Secondary - #F4F3F3
Dark/Greys/Main/Surface - #F4F3F3
Dark/Greys/Main/Surface-Hover - #F4F3F3
Dark/Greys/Main/Surface-Pressed - #F4F3F3
Dark/Greys/Main/Border - #F4F3F3
Dark/Greys/Main/Border-Focus - #F4F3F3
Dark/Greys/Invert/Text-Primary - #0B0A0A
Dark/Greys/Invert/Text-Secondary - #0B0A0A
Dark/Greys/Invert/Surface - #0B0A0A
Dark/Greys/Invert/Surface-Hover - #0B0A0A
Dark/Greys/Invert/Surface-Pressed - #0B0A0A
Dark/Greys/Invert/Border - #0B0A0A
Dark/Greys/Invert/Border-Focus - #0B0A0A
Dark/Brand/Primary/Text - #5763E8
Dark/Brand/Primary/Text-Invert - #FDFCFF
Dark/Brand/Primary/Surface - #3F51B5
Dark/Brand/Primary/Surface-Hover - #324090
Dark/Brand/Primary/Surface-Pressed - #252F6A
Dark/Brand/Primary/Border - #252F6A
Dark/Brand/Primary/Border-Alpha - #3F51B5
Dark/Brand/Primary-Light/Text - #5763E8
Dark/Brand/Primary-Light/Text-Invert - #F6F4FB
Dark/Brand/Primary-Light/Surface - #3F51B5
Dark/Brand/Primary-Light/Surface-Hover - #3F51B5
Dark/Brand/Primary-Light/Surface-Pressed - #3F51B5
Dark/Brand/Primary-Light/Border - #3F51B5
Dark/Brand/Accent/Text - #7E57C2
Dark/Brand/Accent/Text-Invert - #F6F4FB
Dark/Brand/Accent/Surface - #7E57C2
Dark/Brand/Accent/Surface-Hover - #643DA8
Dark/Brand/Accent/Surface-Pressed - #4E3083
Dark/Brand/Accent/Border - #3E2669
Dark/Semantic/Warning/Text - #FF9900
Dark/Semantic/Warning/Text-Invert - #754600
Dark/Semantic/Warning/Surface - #FFC266
Dark/Semantic/Warning/Surface-Hover - #FFB342
Dark/Semantic/Warning/Surface-Pressed - #FFA51F
Dark/Semantic/Warning/Border - #9E5000
Dark/Semantic/Success/Text - #84C03F
Dark/Semantic/Success/Text-Invert - #3D581D
Dark/Semantic/Success/Surface - #B5D98C
Dark/Semantic/Success/Surface-Hover - #A4D071
Dark/Semantic/Success/Surface-Pressed - #93C756
Dark/Semantic/Success/Border - #4C7529
Dark/Semantic/Error/Text - #FF0F00
Dark/Semantic/Error/Text-Invert - #750008
Dark/Semantic/Error/Surface - #F77A6E
Dark/Semantic/Error/Surface-Hover - #F65B4C
Dark/Semantic/Error/Surface-Pressed - #F43C2A
Dark/Semantic/Error/Border - #93000A
Dark/Semantic/Info/Text - #1AA6E5
Dark/Semantic/Info/Text-Invert - #0C4C6A
Dark/Semantic/Info/Surface - #75CAF0
Dark/Semantic/Info/Surface-Hover - #55BDEC
Dark/Semantic/Info/Surface-Pressed - #35B1E8
Dark/Semantic/Info/Surface-Alpha - #75CAF0
Avatars/Unsplash/With Background/1 - Image Background
Avatars/Unsplash/With Background/2 - Image Background
Avatars/Unsplash/With Background/3 - Image Background
Avatars/Unsplash/With Background/4 - Image Background
Avatars/Unsplash/With Background/5 - Image Background
Avatars/Unsplash/With Background/6 - Image Background
Avatars/Unsplash/With Background/7 - Image Background
Avatars/Unsplash/With Background/8 - Image Background
Avatars/Unsplash/With Background/9 - Image Background
Avatars/Unsplash/With Background/10 - Image Background
Avatars/Unsplash/With Background/11 - Image Background
Avatars/Unsplash/With Background/12 - Image Background
Avatars/Unsplash/With Background/13 - Image Background
Avatars/Unsplash/With Background/14 - Image Background
Avatars/Unsplash/With Background/15 - Image Background
Avatars/Unsplash/With Background/16 - Image Background
Avatars/Unsplash/With Background/17 - Image Background
Avatars/Unsplash/With Background/18 - Image Background
Avatars/Unsplash/With Background/19 - Image Background
Avatars/Unsplash/With Background/20 - Image Background
Avatars/Unsplash/Without Background/1 - Image Background
Avatars/Unsplash/Without Background/2 - Image Background
Avatars/Unsplash/Without Background/3 - Image Background
Avatars/Unsplash/Without Background/4 - Image Background
Avatars/Unsplash/Without Background/5 - Image Background
Avatars/Unsplash/Without Background/6 - Image Background
Avatars/Unsplash/Without Background/7 - Image Background
Avatars/Unsplash/Without Background/8 - Image Background
Avatars/Unsplash/Without Background/9 - Image Background
Avatars/Unsplash/Without Background/10 - Image Background
Avatars/Unsplash/Without Background/11 - Image Background
Avatars/Unsplash/Without Background/12 - Image Background
Avatars/Unsplash/Without Background/13 - Image Background
Avatars/Unsplash/Without Background/14 - Image Background
Avatars/Unsplash/Without Background/15 - Image Background
Avatars/Unsplash/Without Background/16 - Image Background
Avatars/Unsplash/Without Background/17 - Image Background
Avatars/Unsplash/Without Background/18 - Image Background
Avatars/Unsplash/Without Background/19 - Image Background
Avatars/Unsplash/Without Background/20 - Image Background
Avatars/3D Without Background/1 - Image Background
Avatars/3D Without Background/2 - Image Background
Avatars/3D Without Background/3 - Image Background
Avatars/3D Without Background/4 - Image Background
Avatars/3D Without Background/5 - Image Background
Avatars/3D Without Background/6 - Image Background
Avatars/3D Without Background/7 - Image Background
Avatars/3D Without Background/8 - Image Background
Avatars/3D Without Background/9 - Image Background
Avatars/3D Without Background/10 - Image Background