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

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)',
}
}
Copyright © 2021 Jake Moxey