---
title: Layer Card
description: Displays a card with a layered visual treatment for navigation, summaries, or feature highlights.
sidebar:
  order: 20
---

import {
  Demo1,
  Demo2,
  Demo3,
  Demo4,
  Demo5,
  Demo6,
  Demo7,
  Demo8,
} from "./layer-card.demos";

[Source Code](https://github.com/ilhajs/areia/blob/main/packages/areia/src/components/layer-card/index.ts)

<Preview
  code={
    'import { ilha } from "ilha";\nimport { ArrowRight } from "lucide";\nimport { Button, Icon, LayerCard } from "areia";\n\nexport default ilha.render(() => (\n  <div class="w-full max-w-md">\n    <LayerCard>\n      <LayerCard.Title>Next Steps</LayerCard.Title>\n      <LayerCard.Content>\n        <div class="flex items-center justify-between gap-4">\n          <div class="flex flex-col gap-1">\n            <h3 class="font-medium">Get started with Areia</h3>\n            <p class="text-sm text-areia-subtle">\n              Learn how to install and use the component\n              library.\n            </p>\n          </div>\n          <Button\n            variant="ghost"\n            shape="square"\n            icon={<Icon icon={ArrowRight} />}\n            aria-label="Open guide"\n          />\n        </div>\n      </LayerCard.Content>\n    </LayerCard>\n  </div>\n));'
  }
  lang="tsx"
>
  <Demo1 client:load />
</Preview>

## Import

```ts
import { LayerCard } from "areia";
```

## Usage

Use `LayerCard.Title` for the elevated title row and `LayerCard.Content` for the main surface.

<Preview
  code={
    'import { ilha } from "ilha";\nimport { LayerCard } from "areia";\n\nexport default ilha.render(() => (\n  <div class="w-full max-w-md">\n    <LayerCard>\n      <LayerCard.Title>Documentation</LayerCard.Title>\n      <LayerCard.Content>\n        <h3 class="font-medium">Component guide</h3>\n        <p class="text-sm text-areia-subtle">\n          Learn how to use Areia components.\n        </p>\n      </LayerCard.Content>\n    </LayerCard>\n  </div>\n));'
  }
  lang="tsx"
>
  <Demo2 client:load />
</Preview>

`LayerCard` also supports a simple surface-style mode. Render content directly inside `LayerCard` when you do not need a secondary header row.

<Preview
  code={
    'import { ilha } from "ilha";\nimport { LayerCard } from "areia";\n\nexport default ilha.render(() => (\n  <div class="w-full max-w-md">\n    <LayerCard class="p-4">\n      <h3 class="font-medium">Quick start guide</h3>\n      <p class="text-sm text-areia-subtle">\n        Learn how to install and configure Areia.\n      </p>\n    </LayerCard>\n  </div>\n));'
  }
  lang="tsx"
>
  <Demo3 client:load />
</Preview>

## Examples

### Basic Card

<Preview
  code={
    'import { ilha } from "ilha";\nimport { LayerCard } from "areia";\n\nexport default ilha.render(() => (\n  <div class="w-full max-w-md">\n    <LayerCard>\n      <LayerCard.Title>Getting Started</LayerCard.Title>\n      <LayerCard.Content>\n        <h3 class="font-medium">Quick start guide</h3>\n        <p class="text-sm text-areia-subtle">\n          A short walkthrough for new users.\n        </p>\n      </LayerCard.Content>\n    </LayerCard>\n  </div>\n));'
  }
  lang="tsx"
>
  <Demo4 client:load />
</Preview>

### Surface-style Card

For simple card containers, render content directly inside `LayerCard` without `LayerCard.Content`.

<Preview
  code={
    'import { ilha } from "ilha";\nimport { LayerCard } from "areia";\n\nexport default ilha.render(() => (\n  <div class="w-full max-w-md">\n    <LayerCard class="p-4">\n      <h3 class="font-medium">Quick start guide</h3>\n      <p class="text-sm text-areia-subtle">\n        Build consistent interfaces with reusable primitives.\n      </p>\n    </LayerCard>\n  </div>\n));'
  }
  lang="tsx"
>
  <Demo5 client:load />
</Preview>

### Multiple Cards

<Preview
  code={
    'import { ilha } from "ilha";\nimport { Boxes, Code2 } from "lucide";\nimport { Icon, LayerCard } from "areia";\n\nexport default ilha.render(() => (\n  <div class="grid w-full max-w-2xl gap-3 sm:grid-cols-2">\n    <LayerCard>\n      <LayerCard.Title>\n        <Icon icon={Boxes} class="size-4" />\n        <span>Components</span>\n      </LayerCard.Title>\n      <LayerCard.Content>\n        <h3 class="font-medium">Browse components</h3>\n        <p class="text-sm text-areia-subtle">\n          Explore every available UI primitive.\n        </p>\n      </LayerCard.Content>\n    </LayerCard>\n    <LayerCard>\n      <LayerCard.Title>\n        <Icon icon={Code2} class="size-4" />\n        <span>Examples</span>\n      </LayerCard.Title>\n      <LayerCard.Content>\n        <h3 class="font-medium">View examples</h3>\n        <p class="text-sm text-areia-subtle">\n          Copy patterns for common product screens.\n        </p>\n      </LayerCard.Content>\n    </LayerCard>\n  </div>\n));'
  }
  lang="tsx"
>
  <Demo6 client:load />
</Preview>

### Toolbar Card

Layer cards work well for compact toolbars and summaries.

<Preview
  code={
    'import { ilha } from "ilha";\nimport { Badge, Input, LayerCard } from "areia";\n\nexport default ilha.render(() => (\n  <div class="w-full max-w-2xl">\n    <LayerCard>\n      <LayerCard.Title>\n        <span>Subrequests</span>\n        <Badge variant="neutral">128</Badge>\n      </LayerCard.Title>\n      <LayerCard.Content>\n        <div class="flex flex-col gap-3">\n          <div class="flex items-center gap-2">\n            <Input\n              size="sm"\n              placeholder="Search origins..."\n              aria-label="Search origins"\n              class="min-w-0 flex-1"\n            />\n            <Badge variant="success">2xx</Badge>\n            <Badge variant="warning">4xx</Badge>\n          </div>\n          <div class="grid grid-cols-3 gap-2 text-sm">\n            <span class="font-medium">Origin</span>\n            <span class="font-medium">Requests</span>\n            <span class="font-medium">Duration</span>\n            <span class="text-areia-subtle">\n              api.example.com\n            </span>\n            <span>82</span>\n            <span>120ms</span>\n            <span class="text-areia-subtle">\n              cdn.example.com\n            </span>\n            <span>46</span>\n            <span>48ms</span>\n          </div>\n        </div>\n      </LayerCard.Content>\n    </LayerCard>\n  </div>\n));'
  }
  lang="tsx"
>
  <Demo7 client:load />
</Preview>

### Test Attributes

`LayerCard.Content` and `LayerCard.Title` accept standard HTML attributes, including `data-testid`.

<Preview
  code={
    'import { ilha } from "ilha";\nimport { LayerCard } from "areia";\n\nexport default ilha.render(() => (\n  <div class="w-full max-w-md">\n    <LayerCard>\n      <LayerCard.Title data-testid="layer-card-title">\n        Getting Started\n      </LayerCard.Title>\n      <LayerCard.Content data-testid="layer-card-content">\n        <h3 class="font-medium">Quick start guide</h3>\n        <p class="text-sm text-areia-subtle">\n          A short walkthrough for new users.\n        </p>\n      </LayerCard.Content>\n    </LayerCard>\n  </div>\n));'
  }
  lang="tsx"
>
  <Demo8 client:load />
</Preview>

## API Reference

### LayerCard

Extends native `div` attributes.

| Prop        | Type      | Default | Description                                             |
| ----------- | --------- | ------- | ------------------------------------------------------- |
| `children`  | `unknown` | -       | Card content. Use direct content or section components. |
| `class`     | `string`  | -       | Additional CSS classes merged with generated classes.   |
| `className` | `string`  | -       | Alias for `class`.                                      |

### LayerCard.Content

Extends native `div` attributes.

| Prop        | Type      | Default | Description                                           |
| ----------- | --------- | ------- | ----------------------------------------------------- |
| `children`  | `unknown` | -       | Main card content.                                    |
| `class`     | `string`  | -       | Additional CSS classes merged with generated classes. |
| `className` | `string`  | -       | Alias for `class`.                                    |

### LayerCard.Title

Extends native `div` attributes.

| Prop        | Type      | Default | Description                                           |
| ----------- | --------- | ------- | ----------------------------------------------------- |
| `children`  | `unknown` | -       | Title, heading, or lightweight metadata content.      |
| `class`     | `string`  | -       | Additional CSS classes merged with generated classes. |
| `className` | `string`  | -       | Alias for `class`.                                    |

## Design Guidelines

### When to Use LayerCard

- Use layered cards for navigation items, feature highlights, and summary cards with a distinct header row.
- Use surface-style cards for simple containers where a header row is unnecessary.
- Keep the title layer short: labels, categories, icons, or lightweight metadata work best.

### Composition

- Put high-emphasis content and actions in `LayerCard.Content`.
- Put titles, category labels, or supporting context in `LayerCard.Title`.
- Use direct `children` plus padding classes for plain surface cards.

### Accessibility

- Use semantic headings inside card content when the card introduces a section.
- If the entire card is clickable, make the interactive element clear and keyboard accessible.
- Keep action buttons labeled with visible text or `aria-label`.