Card Carte - Docs - Artefact

Card Carte

Data Display

Tier 2

Introduction

Un conteneur flexible pour regrouper le contenu associé, avec des emplacements facultatifs pour l'en-tête, le corps, le pied de page, l'image et l'avatar.

Utilisation

Carte de base

Main content of the card goes here.

import { Card, Button } from "../components/ui";

export default function MyPage() {
  return (
    <Card
      variant="elevated"
      title="Project title"
      description="A short description of the project."
      body="Main content of the card goes here."
      footer={<Button>View</Button>}
    />
  );
}

Carte avec image

import { Card } from "../components/ui";

export default function MyPage() {
  return (
    <Card
      image="/cover.png"
      imagePosition="top"
      title="Card with image"
      body="Content beneath the image."
    />
  );
}

Constructeur de pages CMS

Ce composant est disponible sous forme de bloc card dans Page Builder (content/pages/*.json) :

{
  "type": "card",
  "title": "Project title",
  "description": "A short description of the project.",
  "body": "Main content of the card goes here.",
  "variant": "elevated"
}

Propriétés

Carte

Propriété	Type	Description