Footer

Footer is used together with Content inside the ApplicationFrame

Name
Type
alignItems?
"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "normal" | "stretch" | ResponsiveObjectStyle<...> | AlignItemsProperty[] | undefined
as?
"symbol" | "object" | "style" | "title" | "time" | "link" | "menu" | "dialog" | "text" | "p" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | ... 156 more ... | undefined
bgColor?
"accent" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "orange" | "orange-100" | "orange-200" | ... 61 more ... | undefined
borderRadius?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | ResponsiveObjectStyle<SpaceValues> | SpaceValues[] | undefined
color?
"accent" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "orange" | "orange-100" | "orange-200" | ... 61 more ... | undefined
direction?
"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | ResponsiveObjectStyle<FlexDirectionProperty> | FlexDirectionProperty[] | undefined
Flex direction
display?
"none" | "inline" | "grid" | "flex" | "inline-flex" | "block" | "inline-block" | ResponsiveObjectStyle<DisplayProp> | DisplayProp[] | undefined
h?
0 | "px" | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "5/6" | "full" | "screen" | ResponsiveObjectStyle<...> | DimensionValues[] | undefined
Height
justifyContent?
"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "stretch" | "space-around" | "space-between" | ... 5 more ... | undefined
m?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | -64 | -56 | -48 | -40 | -32 | -24 | -20 | -16 | -12 | -10 | -8 | -6 | -5 | -4 | -3 | -2 | -1 | "auto" | ResponsiveObjectStyle<0 | 1 | 2 | ... 32 more ... | "auto"> | (0 | ... 34 more ... | "auto")[] | undefined
Values between -64 & 64
mah?
0 | "px" | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "5/6" | "full" | "screen" | ResponsiveObjectStyle<...> | DimensionValues[] | undefined
Max height
maw?
0 | "px" | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "5/6" | "full" | "screen" | ResponsiveObjectStyle<...> | DimensionValues[] | undefined
Max width
mb?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | -64 | -56 | -48 | -40 | -32 | -24 | -20 | -16 | -12 | -10 | -8 | -6 | -5 | -4 | -3 | -2 | -1 | "auto" | ResponsiveObjectStyle<0 | 1 | 2 | ... 32 more ... | "auto"> | (0 | ... 34 more ... | "auto")[] | undefined
Values between -64 & 64
mih?
0 | "px" | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "5/6" | "full" | "screen" | ResponsiveObjectStyle<...> | DimensionValues[] | undefined
Min height
miw?
0 | "px" | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "5/6" | "full" | "screen" | ResponsiveObjectStyle<...> | DimensionValues[] | undefined
Min width
ml?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | -64 | -56 | -48 | -40 | -32 | -24 | -20 | -16 | -12 | -10 | -8 | -6 | -5 | -4 | -3 | -2 | -1 | "auto" | ResponsiveObjectStyle<0 | 1 | 2 | ... 32 more ... | "auto"> | (0 | ... 34 more ... | "auto")[] | undefined
Values between -64 & 64
mr?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | -64 | -56 | -48 | -40 | -32 | -24 | -20 | -16 | -12 | -10 | -8 | -6 | -5 | -4 | -3 | -2 | -1 | "auto" | ResponsiveObjectStyle<0 | 1 | 2 | ... 32 more ... | "auto"> | (0 | ... 34 more ... | "auto")[] | undefined
Values between -64 & 64
mt?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | -64 | -56 | -48 | -40 | -32 | -24 | -20 | -16 | -12 | -10 | -8 | -6 | -5 | -4 | -3 | -2 | -1 | "auto" | ResponsiveObjectStyle<0 | 1 | 2 | ... 32 more ... | "auto"> | (0 | ... 34 more ... | "auto")[] | undefined
Values between -64 & 64
mx?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | -64 | -56 | -48 | -40 | -32 | -24 | -20 | -16 | -12 | -10 | -8 | -6 | -5 | -4 | -3 | -2 | -1 | "auto" | ResponsiveObjectStyle<0 | 1 | 2 | ... 32 more ... | "auto"> | (0 | ... 34 more ... | "auto")[] | undefined
Values between -64 & 64
my?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | -64 | -56 | -48 | -40 | -32 | -24 | -20 | -16 | -12 | -10 | -8 | -6 | -5 | -4 | -3 | -2 | -1 | "auto" | ResponsiveObjectStyle<0 | 1 | 2 | ... 32 more ... | "auto"> | (0 | ... 34 more ... | "auto")[] | undefined
Values between -64 & 64
p?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | ResponsiveObjectStyle<SpaceValues> | SpaceValues[] | undefined
Values between 0 & 64
pb?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | ResponsiveObjectStyle<SpaceValues> | SpaceValues[] | undefined
Values between 0 & 64
pl?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | ResponsiveObjectStyle<SpaceValues> | SpaceValues[] | undefined
Values between 0 & 64
pr?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | ResponsiveObjectStyle<SpaceValues> | SpaceValues[] | undefined
Values between 0 & 64
pt?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | ResponsiveObjectStyle<SpaceValues> | SpaceValues[] | undefined
Values between 0 & 64
px?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | ResponsiveObjectStyle<SpaceValues> | SpaceValues[] | undefined
Values between 0 & 64
py?
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | ResponsiveObjectStyle<SpaceValues> | SpaceValues[] | undefined
Values between 0 & 64
w?
0 | "px" | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "5/6" | "full" | "screen" | ResponsiveObjectStyle<...> | DimensionValues[] | undefined
Width
wrap?
"wrap" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap-reverse" | ResponsiveObjectStyle<FlexWrapProperty> | FlexWrapProperty[] | undefined
Flex Wrap

Examples

Use flex attributes on Content to keep the footer below the content and at highest at the bottom of the visible page

<ApplicationFrame>
<Body>
<Content display="flex" direction="column" justifyContent="space-between">
<Box>
<h1>Here's the contents of the page</h1>
</Box>
<Footer>
<FooterColumn>
<h4>Header</h4>
<div>Some info..</div>
</FooterColumn>
<FooterColumn>
<h4>Another header</h4>
<div>Some more info...</div>
</FooterColumn>
</Footer>
</Content>
</Body>
</ApplicationFrame>