DocsComposantsCard

Card

A container with header, title, description, action, content and footer.

7 fichiers

<pb-ui.card class="w-full max-w-sm">
  <pb-ui.card-header>
    <pb-ui.card-title>Créer un projet</pb-ui.card-title>
    <pb-ui.card-description>Déployez votre nouveau projet en un clic.</pb-ui.card-description>
  </pb-ui.card-header>
  <pb-ui.card-content class="grid gap-4">
    <div class="grid gap-2">
      <label class="text-sm font-medium" for="name">Nom</label>
      <input id="name" placeholder="Mon application" class="h-9 rounded-md border bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50" />
    </div>
  </pb-ui.card-content>
  <pb-ui.card-footer class="flex justify-between">
    <button class="h-9 rounded-md border px-4 text-sm">Annuler</button>
    <button class="h-9 rounded-md bg-primary px-4 text-sm text-primary-foreground">Déployer</button>
  </pb-ui.card-footer>
</pb-ui.card>

Installation

pyblade-ui add card

Copiez ces fichiers dans votre projet

components/ui/card.html

<div data-slot="card" {{ attributes.cn("flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm") }}>{{ slot }}</div>

components/ui/card_header.html

<div data-slot="card-header" {{ attributes.cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6") }}>{{ slot }}</div>

components/ui/card_title.html

<div data-slot="card-title" {{ attributes.cn("leading-none font-semibold") }}>{{ slot }}</div>

components/ui/card_description.html

<div data-slot="card-description" {{ attributes.cn("text-sm text-muted-foreground") }}>{{ slot }}</div>

components/ui/card_action.html

<div data-slot="card-action" {{ attributes.cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end") }}>{{ slot }}</div>

components/ui/card_content.html

<div data-slot="card-content" {{ attributes.cn("px-6") }}>{{ slot }}</div>

components/ui/card_footer.html

<div data-slot="card-footer" {{ attributes.cn("flex items-center px-6 [.border-t]:pt-6") }}>{{ slot }}</div>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

Les balises <pb-ui.card> <pb-ui.card-header> <pb-ui.card-title> <pb-ui.card-description> <pb-ui.card-action> <pb-ui.card-content> <pb-ui.card-footer> sont disponibles dans tous vos templates.

<pb-ui.card>
  <pb-ui.card-header><pb-ui.card-title>Title</pb-ui.card-title></pb-ui.card-header>
  <pb-ui.card-content>Body</pb-ui.card-content>
</pb-ui.card>

Exemples

Avec une action

<pb-ui.card class="w-full max-w-sm">
  <pb-ui.card-header>
    <pb-ui.card-title>Notifications</pb-ui.card-title>
    <pb-ui.card-description>Vous avez 3 messages non lus.</pb-ui.card-description>
    <pb-ui.card-action><a href="#" class="text-sm underline-offset-4 hover:underline">Tout voir</a></pb-ui.card-action>
  </pb-ui.card-header>
  <pb-ui.card-content class="text-sm text-muted-foreground">Votre abonnement expire dans 3 jours.</pb-ui.card-content>
</pb-ui.card>

‹ Chart Item ›