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

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
Headings classes - Product page

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
n-heading1

Heading 1

H2
n-heading2

Heading 2

H3
n-heading3

Heading 3

H4
n-heading4

Heading 4

H5
n-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.

parag-xl

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.

parag-l

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.

parag-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.

All Links
Text Link
All Links

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

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 : n-text-xlarge

Text Large : n-text-large

Text Medium : n-text-medium

Text Regular : n-text-regular

Text All CAps : n-text-all-caps

Text Small : n-text-small

Text Tiny : n-text-tiny

Text Italic : n-text-italic

Text Meta Small : n-text-meta-small

Text Meta : n-text-meta

Text Meta Large : n-text-meta-large

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.