Colors

The primary colors and shades of gray on the website are managed through the Global Swatch feature.

Primary 1
Primary 2
Primary 3
Primary 4
Black
White
Buttons

A variety of button styles are available throughout the website.

button-primary-1
button-primary-1
HTML Headings

Styles for HTML heading tags (H1-H6).

H1
All H1 Headings

Lorem ipsum dolor sit amet

H2
All H1 Headings

Lorem ipsum dolor sit amet

H3
All H1 Headings

Lorem ipsum dolor sit amet

H4
All H1 Headings

Lorem ipsum dolor sit amet

H5
All H1 Headings
Lorem ipsum dolor sit amet
H6
All H1 Headings
Lorem ipsum dolor sit amet
Headings classes

Heading classes are created to match the design style and apply them to different heading tags. This ensures that the style of heading tags that look good in design matches the recommended heading tags for SEO. For example, for page heading you use H1 tag but you want styling(Font size etc.) of H2. By using a "Heading H2" class in H1 tag will give the style of an H2 heading while still keeping the H1 tag for SEO purposes. This way, both visually appealing design and good SEO practices can be achieved.

H1
text-h1
This is some text inside of a div block.
H2
text-h2
This is some text inside of a div block
H3
text-h3
This is some text inside of a div block
H4
text-h4
This is some text inside of a div block
H5
text-h5
This is some text inside of a div block
H6
text-h6
This is some text inside of a div block
Paragraphs

Different sizes of paragraphs and text styling are available.

P
All Paragraphs

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.

P
text

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.

P
text-s

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.

P
text-xs

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.

Inline text elements

Styling for common inline elements.

P
text-mark

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

P
text-delete

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

P
text-underline

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

P
text-bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

P
text-italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text + icon

Styling for common inline elements.

P
text-mark
This is some text inside of a div block.
P
text-delete

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

P
text-underline

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

P
text-bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

P
text-italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text alignments

Styling for commText alignment styles are available to realign text to components.on inline elements.

text-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

hierarchie taille textes

Styling for commText alignment styles are available to realign text to components.on inline elements.

text
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.
text-s
This is some text inside of a div block.
text-xs
This is some text inside of a div block.