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
color-black
color-grey-2
color-grey-1
color-white
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.

Heading XL
heading-xlarge

Heading XLarge

Heading L
heading-large

Heading Large

Heading M
heading-medium

Heading Medium

Heading S
heading-small

Heading Small

H1
heading1

Heading 1

H2
heading2

Heading 2

H3
heading3

Heading 3

H4
heading4

Heading 4

H5
heading5
Heading 5
H6
heading6
Heading 6
Other HTML Elements

Different sizes of paragraphs and text styling are available.

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.

All Links
Text Link
Cards

Different cards

card
/
card-padding

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.

card
cc-color-muted
/
card-padding

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.

card
cc-color-black
/
card-padding

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.

card
/
card-padding
cc-small

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.

card
/
card-padding
cc-large

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.

card
/
card-padding
cc-x-large

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 classes

Styling for common inline elements.

Text Xlarge

Text Large

Text Medium

Text Regular

Text All CAps

Text Small

Text Tiny

Text Italic

Text Meta Small

Text Meta

Text Meta Large

Text Link
icons

Styling for common inline elements.

Text alignments

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

text-align-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-align-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-align-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit.