Card

Displays a callout for user attention.

Your Orders
Introducing Our Dynamic Orders Dashboard for Seamless Management and Insightful Analysis. 
<Card className="w-[350px] mb-4">
  <CardHeader className="pb-3">
    <CardTitle>Your Orders</CardTitle>
    <CardDescription className="max-w-lg text-balance leading-relaxed">
      Introducing Our Dynamic Orders Dashboard for Seamless Management and
      Insightful Analysis.
    </CardDescription>
  </CardHeader>
  <CardFooter>
    <Button>Create New Order</Button>
  </CardFooter>
</Card>

Installation

uvx --from basic-components components add card
pipx run --spec basic-components components add card
pip install basic-components && components add card
  • Copy Card components below to your local environment
  • Place them in the components/ui/card directory in your project
  • Configure your jinja environment for JinjaX
  • Add the cn() helper function to your global jinja environment

Usage

<Card className="w-[350px] mb-4">
  <CardHeader className="pb-3">
    <CardTitle>Your Orders</CardTitle>
    <CardDescription className="max-w-lg text-balance leading-relaxed">
      Introducing Our Dynamic Orders Dashboard for Seamless Management and
      Insightful Analysis.
    </CardDescription>
  </CardHeader>
  <CardFooter>
    <Button>Create New Order</Button>
  </CardFooter>
</Card>

Code

{#def
    className: str = ""
#}

<div
    class="rounded-lg border border-zinc-200 bg-white text-zinc-950 shadow-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50 {{ className }}"
    {{ attrs.render() }}
>
  {{ content }}
</div>
{#def
    className: str = ""
#}
<div class="p-6 pt-0 {{ className }}" {{ attrs.render() }}>{{ content }}</div>
{#def
    className: str = ""
#}
<div class="text-sm text-zinc-500 dark:text-zinc-400 {{ className }}" {{ attrs.render() }}>
  {{ content }}
</div>
{#def
    className: str = ""
#}
<div class="flex items-center p-6 pt-0 {{ className }}" {{ attrs.render() }}>{{ content }}</div>
{#def
    className: str = ""
#}
<div class="flex flex-col space-y-1.5 p-6 {{ className }}"
        {{ attrs.render() }}>{{ content }}</div>
{#def
    className: str = ""
#}
<div class="text-2xl font-semibold leading-none tracking-tight {{ className }}" {{ attrs.render() }}>
  {{ content }}
</div>

Examples

Example

Create project
Deploy your new project in one-click.
Next.js
SvelteKit
Astro
Nuxt.js 
<Card class="w-[350px]">
    <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
    </CardHeader>
    <CardContent>
            <div class="grid w-full items-center gap-4">
                <div class="flex flex-col space-y-1.5">
                    <Label htmlFor="name">Name</Label>
                    <Input id="name" placeholder="Name of your project" />
                </div>
                <div class="flex flex-col space-y-1.5">
                    <Label htmlFor="framework">Framework</Label>
                    <Select>
                        <SelectTrigger id="framework">
                            <SelectValue placeholder="Select" />
                        </SelectTrigger>
                        <SelectContent className="w-64">
                            <SelectItem value="next">Next.js</SelectItem>
                            <SelectItem value="sveltekit">SvelteKit</SelectItem>
                            <SelectItem value="astro">Astro</SelectItem>
                            <SelectItem value="nuxt">Nuxt.js</SelectItem>
                        </SelectContent>
                    </Select>
                </div>
            </div>
    </CardContent>
    <CardFooter className="flex justify-between">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
    </CardFooter>
</Card>