Layer Card

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

Next Steps

Get started with Areia

Learn how to install and use the component library.

import ilha from "ilha";
import { ArrowRight } from "lucide";
import { Button, Icon, LayerCard } from "areia";

export default ilha.render(() => (
  <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>
));

Import

import { LayerCard } from "areia";

Usage

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

Documentation

Component guide

Learn how to use Areia components.

import ilha from "ilha";
import { LayerCard } from "areia";

export default ilha.render(() => (
  <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>
));

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

Quick start guide

Learn how to install and configure Areia.

import ilha from "ilha";
import { LayerCard } from "areia";

export default ilha.render(() => (
  <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>
));

Examples

Basic Card

Getting Started

Quick start guide

A short walkthrough for new users.

import ilha from "ilha";
import { LayerCard } from "areia";

export default ilha.render(() => (
  <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>
));

Surface-style Card

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

Quick start guide

Build consistent interfaces with reusable primitives.

import ilha from "ilha";
import { LayerCard } from "areia";

export default ilha.render(() => (
  <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>
));

Multiple Cards

Components

Browse components

Explore every available UI primitive.

Examples

View examples

Copy patterns for common product screens.

import ilha from "ilha";
import { Boxes, Code2 } from "lucide";
import { Icon, LayerCard } from "areia";

export default ilha.render(() => (
  <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>
));

Layer cards work well for compact toolbars and summaries.

Subrequests128

2xx4xx

OriginRequestsDuration

api.example.com

82120ms

cdn.example.com

4648ms

import ilha from "ilha";
import { Badge, Input, LayerCard } from "areia";

export default ilha.render(() => (
  <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>
));

Test Attributes

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

Getting Started

Quick start guide

A short walkthrough for new users.

import ilha from "ilha";
import { LayerCard } from "areia";

export default ilha.render(() => (
  <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>
));

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.