Components

Box

A container that applies padding, surface colour, border and corner radius from token values.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

Box gives its content padding, a surface, a border and rounded corners. With no props it is a bare <div>; for a card look, set padding, background, border and radius together.

Card title

Card description goes here.

import { Box, Heading, Stack, Text } from '@bigbang/ui';

export default function Default() {
  return (
    <Box padding="xl" background="raised" border="subtle" radius="md">
      <Stack gap="xs">
        <Heading level={3}>Card title</Heading>
        <Text>Card description goes here.</Text>
      </Stack>
    </Box>
  );
}

Surfaces

background takes seven values: none, default, raised, sunken, layer-1, layer-2 and layer-3. Use raised for cards on the page, sunken for wells and layer-* for stacked panels.

Surface: default

Surface: raised

Surface: sunken

import { Box, Inline, Text } from '@bigbang/ui';

export default function Surfaces() {
  return (
    <Inline gap="md">
      <Box padding="lg" background="default" border="subtle" radius="md">
        <Text>Surface: default</Text>
      </Box>
      <Box padding="lg" background="raised" border="subtle" radius="md">
        <Text>Surface: raised</Text>
      </Box>
      <Box padding="lg" background="sunken" border="subtle" radius="md">
        <Text>Surface: sunken</Text>
      </Box>
    </Inline>
  );
}

Border and radius

border draws a 1 px default or subtle border. radius takes sm (6 px), md (8 px) and lg (16 px); the default none keeps square corners.

subtle, sm

default, md

default, lg

import { Box, Inline, Text } from '@bigbang/ui';

export default function BordersRadius() {
  return (
    <Inline gap="md">
      <Box padding="lg" border="subtle" radius="sm">
        <Text>subtle, sm</Text>
      </Box>
      <Box padding="lg" border="default" radius="md">
        <Text>default, md</Text>
      </Box>
      <Box padding="lg" border="default" radius="lg">
        <Text>default, lg</Text>
      </Box>
    </Inline>
  );
}

Padding

padding sets all four sides. paddingInline overrides the left and right padding, paddingBlock the top and bottom. Values come from the space scale: none to 7xl.

padding: lg

paddingInline: 3xl, paddingBlock: xs

import { Box, Inline, Text } from '@bigbang/ui';

export default function Padding() {
  return (
    <Inline gap="md" align="start">
      <Box padding="lg" border="subtle" radius="md">
        <Text>padding: lg</Text>
      </Box>
      <Box paddingInline="3xl" paddingBlock="xs" border="subtle" radius="md">
        <Text>paddingInline: 3xl, paddingBlock: xs</Text>
      </Box>
    </Inline>
  );
}

As a landmark

render turns Box into another element. The example below produces a <section> named with aria-label, so it becomes a landmark in a screen reader.

Card title

Card description goes here.

import { Box, Heading, Stack, Text } from '@bigbang/ui';

export default function AsSection() {
  return (
    <Box render={<section aria-label="Section" />} padding="xl" background="raised" border="subtle" radius="md">
      <Stack gap="xs">
        <Heading level={3}>Card title</Heading>
        <Text>Card description goes here.</Text>
      </Stack>
    </Box>
  );
}

Light and dark mode

Box takes its surface and border colours from the color-surface-* and color-border-* tokens; light and dark mode need no extra setting. When you change the brand in the top bar, the surfaces change with it.

Card title

Card description goes here.

Card title

Card description goes here.

import { Box, Heading, Stack, Text } from '@bigbang/ui';

export default function Default() {
  return (
    <Box padding="xl" background="raised" border="subtle" radius="md">
      <Stack gap="xs">
        <Heading level={3}>Card title</Heading>
        <Text>Card description goes here.</Text>
      </Stack>
    </Box>
  );
}