Component

Card

A quiet panel. Add squish when it should press.

Classes

Class	Type
card	Component	The panel. A plain card is white.
card-sm	Size	Small.
card-lg	Size	Large.
primary	Color	A tint. A plain card is white.
secondary	Color	Pink by default.
tertiary	Color	Teal by default.
neutral	Color	Gray by default.
success	Color	Green by default.
error	Color	Red by default.
warning	Color	Amber by default.
info	Color	Sky by default.
squish	State	Adds the press to the card.

Plain

Studio notes

A white jelly panel.

<section class="card">
  <h3>Studio notes</h3>
  <p>A white jelly panel.</p>
</section>

Colors

Primary

Secondary

Tertiary

Neutral

Success

Error

Warning

Info

<section class="card primary">
  <h3>Primary</h3>
</section>
<section class="card secondary">
  <h3>Secondary</h3>
</section>
<section class="card tertiary">
  <h3>Tertiary</h3>
</section>
<section class="card neutral">
  <h3>Neutral</h3>
</section>
<section class="card success">
  <h3>Success</h3>
</section>
<section class="card error">
  <h3>Error</h3>
</section>
<section class="card warning">
  <h3>Warning</h3>
</section>
<section class="card info">
  <h3>Info</h3>
</section>

Sizes

The sizes change the type as well as the padding: 14px, 16px, and 20px.

Small

Regular

Large

<section class="card card-sm"><h3>Small</h3></section>
<section class="card"><h3>Regular</h3></section>
<section class="card card-lg"><h3>Large</h3></section>