Card - Docs - Artefact

Card

Data Display

Detecção automática inteligente

Introdução

Um contêiner flexível para agrupar conteúdo relacionado, com slots opcionais de cabeçalho, corpo, rodapé, imagem e avatar.

Uso

Card básico

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>}
    />
  );
}

Card com imagem

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."
    />
  );
}

Construtor de Páginas CMS

Este componente está disponível como um bloco card no Construtor de Páginas (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"
}

Propriedades

Card

Prop	Type	Description