Card Tarjeta - Docs - Artefact

Card Tarjeta

Data Display

Detección automática inteligente

Introducción

Un contenedor flexible para agrupar contenido relacionado, con slots opcionales de encabezado, cuerpo, pie de página, imagen y avatar.

Uso

Card básica

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 con imagen

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

Constructor de Páginas CMS

Este componente está disponible como un bloque card en el Constructor 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"
}

Propiedades

Card

Prop	Type	Description