Card

Componente de card flexível para exibir conteúdo agrupado com vários layouts.

Importação

import { Card } from 'asterui'

Exemplos

Card Básico

Card simples com título e conteúdo.

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

Com Borda

Card com borda sólida em vez 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

Com Imagem de Capa

Card com imagem de capa acima do conteúdo.

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

Com Ações

Card com botões de ação na 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 card: 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

Tamanhos

Tamanhos de card de xs a lg com padding variável.

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

Conteúdo Extra

Adicionar conteúdo extra no cabeçalho do card com a 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

Layout Meta

Layout integrado de avatar, título e descrição.

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 independente para posicionamento flexível.

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

Card com efeito de sombra ao passar o 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 Carregamento

Estado de carregamento de esqueleto enquanto o conteúdo carrega.

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

Imagem Completa

Conteúdo sobreposto na imagem de capa.

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

Layout Lateral

Layout horizontal com imagem na 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

Card Interno

Cards aninhados com distinção de fundo 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

Com Abas

Card com navegação de conteúdo por abas.

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

Grade de Card

Layout de grade dentro de cards com células 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`

Propriedade	Descrição	Tipo	Padrão
`title`	Título do card	`ReactNode`	-
`extra`	Conteúdo no canto superior direito do cabeçalho	`ReactNode`	-
`cover`	Elemento de imagem de capa	`ReactNode`	-
`actions`	Botões de ação na parte inferior	`ReactNode`	-
`size`	Tamanho do card	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`variant`	Variante de estilo do card	`'shadow' \| 'border' \| 'dash' \| 'borderless'`	`'shadow'`
`type`	Estilo de card interno para aninhamento	`'inner'`	-
`side`	Layout horizontal com imagem lateral	`boolean`	`false`
`imageFull`	Conteúdo sobreposto na imagem de capa	`boolean`	`false`
`actionsJustify`	Alinhamento de ações	`'start' \| 'center' \| 'end'`	`'end'`
`loading`	Mostrar estado de carregamento de esqueleto	`boolean`	`false`
`hoverable`	Adicionar efeito de sombra ao passar o mouse	`boolean`	`false`
`avatar`	Avatar para layout meta	`ReactNode`	-
`description`	Descrição para layout meta	`ReactNode`	-
`tabList`	Itens de aba para abas de card	`CardTabItem[]`	-
`activeTabKey`	Chave de aba ativa (controlada)	`string`	-
`defaultActiveTabKey`	Chave de aba ativa padrão	`string`	-
`onTabChange`	Callback de mudança de aba	`(key: string) => void`	-
`tabBarExtraContent`	Conteúdo extra ao lado das abas	`ReactNode`	-
`children`	Conteúdo do corpo do card	`ReactNode`	-
`className`	Classes CSS adicionais	`string`	-
`bodyClassName`	Classes CSS adicionais para o elemento card-body	`string`	-
`style`	Estilos inline	`CSSProperties`	-

`Card.Meta`

Propriedade	Descrição	Tipo	Padrão
`avatar`	Elemento de avatar ou ícone	`ReactNode`	-
`title`	Conteúdo do título	`ReactNode`	-
`description`	Conteúdo da descrição	`ReactNode`	-

`Card.Grid`

Propriedade	Descrição	Tipo	Padrão
`hoverable`	Adicionar efeito hover	`boolean`	`false`
`children`	Conteúdo da célula da grade	`ReactNode`	-

`CardTabItem`

Propriedade	Descrição	Tipo	Padrão
`key`	Identificador único da aba	`string`	-
`label`	Conteúdo do rótulo da aba	`ReactNode`	-
`disabled`	Desabilitar a aba	`boolean`	`false`

Acessibilidade

Estrutura de card usa HTML semântico
Navegação por abas usa roles e states ARIA apropriados
Estado de carregamento fornece feedback visual
Estados de foco são visíveis para elementos interativos