Components/Containers

Card

A surface with hierarchy. White, a hairline border, a 12px radius — no shadow.

Default

A surface with a hairline border and a quiet corner radius.

With content

Dashboard

Four active projects.

Props

PropTypeDefaultDescription

childrenReactNode—Card content

classNamestring—Optional class hook

Installation

Paste the source into components/card.tsx. No dependencies required.

import type { ReactNode } from 'react';

interface CardProps {
  children: ReactNode;
  className?: string;
}

export function Card({ children, className }: CardProps) {
  return (
    <div
      className={className}
      style={{
        backgroundColor: 'var(--color-surface)',
        border: '0.5px solid var(--color-border)',
        borderRadius: 'var(--radius-lg)',
        padding: '24px',
      }}
    >
      {children}
    </div>
  );
}

Built from Lumen tokens. →Edit the tokens