Containers

Check the style guide from the Figma design and take the values of however many variations of container sizes that exist.
Small Container
small medium container
Medium Container
Large Container

Spacers

Spacers are used within block containers, or if desired, vertical oriented flex boxes. Spacers are used to add a set amount of vertical space between elements
spacer tiny
spacer xxsmall
spacer xsmall
spacer small
spacer small-medium
spacer medium
spacer large
spacer xlarge
spacer xxlarge

Headings

Below you can customize your headings based on what heading sizes and line heights are in the Figma style guide. Be sure you are not adding class names to the below elements as you customize them.

How to use the clamp tool:
Below you can customize your headings based on what heading sizes and line heights are in the Figma style guide. Be sure you are not adding class names to the below elements as you customize them.

How to use the clamp tool:
‍


Click this link to generate the values for the clamp tool, then add the values to the code snippet below.
all h1 headings

Heading 1

all h2 headings

Heading 2

all h2 headings

Heading 2

all h3 headings

Heading 3

all h4 headings

Heading 4

all h5 headings
Heading 5
all h6 headings
Heading 6

Max Widths

These are helpful when you have repeating text elements on various pages that have max widths given to them in Figma. For example. this paragraph block has a maxwidth_large applied to it in order to keep it from spanning the entire screen. On some projects, max widths are always centered, on others they are always left justified. Remove the 'centered' sub class if you wish and customize these to match whatever Figma design you are working with!
maxwidth_tiny
maxwidth_small
maxwidth_small-medium
maxwidth_medium
maxwidth_large
maxwidth_xlarge
maxwidth_xxlarge

Buttons

Primary Button
Button
Secondary Btn
Button
inline button button
Button
inline button button inverted
Button
Phone inline button
 (123) 456-7890
phone inline button inverted
 (123) 456-7890
calendar inline button
 Schedule Demo
calendar inline button inverted
 Schedule Demo

Rich Text

rich text

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