---
title: Layer Card
description: "Displays a card with a layered visual treatment for navigation, summaries, or feature highlights."
order: 19
tags: [components]
---

import { Preview } from "$lib/components/preview";
import { Badge, Button, Icon, Input, LayerCard } from "areia";
import { ArrowRight, Boxes, Code2 } from "lucide";

# Layer Card

Displays a card with a layered visual treatment for navigation, summaries, or feature highlights.

[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"
>
  <div class="w-full max-w-md">
    <LayerCard>
      <LayerCard.Title>Next Steps</LayerCard.Title>
      <LayerCard.Content>
        <div class="flex items-center justify-between gap-4">
          <div class="flex flex-col gap-1">
            <h3 class="font-medium">Get started with Areia</h3>
            <p class="text-sm text-areia-subtle">
              Learn how to install and use the component
              library.
            </p>
          </div>
          <Button
            variant="ghost"
            shape="square"
            icon={<Icon icon={ArrowRight} />}
            aria-label="Open guide"
          />
        </div>
      </LayerCard.Content>
    </LayerCard>
  </div>
</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"
>
  <div class="w-full max-w-md">
    <LayerCard>
      <LayerCard.Title>Documentation</LayerCard.Title>
      <LayerCard.Content>
        <h3 class="font-medium">Component guide</h3>
        <p class="text-sm text-areia-subtle">
          Learn how to use Areia components.
        </p>
      </LayerCard.Content>
    </LayerCard>
  </div>
</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"
>
  <div class="w-full max-w-md">
    <LayerCard class="p-4">
      <h3 class="font-medium">Quick start guide</h3>
      <p class="text-sm text-areia-subtle">
        Learn how to install and configure Areia.
      </p>
    </LayerCard>
  </div>
</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"
>
  <div class="w-full max-w-md">
    <LayerCard>
      <LayerCard.Title>Getting Started</LayerCard.Title>
      <LayerCard.Content>
        <h3 class="font-medium">Quick start guide</h3>
        <p class="text-sm text-areia-subtle">
          A short walkthrough for new users.
        </p>
      </LayerCard.Content>
    </LayerCard>
  </div>
</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"
>
  <div class="w-full max-w-md">
    <LayerCard class="p-4">
      <h3 class="font-medium">Quick start guide</h3>
      <p class="text-sm text-areia-subtle">
        Build consistent interfaces with reusable primitives.
      </p>
    </LayerCard>
  </div>
</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"
>
  <div class="grid w-full max-w-2xl gap-3 sm:grid-cols-2">
    <LayerCard>
      <LayerCard.Title>
        <Icon icon={Boxes} class="size-4" />
        <span>Components</span>
      </LayerCard.Title>
      <LayerCard.Content>
        <h3 class="font-medium">Browse components</h3>
        <p class="text-sm text-areia-subtle">
          Explore every available UI primitive.
        </p>
      </LayerCard.Content>
    </LayerCard>
    <LayerCard>
      <LayerCard.Title>
        <Icon icon={Code2} class="size-4" />
        <span>Examples</span>
      </LayerCard.Title>
      <LayerCard.Content>
        <h3 class="font-medium">View examples</h3>
        <p class="text-sm text-areia-subtle">
          Copy patterns for common product screens.
        </p>
      </LayerCard.Content>
    </LayerCard>
  </div>
</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"
>
  <div class="w-full max-w-2xl">
    <LayerCard>
      <LayerCard.Title>
        <span>Subrequests</span>
        <Badge variant="neutral">128</Badge>
      </LayerCard.Title>
      <LayerCard.Content>
        <div class="flex flex-col gap-3">
          <div class="flex items-center gap-2">
            <Input
              size="sm"
              placeholder="Search origins..."
              aria-label="Search origins"
              class="min-w-0 flex-1"
            />
            <Badge variant="success">2xx</Badge>
            <Badge variant="warning">4xx</Badge>
          </div>
          <div class="grid grid-cols-3 gap-2 text-sm">
            <span class="font-medium">Origin</span>
            <span class="font-medium">Requests</span>
            <span class="font-medium">Duration</span>
            <span class="text-areia-subtle">
              api.example.com
            </span>
            <span>82</span>
            <span>120ms</span>
            <span class="text-areia-subtle">
              cdn.example.com
            </span>
            <span>46</span>
            <span>48ms</span>
          </div>
        </div>
      </LayerCard.Content>
    </LayerCard>
  </div>
</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"
>
  <div class="w-full max-w-md">
    <LayerCard>
      <LayerCard.Title data-testid="layer-card-title">
        Getting Started
      </LayerCard.Title>
      <LayerCard.Content data-testid="layer-card-content">
        <h3 class="font-medium">Quick start guide</h3>
        <p class="text-sm text-areia-subtle">
          A short walkthrough for new users.
        </p>
      </LayerCard.Content>
    </LayerCard>
  </div>
</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`.