Clone Now

Basic Styles

Typography

Headings

Styles are applied to both tags and classes. Heading levels should follow the correct hierarchy, but styles can be overridden with classes. For example, use h3 class to style a Heading 1 element if it is too large for the design.

Heading 1
h1

HTML H1

Heading h1

Text h1
Heading 2
h2

HTML H2

Heading h2

Text h2
Heading 3
h3

HTML H3

Heading h3

Text h3
Heading 4
h4

HTML H4

Heading h4

Text h4
Heading 5
h5
HTML H5
Heading h5
Text h5
Heading 6
h6
HTML H6
Heading h6
Text h6

Lorem ipsum dolor sit amet consectetur elit.

h7
.h7 is an arbitrary class invented to style small headings

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h8
.h8 is an arbitrary class invented to style small headings

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

eyebrow
Eyebrow

This is a H4 title for demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text

text-3xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique.

text-2xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique.

text-xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique.

text-lg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique. Duis cursus, mi quis viverra ornare.

text-base
font-size: same as Body
line-height: same as Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique. Duis cursus, mi quis viverra ornare.

text-sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique. Duis cursus, mi quis viverra ornare.

text-xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique. Duis cursus, mi quis viverra ornare.

text-2xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare. Consectetur adipiscing elit elementum tristique.

text-3xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare. Consectetur adipiscing elit elementum tristique.

Paragraph
font-size: not set
line-height: not set

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique. Duis cursus, mi quis viverra ornare.

Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros tristique. Duis cursus, mi quis viverra ornare.

Lists

Unordered Lists
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Ordered Lists
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
list-type="disc"
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
list
spaced list items
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
list-icon
/
list-icon="spark"
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
list-item_image-icon
use a combo class to change the background-image for the bullets
  • Lorem ipsum dolor sit amet
  • 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.
  • Lorem ipsum
Unordered Lists
list-none / list-h
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
list-custom
Unordered Lists
list-custom
  • Sed posuere consectetur est at lobortis.
  • Sed posuere consectetur est at lobortis.
  • Sed posuere consectetur est at lobortis.
Ordered Lists
list-custom
  1. Sed posuere consectetur est at lobortis.
  2. Sed posuere consectetur est at lobortis.
  3. Sed posuere consectetur est at lobortis.
list-custom
cc-p-0
Sed posuere consectetur est at lobortis.
Sed posuere consectetur est at lobortis.
Sed posuere consectetur est at lobortis.

Other Typography Elements

Other default typography elements with modified styles.

Block Quote
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.
Links
Text Link
Text in Link Block
Superscript
Subscript

Text Sup Text Sub H1

Text Sup Text Sub H2

Text Sup Text Sub H3

Text Sup Text Sub H4

Text Sup Text Sub H5
Text Sup Text Sub H6

Lorem ipsum TM dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementumwithout space. Duis cursus, mi quis viverrawithout space, eros dolor.

code-block
wrapped with block cc-full in the example as it needs a wrapper with width value
1<h3>Code Block Demo</h3>
2<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Aenean commodo ligula.</p>
3<p>Lorem ipsum eget dolor aenean massa.</p>
4<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
5<p>Lorem ipsum eget dolor massa.</p>

Presets

Colors

Colors under the "Colors" variable group. For simplicity, the Secondary and Accent colors do not have Light and Deep by default.

Primary
Light
Primary
Primary
Deep
Secondary
Accent
Text
Text Muted
Text Dim
Text Dimmer
Stroke
Stroke Subtle
Stroke Emphasis
Surface
Surface Muted
Surface Alt
Surface Alt Muted
Focus
Focus Subtle

Palettes

Use a generator to easily create color steps. Edit here or on the Variables panel. The base of a color is usually "500".

Primary
on light
on base
on deep
subtle
50
100
200
300
400
500
600
700
800
900
950
Secondary
on light
on base
on deep
subtle
50
100
200
300
400
500
600
700
800
900
950
Accent
on light
on base
on deep
subtle
50
100
200
300
400
500
600
700
800
900
950
Neutral
on light
on base
on deep
subtle
surface
surface-muted
surface-alt
surface-alt-muted
white (Palette)
black (Palette)
50
100
200
300
400
500
600
700
800
900
950

Gradients

You can setup gradient attributes in custom styles inside Global Code for time-saving and advanced gradients. Use background-image for property if you want the gradient to work on clipping text as well.

gradient
Background clipping
gradient="1"
Background clipping
gradient="1"
Background clipping
gradient="3"
Background clipping

Shadows

The shadow attributes are set up in the custom styles inside Global Code by using shadow generators or codes from tools like Figma.

shadow
xs
sm
/
lg
xl

Structure

Sections

Use the section class with its combo classes for all your sections to maintain consistency.

section

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.

section
cc-bg-surface

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.

section
cc-top-0

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.

section
cc-bottom-0

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.

section
cc-top-sm

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.

section
cc-bottom-sm

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.

section
cc-top-bottom-sm

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.

section
cc-top-lg

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.

section
cc-bottom-lg

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.

Containers

Sections usually need a container to keep layouts from becoming too wide. Containers also control the horizontal padding in order to maintain the same spacing throughout your project.

container

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.

container
cc-10c

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.

container
cc-8c

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.

container
cc-6c

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.

container
cc-full

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.

Wrappers

Heading and Paragraph elements are typically wrapped with title-wrapper or text-wrapper to access combo classes for styling.

title-wrapper
Heading inside a title-wrapper cc-xl
Heading inside a title-wrapper cc-lg
Heading inside a title-wrapper
Heading inside a title-wrapper cc-sm
Heading inside a title-wrapper cc-xs
Heading inside a title-wrapper cc-2xs
Heading inside a title-wrapper cc-0
title-wrapper
cc-align-center

This is a centered heading.

Another heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-wrapper
cc-max-40rem
cc-max-20rem

Some heading

This paragraph is wrapped by a text-wrapper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Some heading

This paragraph is wrapped by a text-wrapper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-wrapper
cc-align-center

This paragraph is wrapped by a text-wrapper and centered.

button-wrapper
cc-center

Action now!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Join the club
Learn more
image-wrapper
image cc-1x1 / cc-4x3 / cc16x9
image
image
image
image-wrapper
image cc-contain
image
absolute-full-wrapper
absolute-cover-image
futuristic pattern

Spacer

Spacers are useful when you need some extra space in a layout quickly.

Spacer
input height values in properties for different breakpoints

Utilities

u- prefix to separate them from base styles. They can work on their own, but usually you use them to modify a base element, like a title-wrapper.

Text Colors Utilities

u-text-base
Lorem ipsum dolor sit amet.
u-text-mu
Lorem ipsum dolor sit amet.
u-text-primary
Lorem ipsum dolor sit amet.
u-text-stroke
Lorem ipsum dolor sit amet.

Font Utilities

Font utilities change the font and weight of an element.

u-font-regular

Lorem ipsum dolor sit amet.

u-font-bold

Lorem ipsum dolor sit amet.

u-font-italic

Lorem ipsum dolor sit amet.

Alignment Utilities

Use to align text in layouts, or individual text elements.

u-text-left

Lorem ipsum dolor sit amet.

u-text-center

Lorem ipsum dolor sit amet.

u-text-right

Lorem ipsum dolor sit amet.

Other Text Utilities

Other utilities for quick text styling.

u-text-underline
Lorem ipsum dolor sit amet.
u-text-strike
Lorem ipsum dolor sit amet.
u-text-no-deco
This is a link dolor sit amet.
u-text-nowrap
Lorem ipsum
truncate
wrapped with block cc-full in the example as it needs a wrapper with width value
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.
line-clamp
line-clamp="3"
more about truncating
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.

Background Utilities

u-bg-base
background and text styles are applied
Lorem ipsum dolor sit amet.
This is some text inside of a div block.
u-bg-primary
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in eros elementum tristique.

Lorem ipsum
This is some text inside of a div block.

Mode Utilities

u-light-mode
"Light mode (Base mode)" styles will be applied.
Applying Light mode (Base mode)
This is some text inside of a div block.
u-dark-mode
"Dark mode" styles will be applied.
Applying Dark mode
This is some text inside of a div block.

Flex Utilities

Timothy Ricks developed an incredible presentation of flex properties on Lumos – a huge shout out for that. We simplified the structure a bit and made a few small modifications.

Horizontal Flex Utilities

u-hflex-left-top
u-hflex-left-center
u-hflex-left-bottom
u-hflex-left-stretch
u-hflex-center-top
u-hflex-center-center
u-hflex-center-bottom
u-hflex-center-stretch
u-hflex-right-top
u-hflex-right-center
u-hflex-right-bottom
u-hflex-right-stretch
u-hflex-between-top
u-hflex-between-center
u-hflex-between-bottom
u-hflex-between-stretch

Vertical Flex Utilities

u-vflex-left-top
u-vflex-left-center
u-vflex-left-bottom
u-vflex-left-between
u-vflex-center-top
u-vflex-center-center
u-vflex-center-bottom
u-vflex-center-between
u-vflex-right-top
u-vflex-right-center
u-vflex-right-bottom
u-vflex-right-between
u-vflex-stretch-top
u-vflex-stretch-center
u-vflex-stretch-bottom
u-vflex-stretch-between

Other Flex Utilities

u-hflex-wrap
u-vflex-wrap
u-flex-shrink
u-flex-grow
u-flex-noshrink

Miscellaneous Utilities

Some other useful utilities.

u-hide
u-hide_md
u-hide_sm
u-hide_xs
u-align-center

Rich Text Element

richtext
default class to style rich text
richtext
cc-richtext-lg
Adding combo class to rich text elements can be tricky. You have to create and add styles to a combo class first.
richtext-list
tippy.js is used for the tooltips function

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vain eros elementum tristique. Duis cursus, mi quis viverra ornare.

Bold style, italic style and bold italic style.

Link inside rich text element. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Styling lists:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Blockquote: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristiqulla.
This is a H5 heading with sup and sub for demo.

Lorem ipsumTM dolor sit amet, consectetursup text adipiscing elit, sed do eiusmodsub text incididunt et agna aliqua. E=MC2 🚀

Adding a code tag for demo purpose.

Testing long context with the code tag:Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros, ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

futuristic tunnel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

futuristic tunnel
This is a short caption.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

futuristic tunnel
futuristic tunnel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

futuristic tunnel
This is a caption.
futuristic tunnel
This is a long caption after an image with caption. Lorem ipsum dolor sit amet, consectetur adipiscingelit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

futuristic tunnel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

futuristic tunnel

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

futuristic tunnel
Align to right and also have a caption.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1<h3>Code Block within Rich Text Element Demo</h3>
2<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.</p>
3<ul>
4  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
5  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
6  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
7</ul>
8<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1<h3>Code Block within Rich Text Element Demo</h3>
2<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.</p>
3<ul>
4  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
5  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
6  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
7</ul>
8<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vain eros elementum tristique. Duis cursus, mi quis viverra ornare.

Bold style, italic style and bold italic style.

Link inside rich text element. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Styling lists:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Blockquote: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristiqulla.
This is a H5 heading with sup and sub for demo.

Lorem ipsumTM dolor sit amet, consectetursup text adipiscing elit, sed do eiusmodsub text incididunt et agna aliqua. E=MC2 🚀

Adding a code tag for demo purpose.

Testing long context with the code tag:Excepteur sint occaecat cupidatat non proident. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros, ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

futuristic tunnel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

futuristic tunnel
This is a short caption.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

futuristic tunnel
futuristic tunnel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

futuristic tunnel
This is a caption.
futuristic tunnel
This is a long caption after an image with caption. Lorem ipsum dolor sit amet, consectetur adipiscingelit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

futuristic tunnel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

futuristic tunnel

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

futuristic tunnel
Align to right and also have a caption.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1<h3>Code Block within Rich Text Element Demo</h3>
2<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.</p>
3<ul>
4  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
5  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
6  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
7</ul>
8<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1<h3>Code Block within Rich Text Element Demo</h3>
2<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.</p>
3<ul>
4  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
5  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
6  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
7</ul>
8<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

List of features

List of features

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt sagittis eros. Quisque quis euismod lorem. Etiam sodales ac felis id interdum.

Lorem ipsum dolor sit
  • Tippy Tooltips example: consectetur adipiscing elit. Suspendisse tincidunt sagittis eros. ?
  • Lorem ipsum dolor sit amet ?‍
  • Lorem ipsum dolor

Lorem ipsum dolor sit amet, suspendisse tincidunt sagittis eros. Quisque quis euismod lorem.

Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse tincidunt sagittis erosorem
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor
Lorem ipsum
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt sagittis eros.

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor
    1. Lorem ipsum
    2. Lorem ipsum dolor
  3. Lorem ipsum dolor
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor
  4. Lorem ipsum

Lorem ipsum quisque quis euismod lorem.