# @askrjs/themes/card

> Published API exports for @askrjs/themes/card.

Source: [https://askrjs.com/docs/reference/api/themes/card](https://askrjs.com/docs/reference/api/themes/card)

Status: stable. Packages: @askrjs/themes/card.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 16 exports from the declarations shipped by @askrjs/themes.

### `Card`

```ts
Card: (props: CardProps) => JSX.Element
```

Root card container; applies the `card` class and an optional `variant` modifier.

### `CardAction`

```ts
CardAction: (props: CardActionProps) => JSX.Element
```

Renders an action/control region of a {@link Card}, typically positioned alongside the header.

### `CardActionProps`

```ts
CardActionProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link CardAction } component.

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `CardContent`

```ts
CardContent: (props: CardContentProps) => JSX.Element
```

Renders the main content region of a {@link Card}.

### `CardContentProps`

```ts
CardContentProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link CardContent } component.

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `CardDescription`

```ts
CardDescription: (props: CardDescriptionProps) => JSX.Element
```

Renders a {@link Card}'s supporting description text.

### `CardDescriptionProps`

```ts
CardDescriptionProps: ParagraphProps & {
  children?: unknown;
  ref?: Ref<HTMLParagraphElement>;
}
```

Props for the {@link CardDescription } component.

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLParagraphElement>;

### `CardFooter`

```ts
CardFooter: (props: CardFooterProps) => JSX.Element
```

Renders the footer region of a {@link Card}.

### `CardFooterProps`

```ts
CardFooterProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link CardFooter } component.

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `CardHeader`

```ts
CardHeader: (props: CardHeaderProps) => JSX.Element
```

Renders the header region of a {@link Card}.

### `CardHeaderProps`

```ts
CardHeaderProps: DivProps & {
  children?: unknown;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link CardHeader } component.

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `CardProps`

```ts
CardProps: DivProps & {
  children?: unknown;
  variant?: CardVariant;
  ref?: Ref<HTMLDivElement>;
}
```

Props for the {@link Card } component.

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

- `variant`: variant?: CardVariant | undefined;

### `CardTitle`

```ts
CardTitle: (props: CardTitleProps) => JSX.Element
```

Renders a {@link Card}'s title, defaulting to an `<h3>` (override with `titleAs`).

### `CardTitleHeadingTag`

```ts
CardTitleHeadingTag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
```

Heading tag allowed for a card's title via `titleAs`.

### `CardTitleProps`

```ts
CardTitleProps: HeadingProps & {
  children?: unknown;
  /** Choose the level that follows the surrounding document hierarchy. */
  titleAs?: CardTitleHeadingTag;
  ref?: Ref<HTMLHeadingElement>;
}
```

Props for the {@link CardTitle } component.

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLHeadingElement>;

- `titleAs`: Choose the level that follows the surrounding document hierarchy.

### `CardVariant`

```ts
CardVariant: "default" | "raised"
```

Visual style of a {@link CardProps} card.

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/themes/calendar/index.md) | [Next](https://askrjs.com/docs/reference/api/themes/carousel/index.md)