Component

Card

A quiet panel. Add squish when it should press.

Import jellyfy/card.css with jellyfy/material.css and jellyfy/motion.css. Or import jellyfy/jellyfy.css, which already includes this file and every other component.

Classes

Class	Type
card	Component	The panel. With no color class, the card stays plain.
card-sm	Size	Small size
card-md	Size	Medium size (default)
card-lg	Size	Large size
primary	Color	A wash of this solid. The text is the surface content color. With no color class, the card stays plain.
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 plain 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

Medium

Large

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