> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cskn.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Content and display

> Card, List, Avatar, Badge, Divider, StatTile, Accordion, Callout and EmptyState.

## Card

```tsx theme={null}
import { Card } from '@cskn/ui';

<Card>Bordered, padded</Card>
<Card elevated padded={24}>Shadow instead of a border</Card>
```

<ParamField path="elevated" type="boolean">Drop shadow instead of a border.</ParamField>
<ParamField path="padded" type="boolean | number" default="true">Inner padding; `true` is 16 px.</ParamField>

## List

Rows in the style of a native settings screen.

```tsx theme={null}
import { List, ListItem, Avatar, Badge, Icon } from '@cskn/ui';

<List>
  <ListItem leading={<Avatar name="Ada" src={ada.picture} />} title="Ada" subtitle="12 books" onClick={openAda} />
  <ListItem
    leading={<Icon name="star-filled" />}
    title="Favorites"
    trailing={<Badge tone="primary">18</Badge>}
    href="/favorites"
  />
</List>
```

`List` takes `divided` (default `true`). `ListItem` takes:

<ParamField path="title" type="ReactNode" required>Main text.</ParamField>
<ParamField path="subtitle" type="ReactNode">Secondary text.</ParamField>
<ParamField path="leading / trailing" type="ReactNode">Slots at either end.</ParamField>
<ParamField path="onClick" type="() => void">Makes the row a button. A chevron is shown unless you pass `trailing`.</ParamField>
<ParamField path="href" type="string">Makes the row a link.</ParamField>

## Avatar

```tsx theme={null}
<Avatar src={user.picture} name="Ada Lovelace" size={44} />
```

Falls back to initials when there is no image. Props: `src?`, `name?` (initials and alt text), `size?`, `square?`.

## Badge

```tsx theme={null}
<Badge tone="danger">3</Badge>
<Badge tone="success" dot />
```

`tone`: `neutral`, `primary`, `danger`, `success`. `dot` shows a small status dot with no label.

## Divider

```tsx theme={null}
<Divider spacing={12} />
<Divider vertical />
```

## StatTile

```tsx theme={null}
import { Grid, StatTile, Icon } from '@cskn/ui';

<Grid cols={2} gap={12}>
  <StatTile value="128" label="Films" />
  <StatTile value="8.4" label="Average" hint="Last 30 days" adornment={<Icon name="star-filled" size={16} />} />
</Grid>
```

Props: `value`, `label`, `hint?`, `adornment?` (shown top right).

## Accordion

```tsx theme={null}
import { Accordion, AccordionItem } from '@cskn/ui';

<Accordion defaultOpen={['shipping']}>
  <AccordionItem id="shipping" title="Shipping">Ships in two days.</AccordionItem>
  <AccordionItem id="returns" title="Returns">Thirty days, no questions.</AccordionItem>
</Accordion>
```

`Accordion` takes `multiple?` (allow several open) and `defaultOpen?`. `AccordionItem` takes `title` and an optional `id`.

## Callout

An inline message box, for example a form's error summary.

```tsx theme={null}
import { Callout } from '@cskn/ui';

<Callout tone="danger" title="Couldn't save">Check your connection and try again.</Callout>
```

`tone`: `neutral`, `info`, `success`, `warning`, `danger`. `icon` overrides the tone's icon; `null` hides it.

## EmptyState

```tsx theme={null}
import { EmptyState, Button } from '@cskn/ui';

<EmptyState
  icon="image"
  title="Nothing here yet"
  description="Add your first photo to get started."
  action={<Button onClick={add}>Add photo</Button>}
/>
```

`icon` takes an [icon name](/ui/components/icons) or any node.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.