#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
Copyright © 2021 Jake Moxey