Card: Semantics

Every part takes a render prop, so a card can be an <article> with a real heading, header and footer.

Rendered as an article

Every part accepts render for real semantics.

import { Button } from "@/components/ui/button"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export function CardSemantics() {
  return (
    <Card render={<article />} className="w-full max-w-sm">
      <CardHeader render={<header />}>
        <CardTitle render={<h3 />}>Rendered as an article</CardTitle>
        <CardDescription render={<p />}>
          Every part accepts render for real semantics.
        </CardDescription>
      </CardHeader>
      <CardFooter render={<footer />}>
        <Button variant="outline">Read more</Button>
      </CardFooter>
    </Card>
  )
}

Add this example

This adds the example as components/examples/card/semantics.tsx, together with the Card component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/card-semantics.json

To add only the component, follow the Card installation.

Props in this example

The Card props this example sets, from the API reference.

Card

Prop	Type	Default
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

CardHeader

Prop	Type	Default
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

CardTitle

Prop	Type	Default
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

CardDescription

Prop	Type	Default
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

CardFooter

Prop	Type	Default
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Every prop is in the Card API reference.

More Card examples

See them all, with keyboard support and accessibility notes, on the Card page.