Surface

Implemented

The generic bordered, token-backed box that domain cards and panels compose. Use instead of hand-writing rounded/border/background utilities at the call site; carries no content structure of its own.

Categoryatoms

Sourcepatterns/atoms/surface.html

AI HintThe generic bordered box. Reach for this instead of writing rounded-ep-md border border-ep-border bg-ep-surface-card at the call site. Anything with a defined anatomy belongs in a molecule that composes Surface.

Catalog fallback

Live MDX preview not available for Surface. Showing component catalog metadata instead.

Props

Preview

Surface

Prop

Type

Required

Default

Description

tone

'card' | 'subtle' | 'none'

Optional

'card'

Background token. 'subtle' recedes for panels nested inside a card.

padding

'none' | 'sm' | 'md' | 'lg'

Optional

'md'

Inner padding on the DS spacing scale.

radius

'sm' | 'md' | 'lg'

Optional

'md'

Border radius token.

borderless

boolean

Optional

false

Drop the 1px border, keeping background and radius.

as

'div' | 'section' | 'aside' | 'article'

Optional

'div'

Rendered element.

Quick use:<Surface />

Accessibility

Usage

Import

tsxSnippet

import { Surface } from "@epasslive/design-system"

Example 1

tsxSnippet

<Surface />

Example 2

tsxSnippet

<Surface tone="subtle" padding="lg" />