Card

Card surface — a domain-agnostic frame a consumer wraps around content.

import { Card } from "@evolve-storefront/ui/card";

Design notes

Feature packages deliberately ship no card chrome (their parts are plain unstyled elements), because a feature must not decide how its content is framed. That stays true: this is the primitive a consumer reaches for when it wants a card, and no feature package imports it.

Compose the parts as children — there are no prop bags or boolean flags.

Preview

DefaultOpen in Storybook ↗

Usage

<Card>
  <CardHeader>
    <CardTitle>{t("deliveryAddress")}</CardTitle>
    <CardDescription>{t("deliveryAddressDescription")}</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
</Card>;

Props

Prop	Type	Description
asChild?	boolean

Any other props go to the root element, like on a plain HTML element.

Change the layout

Pass children to Card to arrange its parts yourself. Every part is exported from @evolve-storefront/ui/card.

<Card>
  <CardHeader>
    <CardTitle>{t("deliveryAddress")}</CardTitle>
    <CardDescription>{t("deliveryAddressDescription")}</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
</Card>;

CardContentThe body of the card.

No props of its own.

CardDescriptionSecondary text under the title, in the muted color.

No props of its own.

CardFooterA row at the bottom of the card, usually for actions.

No props of its own.

CardHeaderThe top of the card: holds CardTitle and CardDescription.

No props of its own.

CardTitleThe card's heading.

Prop	Type	Description
level?	HeadingLevel	Semantic heading level. Defaults to 3; set it where the card sits at a different depth and the document outline matters.

Any other props go to the root element, like on a plain HTML element.

Examples

With FooterHeader + content + footer actions.

<Card>
  <CardHeader>
    <CardTitle>{t("paymentMethod")}</CardTitle>
    <CardDescription>{t("paymentMethodDescription")}</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>
    <Button variant="secondary" onClick={remove}>{t("remove")}</Button>
  </CardFooter>
</Card>;

Open in Storybook ↗

Framing Feature ContentThe motivating surface: a consumer frames the credential forms in cards.

// The feature ships the form; the app decides it sits in a card.
<Card>
  <CardHeader>
    <CardTitle>{t("emailAddress")}</CardTitle>
  </CardHeader>
  <CardContent>
    <ChangeEmailForm />
  </CardContent>
</Card>;

Open in Storybook ↗

Heading Levellevel controls the document outline without changing the visual size.

// Directly under the page title, so the card heading is an h2.
<CardTitle level={2}>{t("deliveryAddress")}</CardTitle>;

Open in Storybook ↗

As LinkasChild renders the surface as another element — e.g.

<Card asChild>
  <Link href={order.href}>
    <CardHeader>
      <CardTitle>{order.orderNumber}</CardTitle>
    </CardHeader>
  </Link>
</Card>;

Open in Storybook ↗