Nav Menu

Products & Services

Account

Kelp

This is the "kitchen sink" demo that includes all of the components in one spot.

View the Docs →

Dark & Light Mode

This content is always in dark mode!

This content is always in dark mode!

This content is always in light mode!

This content is always in light mode!

Containers

.container-xs
.container-s
.container or .container-m
.container-l
.container-xl
.container-2xl
.breakout (escapes parent container and goes full width)

Cluster

Merlin
Gandalf
Radagast and his animals
Wand
Sword
Wizard Staff
The magical secrets of the universe
Potions
Cauldron
Supercalifragilisticexpialidocious

Grid

.item-third
.item-two-thirds
.item-fourth
.item-three-fourths
.item-half
.item-half
.item-fourth
.item-half
.item-fourth

Content Choreography

1
2
3
1
2
1
2
3

Automatic Grid

Merlin
Gandalf
Radagast and his animals
Wand
Sword
Wizard Staff
The magical secrets of the universe
Potions

Sidecar

👋
Hello there!

Split

...
...

Stack

Merlin
Gandalf
Radagast

Text

This is default text.
This is bold...
...and this is italic.
This is what they look like together.
This is strikethrough text.
This text is highlighted.
Superscripts1 and subscriptsxyz

Links

Regular Link
Subtle Link

Headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

This is an h2 heading styled like an h4

Lists

  • Whale
  • Shark
  • Dolphin
    • Smart
    • Friend of humans
  1. Merlin
  2. Radagast
  3. Gandalf
    • Wizard
    • Friend of the small folk
  • Wand
  • Potions
  • Wizard Staff
  • Wand
  • Potions
  • Wizard Staff
Definition List
Encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
Here's another term
And here's the definition that would go with it.

Tables

First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman
First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman
First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman
First Last Hero Name Super Power Costume Color
Peter Parker Spiderman Spider Stuff Red and Blue
Bruce Wayne Batman Bat Stuff Black
Tony Stark Ironman Iron Stuff Red and Yellow

Blockquote

Someone once said something so important, it was deemed worthy of repeating here in the form of a blockquote. This is that blockquote. - Someone Important
Someone once said something so important, it was deemed worthy of repeating here in the form of a blockquote. This is that blockquote. - Someone Important

Code

Inline code: .js-example. 
/* Preformatted Text */
	.js-example {
		color: #272727;
		background: #ffffff;
	}

Images

A gorgeous jellyfish drifting in the ocean
A gorgeous jellyfish drifting in the ocean
Ran into this big fella on my last snorkeling trip (not really!)

Multimedia

Dividers

Buttons

This is a Link

Forms

What's your favorite Pixar movie?

Form Layout

Readonly & Disabled

Implicit Labels

Switches

Disabled Inputs

Avatar

A headshot of a white male in a purple gingham shirt with a shaved head and stubble.

Badges

Neutral Primary Secondary Success Danger Warning

Neutral Primary Secondary Success Danger Warning

Neutral Primary Secondary Success Danger Warning

Callouts

Neutral Callout
Primary Callout
Secondary Callout
Success Callout
Danger Callout
Warning Callout
Neutral Callout
Primary Callout
Secondary Callout
Success Callout
Danger Callout
Warning Callout
Neutral Callout
Primary Callout
Secondary Callout
Success Callout
Danger Callout
Warning Callout
Hey! You're awesome!

Details & Summary

The Toggle The content.
Callout Content
The content.
Callout Wrapper The content.

Details Groups

Merlin The wizard...
Gandalf The gray...
Radagast The dude who talks to animals...

Table of Contents

Comes in two forms—simple...

And nested...

Skeleton

Visibility

Skip to Content

Aspect Ratio

A gorgeous jellyfish drifting in the ocean

Fills

.fill
.fill .primary
.fill .secondary
.fill .success
.fill .danger
.fill .warning
.fill .vivid
.fill .primary .vivid
.fill .secondary .vivid
.fill .success .vivid
.fill .danger .vivid
.fill .warning .vivid

Text Modifiers

Hey there, friend! Hey there, friend! Hey there, friend!

This text is centered.

This text is aligned to the end.

I am muted.

text .size.2xs

text .size.xs

text .size.s

text .size.l

text .size.xl

text .size.2xl

text .size.3xl

text .size.4xl

text .size.5xl

text .size.6xl

.text-color .text-color .primary .text-color .secondary .text-color .success .text-color .danger .text-color .warning

This is regular text that's using the secondary font, usually applied to headings.

This is a heading that's using the primary font, usually used for body text.

Toggle Password

Tabs

Wizards gain their magic through study...
Sorcerers get their power from an otherworldly being...
Druids get their power from nature...

Vertical Orientation

Wizards gain their magic through study...
Sorcerers get their power from an otherworldly being...
Druids get their power from nature...

Modals

Drawers

This is a modal heading

Here's some body text inside the modal.

This is a modal heading

Here's some body text inside the modal.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

This is a modal heading

Here's some body text inside the modal.

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

This is a modal heading

Here's some body text inside the modal.

This is a modal heading

Here's some body text inside the modal.

This is a modal heading

Here's some body text inside the modal.

This is a modal heading

Here's some body text inside the modal.

Spinner