Card

Componente de tarjeta flexible para mostrar contenido agrupado con varios diseños.

Importar

import { Card } from 'asterui'

Ejemplos

Card Básica

Tarjeta simple con título y contenido.

Card Title

Card content goes here. This is a basic card with a title.

import { Card } from 'asterui'

function App() {
  return (
      <Card title="Card Title" style={{ width: '20rem' }}>
        <p>Card content goes here. This is a basic card with a title.</p>
      </Card>
    )
}

export default App

Con Borde

Tarjeta con borde sólido en lugar de sombra.

Card Title

A card with a solid border instead of a shadow.

import { Card } from 'asterui'

function App() {
  return (
      <Card variant="border" title="Card Title" style={{ width: '20rem' }}>
        <p>A card with a solid border instead of a shadow.</p>
      </Card>
    )
}

export default App

Con Imagen de Portada

Tarjeta con imagen de portada encima del contenido.

Card with Cover

Cards can have cover images that appear above the content.

import { Card } from 'asterui'

function App() {
  return (
      <Card
        cover={<img src="https://picsum.photos/seed/card1/400/200" alt="Cover" />}
        title="Card with Cover"
        style={{ width: '20rem' }}
      >
        <p>Cards can have cover images that appear above the content.</p>
      </Card>
    )
}

export default App

Con Acciones

Tarjeta con botones de acción en la parte inferior.

Card with Actions

Action buttons appear at the bottom of the card.

import { Card, Button } from 'asterui'

function App() {
  return (
      <Card
        cover={<img src="https://picsum.photos/seed/card2/400/200" alt="Cover" />}
        title="Card with Actions"
        style={{ width: '20rem' }}
        actions={
          <>
            <Button variant="ghost" size="sm">Cancel</Button>
            <Button color="primary" size="sm">Buy Now</Button>
          </>
        }
      >
        <p>Action buttons appear at the bottom of the card.</p>
      </Card>
    )
}

export default App

Variantes

Diferentes variantes de estilo de tarjeta: shadow, border, dash, borderless.

Shadow

Shadow style

Border

Solid border

Dash

Dashed border

Borderless

No border

import { Card, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="md">
        <Card title="Shadow" variant="shadow" style={{ width: '14rem' }}>
          Shadow style
        </Card>
        <Card title="Border" variant="border" style={{ width: '14rem' }}>
          Solid border
        </Card>
        <Card title="Dash" variant="dash" style={{ width: '14rem' }}>
          Dashed border
        </Card>
        <Card title="Borderless" variant="borderless" style={{ width: '14rem' }}>
          No border
        </Card>
      </Space>
    )
}

export default App

Tamaños

Tamaños de tarjeta desde xs hasta lg con relleno variable.

Extra Small

Compact content

Small

Small card content

Medium

Medium card content

Large

Large card content

import { Card, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="md" align="start">
        <Card title="Extra Small" size="xs" style={{ width: '12rem' }}>
          <p>Compact content</p>
        </Card>
        <Card title="Small" size="sm" style={{ width: '14rem' }}>
          <p>Small card content</p>
        </Card>
        <Card title="Medium" size="md" style={{ width: '16rem' }}>
          <p>Medium card content</p>
        </Card>
        <Card title="Large" size="lg" style={{ width: '18rem' }}>
          <p>Large card content</p>
        </Card>
      </Space>
    )
}

export default App

Contenido Extra

Agrega contenido extra en el encabezado de la tarjeta con la prop extra.

Card Title

Use the extra prop to add content in the top-right corner.

import { Card } from 'asterui'

function App() {
  return (
      <Card
        title="Card Title"
        extra={<a href="#" className="link link-primary text-sm">More</a>}
        style={{ width: '20rem' }}
      >
        <p>Use the extra prop to add content in the top-right corner.</p>
      </Card>
    )
}

export default App

Diseño Meta

Diseño integrado de avatar, título y descripción.

John Doe

Software Engineer

Use avatar, title, and description for a meta layout.

import { Card, Avatar } from 'asterui'

function App() {
  return (
      <Card
        avatar={<Avatar src="/avatar-2.webp" />}
        title="John Doe"
        description="Software Engineer"
        style={{ width: '20rem' }}
      >
        <p className="mt-4">Use avatar, title, and description for a meta layout.</p>
      </Card>
    )
}

export default App

Componente Card.Meta

Componente meta independiente para posicionamiento flexible.

Jane Smith

Product Designer

Card.Meta can be used anywhere inside the card body.

import { Card, Avatar } from 'asterui'

function App() {
  return (
      <Card style={{ width: '20rem' }}>
        <Card.Meta
          avatar={<Avatar src="/avatar-1.webp" />}
          title="Jane Smith"
          description="Product Designer"
        />
        <p className="mt-4">Card.Meta can be used anywhere inside the card body.</p>
      </Card>
    )
}

export default App

Hoverable

Tarjeta con efecto de sombra al pasar el mouse.

Hoverable Card

Hover over this card to see the shadow effect.

import { Card } from 'asterui'

function App() {
  return (
      <Card
        hoverable
        cover={<img src="https://picsum.photos/seed/card3/400/200" alt="Cover" />}
        title="Hoverable Card"
        style={{ width: '20rem' }}
      >
        <p>Hover over this card to see the shadow effect.</p>
      </Card>
    )
}

export default App

Estado de Carga

Estado de carga skeleton mientras se carga el contenido.

import { Card, Button, Space, Avatar } from 'asterui'
import { useState } from 'react'

function App() {
  const [loading, setLoading] = useState(true)
  
  return (
      <Space direction="vertical" size="md">
        <Button size="sm" onClick={() => setLoading(!loading)}>
          Toggle Loading
        </Button>
        <Card
          loading={loading}
          avatar={<Avatar />}
          title="Card Title"
          description="Card description"
          style={{ width: '20rem' }}
          actions={
            <>
              <Button variant="ghost" size="sm">Action</Button>
              <Button color="primary" size="sm">Submit</Button>
            </>
          }
        >
          <p className="mt-4">Card content that appears when not loading.</p>
        </Card>
      </Space>
    )
}

export default App

Imagen Completa

El contenido se superpone sobre la imagen de portada.

Image Full

Content overlays on top of the image with dark gradient.

import { Card, Button } from 'asterui'

function App() {
  return (
      <Card
        imageFull
        cover={<img src="https://picsum.photos/seed/card4/400/250" alt="Cover" />}
        title="Image Full"
        style={{ width: '20rem' }}
        actions={<Button color="primary" size="sm">Learn More</Button>}
      >
        <p>Content overlays on top of the image with dark gradient.</p>
      </Card>
    )
}

export default App

Diseño Lateral

Diseño horizontal con imagen en el lateral.

Side Layout

The cover image appears on the side instead of the top.

import { Card, Button } from 'asterui'

function App() {
  return (
      <Card
        side
        cover={<img src="https://picsum.photos/seed/card5/200/200" alt="Cover" className="max-w-[200px]" />}
        title="Side Layout"
        style={{ width: '28rem' }}
        actions={<Button color="primary" size="sm">Details</Button>}
      >
        <p>The cover image appears on the side instead of the top.</p>
      </Card>
    )
}

export default App

Tarjeta Interna

Tarjetas anidadas con distinción de fondo sutil.

Outer Card

This is the outer card content.

Inner Card

Inner cards have a subtle background distinction.

import { Card } from 'asterui'

function App() {
  return (
      <Card title="Outer Card" style={{ width: '24rem' }}>
        <p className="mb-4">This is the outer card content.</p>
        <Card type="inner" title="Inner Card">
          <p>Inner cards have a subtle background distinction.</p>
        </Card>
      </Card>
    )
}

export default App

Con Pestañas

Tarjeta con navegación de contenido por pestañas.

Article content here...

import { Card } from 'asterui'
import { useState } from 'react'

function App() {
  const [activeKey, setActiveKey] = useState('tab1')
  
  return (
      <Card
        tabList={[
          { key: 'tab1', label: 'Article' },
          { key: 'tab2', label: 'App' },
          { key: 'tab3', label: 'Project' },
        ]}
        activeTabKey={activeKey}
        onTabChange={setActiveKey}
        style={{ width: '24rem' }}
      >
        {activeKey === 'tab1' && <p>Article content here...</p>}
        {activeKey === 'tab2' && <p>App content here...</p>}
        {activeKey === 'tab3' && <p>Project content here...</p>}
      </Card>
    )
}

export default App

Cuadrícula de Tarjeta

Diseño de cuadrícula dentro de tarjetas con celdas hoverable.

Card Grid

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

import { Card } from 'asterui'

function App() {
  return (
      <Card title="Card Grid" style={{ width: '28rem' }}>
        <div className="grid grid-cols-2 -mx-6 -mb-6">
          <Card.Grid hoverable>Grid Item 1</Card.Grid>
          <Card.Grid hoverable>Grid Item 2</Card.Grid>
          <Card.Grid hoverable>Grid Item 3</Card.Grid>
          <Card.Grid hoverable>Grid Item 4</Card.Grid>
        </div>
      </Card>
    )
}

export default App

API

`Card`

Propiedad	Descripción	Tipo	Predeterminado
`title`	Título de la tarjeta	`ReactNode`	-
`extra`	Contenido en la parte superior derecha del encabezado	`ReactNode`	-
`cover`	Elemento de imagen de portada	`ReactNode`	-
`actions`	Botones de acción en la parte inferior	`ReactNode`	-
`size`	Tamaño de la tarjeta	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`variant`	Variante de estilo de tarjeta	`'shadow' \| 'border' \| 'dash' \| 'borderless'`	`'shadow'`
`type`	Estilo de tarjeta interna para anidación	`'inner'`	-
`side`	Diseño horizontal con imagen lateral	`boolean`	`false`
`imageFull`	Contenido se superpone sobre imagen de portada	`boolean`	`false`
`actionsJustify`	Alineación de acciones	`'start' \| 'center' \| 'end'`	`'end'`
`loading`	Mostrar estado de carga skeleton	`boolean`	`false`
`hoverable`	Agregar efecto de sombra al pasar el mouse	`boolean`	`false`
`avatar`	Avatar para diseño meta	`ReactNode`	-
`description`	Descripción para diseño meta	`ReactNode`	-
`tabList`	Elementos de pestaña para pestañas de tarjeta	`CardTabItem[]`	-
`activeTabKey`	Clave de pestaña activa (controlado)	`string`	-
`defaultActiveTabKey`	Clave de pestaña activa predeterminada	`string`	-
`onTabChange`	Callback de cambio de pestaña	`(key: string) => void`	-
`tabBarExtraContent`	Contenido extra al lado de las pestañas	`ReactNode`	-
`children`	Contenido del cuerpo de la tarjeta	`ReactNode`	-
`className`	Clases CSS adicionales	`string`	-
`bodyClassName`	Clases CSS adicionales para el elemento card-body	`string`	-
`style`	Estilos en línea	`CSSProperties`	-

`Card.Meta`

Propiedad	Descripción	Tipo	Predeterminado
`avatar`	Elemento de avatar o icono	`ReactNode`	-
`title`	Contenido del título	`ReactNode`	-
`description`	Contenido de descripción	`ReactNode`	-

`Card.Grid`

Propiedad	Descripción	Tipo	Predeterminado
`hoverable`	Agregar efecto hover	`boolean`	`false`
`children`	Contenido de celda de cuadrícula	`ReactNode`	-

`CardTabItem`

Propiedad	Descripción	Tipo	Predeterminado
`key`	Identificador único de pestaña	`string`	-
`label`	Contenido de etiqueta de pestaña	`ReactNode`	-
`disabled`	Deshabilitar la pestaña	`boolean`	`false`

Accesibilidad

La estructura de la tarjeta usa HTML semántico
La navegación por pestañas usa roles y estados ARIA apropiados
El estado de carga proporciona retroalimentación visual
Los estados de foco son visibles para elementos interactivos