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: `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