Card, Cairn

Migration Shopify

Cadrage technique et reprise du catalogue.

Trois lots, livrés en continu. Le premier valide l'architecture headless avant tout engagement sur la suite.

Carte cliquable

La surface entière est un lien via asChild.

Rendue comme un lien, elle reste une seule cible et hérite du focus.

Show code

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  Button,
} from '@six-vallees/ui-react';

export default function CardDemo() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-gap-lg sm:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle>Migration Shopify</CardTitle>
          <CardDescription>Cadrage technique et reprise du catalogue.</CardDescription>
        </CardHeader>
        <CardContent>
          <p className="sv-body-md text-on-surface-variant">
            Trois lots, livrés en continu. Le premier valide l'architecture headless
            avant tout engagement sur la suite.
          </p>
        </CardContent>
        <CardFooter>
          <Button size="sm">Voir le devis</Button>
          <Button size="sm" variant="ghost">
            Détails
          </Button>
        </CardFooter>
      </Card>

      <Card asChild>
        <a href="#" className="sv-state transition-colors hover:border-outline-strong">
          <CardHeader>
            <CardTitle>Carte cliquable</CardTitle>
            <CardDescription>La surface entière est un lien via asChild.</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="sv-body-md text-on-surface-variant">
              Rendue comme un lien, elle reste une seule cible et hérite du focus.
            </p>
          </CardContent>
        </a>
      </Card>
    </div>
  );
}

npx shadcn@latest add https://cairn.sixvallees.com/r/card.json

Part	Type	Default
Card	HTMLAttributes<div> The surface. card-radius, hairline outline, bg-surface. Pass asChild to render as an <a> or another element.	-
CardHeader	HTMLAttributes<div> Header region: stacks title + description with inset padding.	-
CardTitle	HTMLAttributes<heading> & { as } The heading, sv-title-md. Set as to change the level (h2 / h3 / h4).	as='h3'
CardDescription	HTMLAttributes<p> Supporting line under the title, body role in on-surface-variant.	-
CardContent	HTMLAttributes<div> Main body. Top padding is supplied by the header; add pt-inset-lg when used alone.	-
CardFooter	HTMLAttributes<div> Trailing actions row, aligned centre with a small gap.	-

Every part forwards its ref and spreads native attributes. Compose only the regions a card needs, the padding is carried per region, not by the root.