# CardHeader

> `CardHeader` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

Source: https://ui.jcsoftdev.com/docs/components/card-header

`CardHeader` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

## Import

```ts
import { CardHeader } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/card`.

## Usage

```tsx
<CardHeader>
  <>
          <CardHeader>
            <h3 className="m-0 font-semibold text-[14px]">Resumen del día</h3>
          </CardHeader>
          <CardBody>
            <p className="m-0 text-ink-2 text-[13px]">
              12 citas atendidas, S/ 840 en ingresos y 2 clientes nuevos.
            </p>
          </CardBody>
          <CardFooter>Actualizado hace 5 min</CardFooter>
        </>
</CardHeader>
```

## Props

This component declares no props of its own.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-card--default)
- [Body Only](/storybook/?path=/story/containers-card--body-only)
- [With Actions](/storybook/?path=/story/containers-card--with-actions)

## Source

`packages/ui/src/containers/card/card.tsx`