DocsComponentsCard

Card

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

7 files

<pb-ui.card class="w-full max-w-sm">
  <pb-ui.card-header>
    <pb-ui.card-title>Create project</pb-ui.card-title>
    <pb-ui.card-description>Deploy your new project in one click.</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">Name</label>
      <input id="name" placeholder="My 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">Cancel</button>
    <button class="h-9 rounded-md bg-primary px-4 text-sm text-primary-foreground">Deploy</button>
  </pb-ui.card-footer>
</pb-ui.card>

Installation

pyblade-ui add card

Copy these files into your project

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>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tags <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> are available in all your 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>

Examples

With an 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>You have 3 unread messages.</pb-ui.card-description>
    <pb-ui.card-action><a href="#" class="text-sm underline-offset-4 hover:underline">View all</a></pb-ui.card-action>
  </pb-ui.card-header>
  <pb-ui.card-content class="text-sm text-muted-foreground">Your subscription expires in 3 days.</pb-ui.card-content>
</pb-ui.card>

‹ Chart Item ›