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

<Box>
  <Box altitude="100" backgroundColor="white" padding="major-2">
    <Text>Altitude 100</Text>
  </Box>
  <Box altitude="200" backgroundColor="white" padding="major-2" marginTop="major-2">
    <Text>Altitude 200</Text>
  </Box>
  <Box altitude="300" backgroundColor="white" padding="major-2" marginTop="major-2">
    <Text>Altitude 300</Text>
  </Box>
  <Box altitude="400" backgroundColor="white" padding="major-2" marginTop="major-2">
    <Text>Altitude 400</Text>
  </Box>
</Box>

<Box>
  <Box altitude="100" backgroundColor="white" padding="major-2">
    <Text>Altitude 100</Text>
  </Box>
  <Box altitude="200" backgroundColor="white" padding="major-2" marginTop="major-2">
    <Text>Altitude 200</Text>
  </Box>
  <Box altitude="300" backgroundColor="white" padding="major-2" marginTop="major-2">
    <Text>Altitude 300</Text>
  </Box>
  <Box altitude="400" backgroundColor="white" padding="major-2" marginTop="major-2">
    <Text>Altitude 400</Text>
  </Box>
</Box>

Theming#

Schema#

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

Example#

const theme = {
  altitudes: {
    100: `
      shadow-opacity: 0.15;
      shadow-radius: 4px;
      shadow-color: black;
      shadow-offset: 0px 1px;
      elevation: 8;
    `,
    200: `
      shadow-opacity: 0.15;
      shadow-radius: 8px;
      shadow-color: black;
      shadow-offset: 0px 2px;
      elevation: 16;
    `,
    300: `
      shadow-opacity: 0.15;
      shadow-radius: 12px;
      shadow-color: black;
      shadow-offset: 0px 3px;
      elevation: 24;
    `,
    400: `
      shadow-opacity: 0.15;
      shadow-radius: 24px;
      shadow-color: black;
      shadow-offset: 0px 6px;
      elevation: 48;
    `,
  }
}

On this page