Layer Card - Kumo

Next Steps

Get started with Kumo

import { LayerCard, Button } from "@cloudflare/kumo";
import { ArrowRightIcon } from "@phosphor-icons/react";

export function LayerCardDemo() {
  return (
    <LayerCard>
      <LayerCard.Secondary className="flex items-center justify-between">
        <div>Next Steps</div>
        <Button
          variant="ghost"
          size="sm"
          shape="square"
          aria-label="Go to next steps"
        >
          <ArrowRightIcon size={16} />
        </Button>
      </LayerCard.Secondary>

      <LayerCard.Primary>Get started with Kumo</LayerCard.Primary>
    </LayerCard>
  );
}

Installation

Barrel

import { LayerCard } from "@cloudflare/kumo";

Granular

import { LayerCard } from "@cloudflare/kumo/components/layer-card";

Usage

import { LayerCard } from "@cloudflare/kumo";

export default function Example() {
  return (
    <LayerCard className="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.

import { LayerCard } from "@cloudflare/kumo";

export default function Example() {
  return (
    <LayerCard className="w-[250px] p-4">
      Learn how to use Kumo components
    </LayerCard>
  );
}

Examples

Basic Card

Getting Started

Quick start guide for new users

import { LayerCard } from "@cloudflare/kumo";

export function LayerCardBasicDemo() {
  return (
    <LayerCard className="w-[250px]">
      <LayerCard.Secondary>Getting Started</LayerCard.Secondary>
      <LayerCard.Primary>
        <p className="text-sm text-kumo-subtle">
          Quick start guide for new users
        </p>
      </LayerCard.Primary>
    </LayerCard>
  );
}

Surface-style Card

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

Quick start guide for new users

import { LayerCard } from "@cloudflare/kumo";

export function LayerCardSurfaceDemo() {
  return (
    <LayerCard className="w-[250px] p-4">
      <p className="text-sm text-kumo-subtle">Quick start guide for new users</p>
    </LayerCard>
  );
}

Multiple Cards

Components

Browse all components

Examples

View code examples

import { LayerCard } from "@cloudflare/kumo";

export function LayerCardMultipleDemo() {
  return (
    <div className="flex gap-4">
      <LayerCard className="w-[200px]">
        <LayerCard.Secondary>Components</LayerCard.Secondary>
        <LayerCard.Primary>
          <p className="text-sm">Browse all components</p>
        </LayerCard.Primary>
      </LayerCard>
      <LayerCard className="w-[200px]">
        <LayerCard.Secondary>Examples</LayerCard.Secondary>
        <LayerCard.Primary>
          <p className="text-sm">View code examples</p>
        </LayerCard.Primary>
      </LayerCard>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
render	`ReactNode`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
children	`ReactNode`	-	-
className	`string`	-	-
id	`string`	-	-
lang	`string`	-	-
title	`string`	-	-