Surface

A bordered panel for a group of content.

Shipping

Free delivery on orders over €150.

Belgium · 2 days

Surface.tsx

import {
  Button,
  Surface,
  SurfaceContent,
  SurfaceHeader,
  SurfaceRow,
  Text
} from 'alinea/components'

export function SurfaceExample() {
  return (
    <Surface aria-label="Shipping" role="region" style={{width: 360}}>
      <SurfaceHeader>
        <Text weight="semibold">Shipping</Text>
      </SurfaceHeader>
      <SurfaceContent>
        <Text color="muted">Free delivery on orders over €150.</Text>
        <Surface>
          <SurfaceRow>
            <Text style={{flex: 1}}>Belgium · 2 days</Text>
            <Button variant="ghost" size="sm">
              Edit
            </Button>
          </SurfaceRow>
        </Surface>
      </SurfaceContent>
    </Surface>
  )
}

Props

`<Surface>`

PropTypeDefaultDescription

depth'base' | 'muted'Default –

variant'base' | 'muted'Default –

Also accepts every prop of a <div> element.

`<SurfaceHeader>`

Accepts every prop of a <header> element.

`<SurfaceContent>`

Accepts every prop of a <div> element.

`<SurfaceRow>`

Accepts every prop of a <div> element.