Layer Card
kumo-svelte

Layer Card

A card component with a layered visual effect, perfect for navigation or feature highlights.

Installation

Barrel

import { LayerCard } from 'kumo-svelte';

Granular

import { LayerCard } from 'kumo-svelte/components/layer-card';

Usage

<script lang="ts">import { LayerCard } from "kumo-svelte";</script>    <LayerCard class="w-[250px]">      <LayerCard.Secondary>Documentation</LayerCard.Secondary>      <LayerCard.Primary>Learn how to use Kumo components</LayerCard.Primary>    </LayerCard>
LayerCard also supports a simple surface-style mode for cases where you do not need a secondary header row. In those cases, render content directly inside LayerCard instead of wrapping it in LayerCard.Primary. 
<script lang="ts">import { LayerCard } from "kumo-svelte";</script>    <LayerCard class="w-[250px] p-4">      Learn how to use Kumo components    </LayerCard>

Examples

Basic Card

Surface-style Card

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

Multiple Cards

Filter Toolbar with Small Tabs

Combine Tabs size="sm" with Input size="sm" inside a LayerCard for compact filter toolbars. Both share the same h-6.5 (26px) height.

Test IDs

LayerCard.Primary and LayerCard.Secondary accept all standard HTML attributes, including data-testid for testing.

API Reference

PropTypeDefaultDescription
children Snippet-Child snippet rendered by the component.
class string-Additional classes merged onto the root element.
as string"div"as prop.