Altitudes#

Every component in Bumbag has the ability to set an altitude prop, allowing the component to have a sense of elevation. The altitude prop will give the component a box shadow.

Altitude 100

Altitude 200

Altitude 300

Altitude 400

Editable example

<Stack>
  <Box altitude="100" padding="major-2">Altitude 100</Box>
  <Box altitude="200" padding="major-2">Altitude 200</Box>
  <Box altitude="300" padding="major-2">Altitude 300</Box>
  <Box altitude="400" padding="major-2">Altitude 400</Box>
</Stack>

<Stack>
  <Box altitude="100" padding="major-2">Altitude 100</Box>
  <Box altitude="200" padding="major-2">Altitude 200</Box>
  <Box altitude="300" padding="major-2">Altitude 300</Box>
  <Box altitude="400" padding="major-2">Altitude 400</Box>
</Stack>

Theming#

Schema#

const theme = {
  altitudes: {
    100: string,
    200: string,
    300: string,
    400: string,
    [key: number]: string
  }
}

Example#

const theme = {
  altitudes: {
    100: 'box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15), 0px 0px 2px 1px rgba(0, 0, 0, 0.02)',
    200: 'box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15), 0px 0px 4px 2px rgba(0, 0, 0, 0.02)',
    300: 'box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.15), 0px 0px 6px 3px rgba(0, 0, 0, 0.02)',
    400: 'box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.15), 0px 0px 12px 6px rgba(0, 0, 0, 0.02)',
    700: 'box-shadow: 0px 24px 72px 0px rgba(0, 0, 0, 0.15), 0px 0px 24px 72px rgba(0, 0, 0, 0.02)',
  }
}

On this page