T templcn/ui
Componentcard

Card

Displays a card with header, content, and footer.

Preview

Displays a card with header, content, and footer.

Create project
Deploy your new project in one-click.

Installation

Add this component to your project using the CLI.

templcn add card

Usage

1. Import the component in your Go or templ file:

import "your-module/ui"

2. Use the component in your template:

@ui.Card(ui.DOMProps{Class: "w-[350px]"}) {
  @ui.CardHeader(ui.DOMProps{}) {
    @ui.CardTitle(ui.DOMProps{}) { Create project }
    @ui.CardDescription(ui.DOMProps{}) { Deploy your new project in one-click. }
  }
  @ui.CardContent(ui.DOMProps{}) {
    <p class="text-sm text-muted-foreground">Your project will be deployed immediately.</p>
  }
  @ui.CardFooter(ui.DOMProps{Class: "flex justify-between"}) {
    @ui.Button(ui.ButtonProps{Variant: ui.ButtonVariantOutline, Label: "Cancel"})
    @ui.Button(ui.ButtonProps{Label: "Deploy"})
  }
}

Composition

Use these parts together to build the component.

Card
├── CardHeader
├── CardTitle
├── CardDescription
├── CardContent
├── CardFooter
├── Button

Examples

Named examples and common variations.

Default

A card with header, content, and footer actions.

Create project
Deploy your new project in one-click.
API Reference
PropTypeDefaultDescription
DOMProps.Classstring""Additional CSS classes applied to the card root.
View source
package ui

import (
	"context"
	"io"

	"github.com/a-h/templ"
)

func cardWrapper(props DOMProps, slot, className string) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		return renderElement(ctx, w, "div", attrsFromDOMProps(props, slot, className), templ.GetChildren(ctx))
	})
}

func Card(props DOMProps) templ.Component {
	return cardWrapper(props, "card", "flex min-w-0 flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm")
}
func CardHeader(props DOMProps) templ.Component {
	return cardWrapper(props, "card-header", "@container/card-header grid min-w-0 auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6")
}
func CardTitle(props DOMProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		return renderElement(ctx, w, "div", attrsFromDOMProps(props, "card-title", "leading-none font-semibold"), templ.GetChildren(ctx))
	})
}
func CardDescription(props DOMProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		return renderElement(ctx, w, "div", attrsFromDOMProps(props, "card-description", "text-muted-foreground text-sm"), templ.GetChildren(ctx))
	})
}
func CardAction(props DOMProps) templ.Component {
	return cardWrapper(props, "card-action", "col-start-2 row-span-2 row-start-1 self-start justify-self-end")
}
func CardContent(props DOMProps) templ.Component {
	return cardWrapper(props, "card-content", "min-w-0 px-6")
}
func CardFooter(props DOMProps) templ.Component {
	return cardWrapper(props, "card-footer", "flex items-center px-6 [.border-t]:pt-6")
}
Next: Carousel