docs / patterns / stripe-card

StripeCard

a compact row-card for one entity: a leading stripe keys it to a category, with a heading, mono meta, and optional badge and footer. the stripe means something or stays neutral, never decoration.

intensity · structuresrsc · server

provenance

shaped from sisu-plus

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

sits in a grid or list of siblings, one entity eachthe stripe color keys a category shared with a ToolbarLegendnever a lone hero card. it is a row in a collectionno interactive children fighting the card's own hover lift

a11y

the stripe and the meta separator are aria-hidden · the heading is a real h3jest-axe

dependencies

Card from the same package
live demo · try it out

Algorithms & Data Structures

CS-2015 cr

enrolled
Autumn 2026 · Prof. Turing
customize
stripeColorkeyed to a category
washa faint wash in the stripe's color
surfacehow it sits on the page
selectedswaps hover lift for the accent ring
usagecopy
import { StripeCard } from "@usva-ui/react/patterns/stripe-card";
import { Badge } from "@usva-ui/react/primitives/badge";

<StripeCard
  heading="Algorithms & Data Structures"
  metaLeft="CS-201"
  metaRight="5 cr"
  stripeColor="#a78bfa"
  badge={<Badge tone="accent-alt">enrolled</Badge>}
  footer="Autumn 2026 · Prof. Turing"
/>

props

proptypedefaultnotes
headingReactNode—the primary title.
metaLeftReactNode—mono meta on the left, e.g. a code.
metaRightReactNode—mono meta on the right, rendered in the accent color.
badgeReactNode—top-right slot, usually a Badge.
footerReactNode—bottom bar slot, pinned under the body.
stripeColorstring—any CSS color, keyed to a category. unset falls back to a neutral token.
washbooleanfalsea faint background wash in the stripe's color, or the accent when the stripe is unset.
surface"elevated" | "flat" | "glass" | "outline""elevated"how the card sits on the page. inherited from Card.
selectedbooleanfalseswaps the hover lift for the accent glow ring.

get it

bun add @usva-ui/reactcopy
usagecopy
import { StripeCard } from "@usva-ui/react/patterns/stripe-card";
import { Badge } from "@usva-ui/react/primitives/badge";

<StripeCard
  heading="Algorithms & Data Structures"
  metaLeft="CS-201"
  metaRight="5 cr"
  stripeColor="var(--color-accent)"
  badge={<Badge tone="accent-alt">enrolled</Badge>}
/>