Card

Composant carte flexible pour afficher du contenu groupé avec diverses mises en page.

Importation

import { Card } from 'asterui'

Exemples

Carte basique

Carte simple avec titre et contenu.

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

Avec bordure

Carte avec bordure solide au lieu d'une ombre.

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

Avec image de couverture

Carte avec image de couverture au-dessus du contenu.

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

Avec actions

Carte avec boutons d'action en bas.

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

Différentes variantes de style de carte : 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

Tailles

Tailles de carte de xs à lg avec padding 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

Contenu extra

Ajouter du contenu extra dans l'en-tête de la carte avec 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

Mise en page méta

Mise en page intégrée avatar, titre et description.

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

Composant Card.Meta

Composant méta autonome pour positionnement 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

Survol

Carte avec effet d'ombre au survol.

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

État de chargement

État de chargement squelette pendant le chargement du contenu.

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

Image complète

Le contenu se superpose sur l'image de couverture.

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

Mise en page latérale

Mise en page horizontale avec image sur le côté.

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

Carte interne

Cartes imbriquées avec distinction d'arrière-plan subtile.

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

Avec onglets

Carte avec navigation de contenu par onglets.

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

Grille de carte

Mise en page en grille à l'intérieur des cartes avec cellules survolables.

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`

Propriété	Description	Type	Défaut
`title`	Titre de la carte	`ReactNode`	-
`extra`	Contenu en haut à droite de l’en-tête	`ReactNode`	-
`cover`	Élément image de couverture	`ReactNode`	-
`actions`	Boutons d’action en bas	`ReactNode`	-
`size`	Taille de la carte	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`variant`	Variante de style de carte	`'shadow' \| 'border' \| 'dash' \| 'borderless'`	`'shadow'`
`type`	Style de carte interne pour l’imbrication	`'inner'`	-
`side`	Mise en page horizontale avec image latérale	`boolean`	`false`
`imageFull`	Le contenu se superpose sur l’image de couverture	`boolean`	`false`
`actionsJustify`	Alignement des actions	`'start' \| 'center' \| 'end'`	`'end'`
`loading`	Afficher l’état de chargement squelette	`boolean`	`false`
`hoverable`	Ajouter un effet d’ombre au survol	`boolean`	`false`
`avatar`	Avatar pour la mise en page méta	`ReactNode`	-
`description`	Description pour la mise en page méta	`ReactNode`	-
`tabList`	Éléments d’onglets pour les onglets de carte	`CardTabItem[]`	-
`activeTabKey`	Clé d’onglet actif (contrôlé)	`string`	-
`defaultActiveTabKey`	Clé d’onglet actif par défaut	`string`	-
`onTabChange`	Callback de changement d’onglet	`(key: string) => void`	-
`tabBarExtraContent`	Contenu extra à côté des onglets	`ReactNode`	-
`children`	Contenu du corps de la carte	`ReactNode`	-
`className`	Classes CSS supplémentaires	`string`	-
`bodyClassName`	Classes CSS supplémentaires pour l’élément card-body	`string`	-
`style`	Styles inline	`CSSProperties`	-

`Card.Meta`

Propriété	Description	Type	Défaut
`avatar`	Élément avatar ou icône	`ReactNode`	-
`title`	Contenu du titre	`ReactNode`	-
`description`	Contenu de la description	`ReactNode`	-

`Card.Grid`

Propriété	Description	Type	Défaut
`hoverable`	Ajouter un effet de survol	`boolean`	`false`
`children`	Contenu de la cellule de grille	`ReactNode`	-

`CardTabItem`

Propriété	Description	Type	Défaut
`key`	Identifiant unique de l’onglet	`string`	-
`label`	Contenu du libellé de l’onglet	`ReactNode`	-
`disabled`	Désactiver l’onglet	`boolean`	`false`

Accessibilité

La structure de la carte utilise du HTML sémantique
La navigation par onglets utilise les rôles et états ARIA appropriés
L’état de chargement fournit un retour visuel
Les états de focus sont visibles pour les éléments interactifs