Layout

Card

A surface that groups one topic — a feature, a roadmap item, a saved Visualli, a setting group — with optional media, eyebrow, title, body and actions.

• Provide any of eyebrow (Haksen caps, ≤ 3 words), title, children (one or two sentences), media (an image or a small map, bled to the edges) and actions (Buttons).
• variant: outlined (default, on canvas), raised (floats with shadow-float — use sparingly), sunken (a well inside a surface). size: md (16px padding) or lg (24px, marketing).
• href makes the whole card a link, onClick a button; then don't put other buttons inside it. Without either it is an <article>.
• Never add a colored side border or emoji icon to a card; let a node, a topic dot or the media carry color.

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface CardProps {
  eyebrow?: string;
  title?: string;
  children?: ReactNode;
  media?: ReactNode;
  actions?: ReactNode;
  variant?: 'outlined' | 'raised' | 'sunken';
  size?: 'md' | 'lg';
  href?: string;
  onClick?: () => void;
  className?: string
}

Use

import { Card } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/Card/README.md