Surfaces

The Surface component is a simple content box, used to separate distinct groups of content. When added to <button> or <a> elements, surfaces have a hover state to show they can be interacted with.

The surface is the basis for the Card component, which offers a wider variety of options.

Importing

import { Surface } from '@ef-global/backpack/Surface'

Props

Name	Type	Default	Description
variant	BoxVariantValues	-	The border-radius of the surface. Accepted values: 'outline', 'shadow-s', 'shadow-m', 'shadow-l', 'shadow-xl'.
radius	BorderRadiusValues	-	The shadow depth of the surface. Accepted values: 'none', 'xxs', 'xs', 's', 'm', 'l', 'full'.
className	string	-	Custom classnames to add to the Surface
children	ReactNode	-	Child components inside the Surface component
...rest	`HTMLAnchorElement` \| `HTMLDivElement`	-	Rest of the props are passed down to the HTML element.

Usage

Solid (default)

This is some paragraph inside surface

With a link inside

<Surface style={{backgroundColor: 'rgb(246, 248, 250)'}}>
    <p>This is some paragraph inside surface</p>
    <Link href={'https://ef.com/'}>With a link inside</Link>
</Surface>

Outlined

This is some paragraph inside surface

With a link inside

<Surface variant={'outline'}>
    <p>This is some paragraph inside surface</p>
    <Link href={'https://ef.com/'}>With a link inside</Link>
</Surface>

Outlined and radius M

This is some paragraph inside surface

With a link inside

<Surface variant={'outline'} radius={'m'}>
    <p>This is some paragraph inside surface</p>
    <Link href={'https://ef.com/'}>With a link inside</Link>
</Surface>

Shadow medium

This is some paragraph inside surface

With a link inside

<Surface variant={'shadow-m'}>
    <p>This is some paragraph inside surface</p>
    <Link href={'https://ef.com/'}>With a link inside</Link>
</Surface>

Shadow extra large

This is some paragraph inside surface

With a link inside

<Surface variant={'shadow-xl'}>
    <p>This is some paragraph inside surface</p>
    <Link href={'https://ef.com/'}>With a link inside</Link>
</Surface>

Subscription Tables