HTML HeadingsOther HTML ElementsHeading ClassesBUttonsBUtton TextLabelBadgeCardsCard SizesNavSubnavListIcon SizesText classesText AlignmentsText ColorSBackgroundsRich TextFormHidden Classes

Style Guide

HTML Headings

Heading H1

Desktop: 160px / 10 rem

(768px-1440px)

Tablet: 128px / 8 rem)

(480px-768px)

mobile: 96px / 6 rem)

(Max width 480)

Heading H2

Desktop (768px-1440px): 56px / 3.5 rem

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Heading H3

Desktop (768px-1440px): 32px / 2 rem

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Heading H4

Desktop (768px-1440px): 24px / 1.5 rem

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Heading H5

Desktop (768px-1440px): 22px / 1.375 rem

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Heading H6

Desktop (768px-1440px): 18px / 1.125 rem

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Paragraph Classes

Paragraph XL (28px - 1.75 rem)

Desktop: 28px / 1.75 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Paragraph Large

Desktop: 24px / 1.5 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Paragraph

Desktop: 18px / 1.125 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Paragraph Small

Desktop: 16px / 1 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Used in Project

Large Links

Desktop: 24px / 1.5 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Small Links

Desktop: 18px / 1.125 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Call Out

Desktop: 32px / 2 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Text Large (20px - 1.25 rem)

Desktop: 20px / 1.25 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Text Huge (32px - 2 rem)

Desktop: 32px / 2 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Animation

Text classes

Text Huge (32px - 2 rem)

Desktop: 32px / 2 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Text XXlarge (28px - 1.75 rem)

Desktop: 32px / 2 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Text Xlarge (24px - 1.5 rem)

Desktop: 32px / 2 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Text Large (20px - 1.25 rem)

Desktop: 20px / 1.25 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Text Medium (18px - 1.125 rem)

Desktop: 32px / 2 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Text Regular (16px - 1 rem)

Desktop: 32px / 2 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Text Small (14px - 0.875 rem)

Desktop: 32px / 2 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

Text Tiny (12px - 0.75)

Text Italic

Text Meta Small

Text Meta

Text Meta Large

Text Link

Font Weight Light

Font Weight Normal

Font Weight Medium

Font Weight Bold

Heading Classes

Heading XLarge
Heading Large
Heading Medium
Heading Small
Heading H1
Heading H2
Heading H3
Heading H4
Heading H5
Heading H6

Button Text

Badge

Default
Link
Muted
Link
Primary
Link
Secondary
Link

Cards

Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Muted
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Secondary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.

Card Sizes

Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectu.
XLarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor.

List

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

Icon Sizes

Other HTML Elements

All Paragraphs
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Desktop: 32px / 2 rem)

Tablet: 32px / 2 rem)

Mobile: 32px / 2 rem)

All Links
Quote - Sample text is being used as a placeholder for real text that is normally present.

Text Alignments

text-align-left
text-align-center
text-align-right

Text Colors

Text Color Default
Text Color Muted
Text Color Primary

Backgrounds



‍


‍


‍

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

  • The rich text element allows you to create and format headings,
  • The rich text element allows you to create and format headings,
  • The rich text element allows you to create and format headings,

This is a link

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Placeholder
This is a placeholder image.

Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Hidden Classes

Check the Navigator to see the hidden section below. This section contains utility classes like padding, margin and container.