menu_open
Open Menu

LiftKit

The universal design system for clean, modern UI's

More than just a box of prefab components

LiftKit lays the groundwork for a strong design foundation. You won't find hundreds of random components here. Instead, LiftKit merely lets you skip the boring stuff, empowering you to build your way.

A comprehensive design system for building clean, modern interfaces

Chainlift's utility classes guarantee everything—every width, every font size, and every border radius—is scaled in perfect proportion to everything else. You'll have to really go out of your way to make it look bad.

Easier to learn, use, and customize than anything you've tried before

Utility classes have never been this easy. And with Chainlift Color, you can easily swap your entire color scheme in a matter of seconds, making it the perfect solution for agencies or high-volume freelancers

Utility Classes

Elements

menu_open
Close Menu
Color

Simplified Palette

Best for marketers

Brand

Your official brand colors
expand_more
Key Colors
Main swatches
Containers
Soft variants of key colors
Primary
Your main brand color

bg-light__primary

bg-light__primaryContainer

Secondary
Desaturated primary

bg-light__secondary

bg-light__secondaryContainer

Tertiary
Your accent color

bg-light__tertiary

bg-light__tertiaryContainer

Semantic

Colors for alerts, warnings, notifications, and success messages
expand_more
Key Colors
Main swatches
Containers
Soft variants of key colors
Error
High severity

bg-light__error

bg-light__errorContainer

Warning
Mid severity

bg-light__warning

bg-light__warningContainer

Success
Good news

bg-light__success

bg-light__successContainer

Info
Neutral notifications

bg-light__info

bg-light__infoContainer

Surfaces

Backgrounds, cards, and neutral containers
expand_more
Key Colors
Main swatches
"On" Colors
Color of text and icons that are literally "on" the key color
Background
High severity

bg-light__background

bg-light__onBackground

Surface
Mid severity

bg-light__surface

bg-light__onSurface

Surface Container
Neutral notifications

bg-light__surfaceContainer

bg-light__onSurface

Surface Variant
Good news

bg-light__surfaceVariant

bg-light__onSurfaceVariant

Outlines

For borders and dividers
expand_more
Outline
Use for borders on containers

bg-light__outline

Outline Variant
Use for lines, dividers, and low-emphasis outlines

bg-light__outlineVariant

Full Palette

Best for product designers (and masochists)

Light Mode

Brand

Your official brand colors
expand_more
Default
Changes between light and dark modes
Fixed
Same across light and dark modes
Primary
Your main brand color

bg-light__primary

bg-light__onPrimary

bg-light__primaryContainer

bg-light__onPrimaryContainer

bg-light__primaryFixed

bg-light__primaryFixedDim

bg-light__onPrimaryFixed

bg-light__onPrimaryFixedVariant

Secondary
Desaturated primary

bg-light__secondary

bg-light__onSecondary

bg-light__secondaryContainer

bg-light__onSecondaryContainer

bg-light__secondaryFixed

bg-light__secondaryFixedDim

bg-light__onSecondaryFixed

bg-light__onSecondaryFixedVariant

Tertiary
Your accent color

bg-light__tertiary

bg-light__onTertiary

bg-light__tertiaryContainer

bg-light__onTertiaryContainer

bg-light__tertiaryFixed

bg-light__tertiaryFixedDim

bg-light__onTertiaryFixed

bg-light__onTertiaryFixedVariant

Semantic

Colors for alerts, warnings, notifications, and success messages
expand_more
Default
Changes between light and dark modes
Error
High severity

bg-light__error

bg-light__onError

bg-light__errorContainer

bg-light__onErrorContainer

Warning
Mid severity

bg-light__warning

bg-light__onWarning

bg-light__warningContainer

bg-light__onWarningContainer

Success
Good news

bg-light__success

bg-light__onSuccess

bg-light__successContainer

bg-light__onSuccessContainer

Info
Neutral notifications

bg-light__info

bg-light__onInfo

bg-light__infoContainer

bg-light__onInfoContainer

Surfaces

Backgrounds, cards, and neutral containers
expand_more
Key Colors
Main swatches
"On" Colors
For text, icons literally "on" the key color
Background
High severity

bg-light__background

bg-light__onBackground

Surface
Mid severity

bg-light__surface

bg-light__onSurface

Surface Variant
Good news

bg-light__surfaceVariant

bg-light__onSurfaceVariant

Surface Dim
Good news

bg-light__surfaceDim

Surface Bright
Good news

bg-light__surfaceBright

Surface Containers

Ideal for nested containers
expand_more
Key Colors
Main swatches
Surface Container Lowest
Lowest emphasis

bg-light__surfaceContainerLowest

Surface Container Low
Low emphasis

bg-light__surfaceContainerLow

Surface Container
Medium emphasis

bg-light__surfaceContainer

Surface Container High
High emphasis

bg-light__surfaceContainerHigh

Surface Container Highest
Highest emphasis

bg-light__surfaceContainerHighest

Inverse Surfaces

For toast messages, mostly
expand_more
Key Colors
Main swatches
Inverse Surface
The opposite color mode's "surface" value

bg-light__inverseSurface

Inverse On Surface
Text, icons on Inverse Surface

bg-light__inverseOnSurface

Inverse Primary
For clickable elements against Inverse Surface

bg-light__inversePrimary

Miscellaneous

Outlines, shadow, and scrim
expand_more
Outline
Use for borders on containers

bg-light__outline

Outline Variant
Use for lines, dividers, and low-emphasis outlines

bg-light__outlineVariant

Shadow
Self-explanatory

bg-light__shadow

Scrim
The transparent background used when you "dim the lights"

bg-light__scrim

Dark Mode

Brand

Your official brand colors
expand_more
Default
Changes between light and dark modes
Fixed
Same across light and dark modes
Primary
Your main brand color

bg-dark__primary

bg-dark__onPrimary

bg-dark__primaryContainer

bg-dark__onPrimaryContainer

bg-dark__primaryFixed

bg-dark__primaryFixedDim

bg-dark__onPrimaryFixed

bg-dark__onPrimaryFixedVariant

Secondary
Desaturated primary

bg-dark__secondary

bg-dark__onSecondary

bg-dark__secondaryContainer

bg-dark__onSecondaryContainer

bg-dark__secondaryFixed

bg-dark__secondaryFixedDim

bg-dark__onSecondaryFixed

bg-dark__onSecondaryFixedVariant

Tertiary
Your accent color

bg-dark__tertiary

bg-dark__onTertiary

bg-dark__tertiaryContainer

bg-dark__onTertiaryContainer

bg-dark__tertiaryFixed

bg-dark__tertiaryFixedDim

bg-dark__onTertiaryFixed

bg-dark__onTertiaryFixedVariant

Semantic

Colors for alerts, warnings, notifications, and success messages
expand_more
Default
Changes between light and dark modes
Error
High severity

bg-dark__error

bg-dark__onError

bg-dark__errorContainer

bg-dark__onErrorContainer

Warning
Mid severity

bg-dark__warning

bg-dark__onWarning

bg-dark__warningContainer

bg-dark__onWarningContainer

Success
Good news

bg-dark__success

bg-dark__successContainer

bg-dark__onSuccess

bg-dark__onSuccessContainer

Info
Neutral notifications

bg-dark__info

bg-dark__onInfo

bg-dark__infoContainer

bg-dark__onInfoContainer

Surfaces

Backgrounds, cards, and neutral containers
expand_more
Key Colors
Main swatches
"On" Colors
For text, icons literally "on" the key color
Background
High severity

bg-dark__background

bg-dark__onBackground

Surface
Mid severity

bg-dark__surface

bg-dark__onSurface

Surface Variant
Good news

bg-dark__surfaceVariant

bg-dark__onSurfaceVariant

Surface Dim
Good news

bg-dark__surfaceDim

Surface Bright
Good news

bg-dark__surfaceBright

Surface Containers

Ideal for nested containers
expand_more
Key Colors
Main swatches
Surface Container Lowest
Lowest emphasis

bg-dark__surfaceContainerLowest

Surface Container Low
Low emphasis

bg-dark__surfaceContainerLow

Surface Container
Medium emphasis

bg-dark__surfaceContainer

Surface Container High
High emphasis

bg-dark__surfaceContainerHigh

Surface Container Highest
Highest emphasis

bg-dark__surfaceContainerHighest

Inverse Surfaces

For toast messages, mostly
expand_more
Key Colors
Main swatches
Inverse Surface
The opposite color mode's "surface" value

bg-dark__inverseSurface

Inverse On Surface
Text, icons on Inverse Surface

bg-dark__inverseOnSurface

Inverse Primary
For clickable elements against Inverse Surface

bg-dark__inversePrimary

Miscellaneous

Outlines, shadow, and scrim
expand_more
Outline
Use for borders on containers

bg-dark__outline

Outline Variant
Use for lines, dividers, and low-emphasis outlines

bg-dark__outlineVariant

Shadow
Self-explanatory

bg-dark__shadow

Scrim
The transparent background used when you "dim the lights"

bg-dark__scrim

Text Color

Text color requires less variation for most use cases, so the only ones pre-bundled with LiftKit are the following. Feel free to use the provided class naming template to create your own.

Primary
Secondary
Info
Success
Warning
Error
Outline
On Surface Variant
Inverse Primary
Inverse On Surface
Typography

Standard Styles

The standard styles use light-to-medium weights (except for Heading) and give interfaces a light, airy feel.

Display 1
Display 2
Title A
Title B
Title C
Heading
Subheading
Body
Callout
Label
Caption
Overline
StyleWeightSize (em)Line HeightLetter Spacing (em)
Display 14004.2351.129-0.022
Display 24002.6181.272-0.022
Title A4002.0581.272-0.022
Title B4001.6181.272-0.02
Title C4001.2721.272-0.017
Heading6001.1291.272-0.014
Subheading4000.8851.272-0.007
Body40011.618-0.011
Callout4000.9431.272-0.009
Label5000.8351.272-0.004
Caption4000.7861.272-0.007
Overline4000.7861.2720.0618

Bold

Display1
Display2
TitleA
TitleB
TitleC
Heading
Subheading
Body
Callout
Label
Caption
overline
StyleWeightSize (em)Line Height (unitless)Letter Spacing (em)
Display 17004.2351.129-0.022
Display 27002.6181.272-0.022
Title A7002.0581.272-0.022
Title B6001.6181.272-0.02
Title C6001.2721.272-0.017
Heading7001.1291.272-0.014
Subheading6000.8851.272-0.007
Body60011.618-0.011
Callout6000.9431.272-0.009
Label7000.8351.272-0.004
Caption6000.7861.272-0.007
Overline6000.7861.2720.0618

Rich Text

Rich text applies the styles above to the corresponding HTML tags for each.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

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

Figure caption

Text Alignment Utility Classes

These utility classes control the padding for when there's a start or end icon, or both.

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

In LiftKit, spacing uses utility classes to give designers the flexibility to assign spacing based on each use case. By leveraging balanced scaling derived from golden ratio coefficients, the spacing system guarantees that every element, gap, margin, or padding on a page is truly proportional to every other.

Margin

Margins are by far the most heavily-used spacing class in LiftKit. They range from __xxs to__xxl.

margin-top

m-top__xxs
m-top__xs
m-top__s
m-top__m
m-top__l
m-top__xl
m-top__xxl

margin-right

m-right__xxs
m-right__xs
m-right__s
m-right__m
m-right__l
m-right__xl
m-right__xxl

margin-bottom

m-bottom__xxs
m-bottom__xs
m-bottom__s
m-bottom__m
m-bottom__l
m-bottom__xl
m-bottom__xxl

margin-left

m-left__xxs
m-left__xs
m-left__s
m-left__m
m-left__l
m-left__xl
m-left__xxl

Padding

padding-top

p-top__xxs
p-top__xs
p-top__s
p-top__m
p-top__l
p-top__xl
p-top__xxl

padding-right

p-right__xxs
p-right__xs
p-right__s
p-right__m
p-right__l
p-right__xl
p-right__xxl

padding-bottom

p-bottom__xxs
p-bottom__xs
p-bottom__s
p-bottom__m
p-bottom__l
p-bottom__xl
p-bottom__xxl

padding-left

p-left__xxs
p-left__xs
p-left__s
p-left__m
p-left__l
p-left__xl
p-left__xxl

Gaps

Gaps can be applied as combo classes to elements with display set to either flex or grid.

gap-xs
gap-xs
gap-s
gap-m
gap-l
gap-xl
gap-xxl
Grid Templates

Every grid has class "grid." Combo classes indicate column count. Rows generate automatically.

Utility Classes

Every grid has class "grid." Combo classes indicate column count. Rows generate automatically.

Template

[Root Style] + [Column Count]

CSS Example

.grid

.col__3

Example appearance in Webflow

Examples

.grid
.grid
.col__1
.grid
.col__2
.grid
.col__3
.grid
.col__4
.grid
.col__5
.grid
.col__6
.grid
.col__7
.grid
.col__8
.grid
.col__9
.grid
.col__10
.grid
.col__11
.grid
.col__12
Sizes

Purpose

These are meant for niche use cases. It's often used for setting profile photos, avatars, and other circle-based image wraps where you must declare a fixed width or height in order for your desired aspect-ratio to work.

Widths

.w-xxs
.w-xs
.w-s
.w-m
.w-l
.w-xl
.w-xxl
.w-xxxl

Height

.h-xs
.h-xs
.h-s
.h-m
.h-l
.h-xl
.h-xxl
.h-xxxl
Border Radius

Root Classes

xxs
xs
s
m
l
xl
xxl
xxxl
circle

Visual Preview

xxs
xs
s
m
l
xl
xxl
xxxl
circle
Aspect Ratios

Common

.aspect__16x9
.aspect__4x3
.aspect__3x2
.aspect__1x1
.aspect__16x9
Shadows

Common

.shadow1
.shadow2
.shadow3
.shadow4
.shadow5
Layout

Containers

Used to set maximum width within a section.
container__widest
container__wide
container_default
container__narrow
container__narrowest

Sections

Used to set vertical padding between sections.
section__mostPadding
section__morePadding
section__default
section__lessPadding
section__leastPadding
Display
.display__block
.display__flex-h
.display__flex-v
.grid
Cards

Root Classes

Card

.card

Outline card

.card__outline

Clickable Card

.card__link

Clickable Outline Card

.card__outline__link

Utility Classes

Template

[Card Style] + [Scale Factor] + [Background Color]

CSS Example

.card

.scaleFactor__heading

.bg__infoContainer

Example appearance in Webflow

Glossary

TermDefinitionExamples
Card StyleWhether the card uses the "default" or "outline" style. Default does not require a modifier, so you can simply use .card
  • .card
  • .card__outline
Scale FactorThe largest font size contained within the card. LiftKit uses this value to provide optical corrections to card padding symmetry.
  • scaleFactor__heading
  • scaleFactor__titleB
Background ColorThe fill color of the card. Will also set the corresponding text color. See Color for list of options.
  • .bg-light__surface
  • .bg-light__inverseSurface

Example Implementations

Default Cards

Scaled for each type style
expand_more

Display1

.card.scaleFactor__display1

Display2

.card.scaleFactor__display2

TitleA

.card.scaleFactor__titleA

TitleB

.card.scaleFactor__titleB

TitleC

.card.scaleFactor__titleC

Heading

.card.scaleFactor__heading

Subheading

.card.scaleFactor__subheading

Body

.card.scaleFactor__body

Callout

.card.scaleFactor__callout

Label

.card.scaleFactor__label

Caption

.card.scaleFactor__caption

Overline

.card.scaleFactor__overline

Outlined Cards

Scaled for each type style
expand_more

Display1

.card.scaleFactor__display1

Display2

.card.scaleFactor__display2

TitleA

.card.scaleFactor__titleA

TitleB

.card.scaleFactor__titleB

TitleC

.card.scaleFactor__titleC

Heading

.card.scaleFactor__heading

Subheading

.card.scaleFactor__subheading

Body

.card.scaleFactor__body

Callout

.card.scaleFactor__callout

Label

.card.scaleFactor__label

Caption

.card.scaleFactor__caption

Overline

.card.scaleFactor__overline

Default Link Cards

Interactive with built-in state layers
expand_more

Display1

.card.scaleFactor__display1

Display2

.card.scaleFactor__display2

TitleA

.card.scaleFactor__titleA

TitleB

.card.scaleFactor__titleB

TitleC

.card.scaleFactor__titleC

Heading

.card.scaleFactor__heading

Subheading

.card.scaleFactor__subheading

Body

.card.scaleFactor__body

Callout

.card.scaleFactor__callout

Label

.card.scaleFactor__label

Caption

.card.scaleFactor__caption

Overline

.card.scaleFactor__overline

Outlined Link Cards

Interactive with built-in state layers
expand_more

Display1

.card.scaleFactor__display1

Display2

.card.scaleFactor__display2

TitleA

.card.scaleFactor__titleA

TitleB

.card.scaleFactor__titleB

TitleC

.card.scaleFactor__titleC

Heading

.card.scaleFactor__heading

Subheading

.card.scaleFactor__subheading

Body

.card.scaleFactor__body

Callout

.card.scaleFactor__callout

Label

.card.scaleFactor__label

Caption

.card.scaleFactor__caption

Overline

.card.scaleFactor__overline

Components

These components deliberately have more elements than necessary for most use cases.This was done to make them faster to implement. It's quicker to delete elements you don't need than to drag in new ones. So, the recommended use for these is to quickly place an instance and then immediately detach it. From there, you can delete elements as needed.

Default Card

.card

.scaleFactor__heading

.bg-light__surfaceContainerLowest

viverra ornare
Consectetur adipiscing elit

Lorem Ipsum Dolor Sit Amet

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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
arrow_forward
Label
arrow_forward
arrow_forward
Label
arrow_forward
arrow_forward
Label
arrow_forward
Default Card (Link)

.card__link

.scaleFactor__heading

.bg-light__surfaceContainerLowest

viverra ornare

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
arrow_forward
Label
arrow_forward
arrow_forward
Label
arrow_forward
arrow_forward
Label
arrow_forward
Outlined Card
viverra ornare

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
arrow_forward
Label
arrow_forward
arrow_forward
Label
arrow_forward
arrow_forward
Label
arrow_forward
Outlined Card (Link)

.card__outline__link

.scaleFactor__heading

viverra ornare

Lorem ipsum dolor sit amet

Consectetur adipiscing elit

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.

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

.card__quote

.scaleFactor__heading

Quote highlight should go up on top

Author Name

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.

Badges

Utility Classes

These two are easier to navigate using the Navigator than with the canvas.

Template

[Root Style] + [Background Color]

Example appearance in Webflow

Components

Default
Hue Group
Default
Primary
Secondary
Tertiary
Error
Warning
Success
Info
Key Colors
public
public
public
public
public
public
public
public
Containers
n/a
public
public
public
public
public
public
public
Fixed
n/a
Size
public
public
public
n/a
n/a
n/a
n/a
Fixed Dim
n/a
public
public
public
n/a
n/a
n/a
n/a
On Fixed
n/a
public
public
public
n/a
n/a
n/a
n/a
On Fixed Variant
n/a
public
public
public
n/a
n/a
n/a
n/a
Large
Default
Primary
Secondary
Tertiary
Error
Warning
Success
Info
Key Colors
public
public
public
public
public
public
public
public
Containers
n/a
public
public
public
public
public
public
public
Fixed
n/a
public
public
public
Hue Group
Variant
n/a
n/a
n/a
n/a
Fixed Dim
n/a
public
public
public
n/a
n/a
n/a
n/a
On Fixed
n/a
public
public
public
n/a
n/a
n/a
n/a
On Fixed Variant
n/a
public
public
public
n/a
n/a
n/a
n/a
Stickers

Components

Default
Hue Group
Default
Primary
Secondary
Tertiary
Error
Warning
Success
Info
Key Colors
public
Label
public
Label
public
Label
public
Label
public
Label
public
Label
public
Label
public
Label
Containers
n/a
public
Label
public
Label
public
Label
public
Label
public
Label
public
Label
public
Label
Fixed
n/a
public
Label
public
Label
public
Label
Size
n/a
n/a
n/a
n/a
Fixed Dim
n/a
public
Label
public
Label
public
Label
n/a
n/a
n/a
n/a
On Fixed
n/a
public
Label
public
Label
public
Label
n/a
n/a
n/a
n/a
On Fixed Variant
n/a
public
Label
public
Label
public
Label
n/a
n/a
n/a
n/a
Buttons

Utility Classes

These two are easier to navigate using the Navigator than with the canvas.

Template

[Card Style] + [Size] + [Icon Placement]

CSS Example

.button

.large

.start-icon.end-icon

Example appearance in Webflow

Components

 

 

.start-icon

.end-icon

.start-icon.end-icon

.button

Label
arrow_forward
Label
Label
arrow_forward
arrow_forward
Back
arrow_forward

.button__outline

Label
add
Label
Label
public
arrow_forward
Back
arrow_forward

.button__text

Label
public
Label
Label
arrow_forward
arrow_forward
Back
arrow_forward

Large

 

 

.start-icon

.end-icon

.start-icon.end-icon

.button.large

Label
arrow_forward
Label
Label
arrow_forward
arrow_forward
Back
arrow_forward

.button__outline.large

Label
arrow_forward
Label
Label
arrow_forward
arrow_forward
Label
arrow_forward

.button__text.large

Label
arrow_forward
Label
Label
arrow_forward
arrow_forward
Label
arrow_forward

Icon Placement Classes

These utility classes control the padding for when there's a start or end icon, or both.

.start-icon
.end-icon
.start-icon.end-icon
Snackbar

Purpose

These are meant for niche use cases. It's often used for setting profile photos, avatars, and other circle-based image wraps where you must declare a fixed width or height in order for your desired aspect-ratio to work.

Example Implementations

info
Snackbar Info
For neutral notifications and alerts.
Action
info
Snackbar Info.
For neutral notifications and alerts.
Action
check_circle
Snackbar Success.
For confirmations, like form submission success states.
Action
warning
Snackbar Warning.
For cautionary info, like a "warning, deprecated" message.
Action
error
Snackbar Error.
For high severity alerts, like error messages.
Action
Icons

Purpose

The plain-ol' icon component. Meant to be dropped pretty much anywhere and quickly detached if necessary. Uses Google's Material Symbols font family.

Variants

info
.material-symbols-outlined
info
.material-symbols-filled

Customization

To change the icon, double click it and edit it like you would any plain bit of text. The Google Fonts API will automatically render the correct icon. For a list of all the icon names, visit Material Symbols on Google Fonts.
Object-Fit

Purpose

These are meant for niche use cases. It's often used for setting profile photos, avatars, and other circle-based image wraps where you must declare a fixed width or height in order for your desired aspect-ratio to work.
Default
Default
Default
Default
Default

Example Implementations

Heading

Subheading

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.

arrow_forward