Hero

Hero Large

The quick brown fox jumps over the lazy dog

Hero Medium

The quick brown fox jumps over the lazy dog

Hero Small

The quick brown fox jumps over the lazy dog

Display

Display Large

The quick brown fox jumps over the lazy dog

Display Medium

The quick brown fox jumps over the lazy dog

Display Small

The quick brown fox jumps over the lazy dog

Headline

Headline Large

The quick brown fox jumps over the lazy dog

Headline Medium

The quick brown fox jumps over the lazy dog

Headline Small

The quick brown fox jumps over the lazy dog

Title

Title Large

The quick brown fox jumps over the lazy dog

Title Medium

The quick brown fox jumps over the lazy dog

Title Small

The quick brown fox jumps over the lazy dog

Body

Body Emphasis

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.

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

Body Medium

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.

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

Label

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

Label Medium

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.

Label Small

Some help text.

Splide Components

Splide Arrows

arrow_back

arrow_forward

arrow_back

arrow_forward

Material Symbols

Icons

filter_list

Buttons

Standard button

Icon + Text Buttons

filter_alt

Icon button

Icon Buttons

close

Dropdown

Checkboxes

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Radio Buttons

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Tag

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Spacing

Spacing 0

Spacing 1

Spacing 2

Spacing 3

Spacing 4

Spacing 5

Spacing 6

Spacing 7

Spacing 8

Spacing 9

Spacing 10

Spacing 11

Spacing 12

Spacing 13

Elevation

Elevation 0

Elevation 1

Elevation 2

Elevation 3

Elevation 4

Elevation 6

Elevation 8

Elevation 12

Elevation 16

Spacing 24

Shadows

Text Shadow Soft

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 Shadow Subtle

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 Shadow Glow

The quick brown fox jumps over the lazy dog

Text Shadow Strong

The quick brown fox jumps over the lazy dog

Icon over Image

filter_list

Chip Label on Image

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Lists

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

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Animation

Animation Timing Curves

Curve Name	CSS `cubic-bezier`	Use Case
Standard	`cubic-bezier(0.2, 0, 0, 1)`	Default motion (fade, zoom, etc.)
Decelerate	`cubic-bezier(0, 0, 0, 1)`	Entering elements (fade/zoom in)
Accelerate	`cubic-bezier(0.3, 0, 1, 1)`	Exiting elements (fade/zoom out)
Emphasized (in)	`cubic-bezier(0.05, 0.7, 0.1, 1)`	Emphasized entrance (e.g. lightbox open)
Emphasized (out)	`cubic-bezier(0.3, 0, 0.8, 0.15)`	Emphasized exit (e.g. lightbox close)

Fade and Zoom Durations

Motion Type	Duration	Curve	Example Use
Fade in	200ms	Decelerate	Dialog, tooltip appearing
Fade out	150ms	Accelerate	Dismissing element
Zoom in (scale)	200–300ms	Emphasized (in) or Decelerate	Cards, modals, lightboxes
Zoom out (scale)	150–200ms	Emphasized (out) or Accelerate	Exit transitions