Card

Install

npx ghostcn@1.4.0 add card --skip-existing

Usage

Use body for escaped text, or a trusted Handlebars partial block for rich template content. See Compose publication blocks for a nested button example.

{{> "components/card"
    heading="From the editor"
    description="A note about this issue."
    body="Thanks for reading."
}}

Component options

Parameter	Behavior
`variant`	Visual treatment; unknown values fall back to default. Values: `default`, `secondary`, `outline`. Default: `default`.
`size`	Component scale; unknown values fall back to default. Values: `sm`, `default`, `lg`. Default: `default`.
`heading`	Optional card heading (h3).
`description`	Optional introductory text.
`body`	Escaped text body when called as an ordinary partial.
`footer`	Optional escaped footer text.

Customize this instance

{{> "components/card"
    heading="From the editor"
    description="A note about this issue."
    body="Thanks for reading."
    class="rounded-2xl bg-card text-card-foreground shadow-sm"
}}

Styling parameters

Parameter	Target
`class`	Component root — `.ghcn-ui-card`
`titleClass`	`.ghcn-ui-card__title`
`descriptionClass`	`.ghcn-ui-card__description`
`contentClass`	`.ghcn-ui-card__content`
`footerClass`	`.ghcn-ui-card__footer`

Styling parameters affect only elements that render. See Style component instances for specificity, dark mode, and preserving customizations.

Installed files

partials/components/card.hbs
assets/css/components/card.css

View the registry source

InstallCopy Anchor Link

UsageCopy Anchor Link

Component optionsCopy Anchor Link

Customize this instanceCopy Anchor Link

Styling parametersCopy Anchor Link