sheengemologic ui
All components

Card

A bordered raised surface, without a shadow unless explicitly requested.@gemologic/sheen · surfaces

Playground

Workspace

Project details
<Card bordered elevated={false} padding="lg" variant="raised"><Heading level={2} size="h3">Workspace</Heading><Text>Project details</Text></Card>

Variant matrix

Card composition

Workspace

Project details
variant: base

Workspace

Project details
variant: subtle

Workspace

Project details
variant: raised

Workspace

Project details
variant: inset

Workspace

Project details
padding: none

Workspace

Project details
padding: xs

Workspace

Project details
padding: sm

Workspace

Project details
padding: md

Workspace

Project details
padding: lg

Workspace

Project details
padding: xl

Workspace

Project details

Anatomy

Package
@gemologic/sheen
Source
packages/ui/src/primitives/Surface.tsx
Tokens
  • --sheen-color-bg-raised
  • --sheen-color-border
  • --sheen-color-focus-ring-offset

Accessibility

Role: generic surfaceKeyboard: No component-owned keys

Do

  • Use role tokens and preserve the surrounding keyboard order.

Do not

  • Do not add structural borders or shadows merely as decoration.

Generated props

NameTypeDefaultDescription
variant"base" | "subtle" | "raised" | "inset"raisedSemantic surface fill; also establishes the focus-ring offset for descendants.
paddingSpacinglgRole-based padding; none leaves spacing to the composition.
borderedbooleantrueAdds a structural border, not an interactive-control boundary.
elevatedbooleanfalseOpt-in raised shadow. Keep elevation sparse.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.