Cards

Cards group a piece of content — an icon, a heading, some text, a link — into a tidy, reusable block. Shock includes six card styles, all sharing the same color schemes so they match your palette out of the box.

Content cards

Box Shadow Card

A clean card lifted off the page with a soft drop shadow. The go-to for feature grids.

Outline Card

A flat, bordered card with no shadow — subtle and great on colored backgrounds.

Double Edge Card

A distinctive card with an offset second edge for a layered, designed look.

Image cards

Horizontal Image Card

Image beside the content — ideal for list-style layouts and blog rows.

Vertical Image Card

Image above the content — the classic card for portfolios and articles.

Magnetic Image Card

An image card whose artwork reacts to the cursor with a magnetic hover effect.

Same palette, any card

Every card accepts Shock’s scheme-* and color classes, so switching a card from primary to secondary — or recoloring your whole palette in theme.css — restyles them all at once. See Colors for the full list of schemes, or Buttons for another component that shares the same classes.