LayoutBox

Box

Box is the lowest-level component for binding theme-based styles to an individual element on the screen.

Prop	Type	Required	Default	Description
`id`	`string`	—	—	—
Also accepts `BoxStyleProps`

Prop	Type	Required	Default	Description
`alignSelf`	`ResponsiveProp<CSSProperties['alignSelf']>`	—	—	The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.
`flex`	`ResponsiveProp<CSSProperties['flex']>`	—	—	The `flex` shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.
`flexBasis`	`ResponsiveProp<CSSProperties['flexBasis']>`	—	—	The `flexBasis` property sets the initial main size of a flex item.
`flexGrow`	`ResponsiveProp<CSSProperties['flexGrow']>`	—	—	The `flexGrow` property sets the flex grow factor of a flex item main size.
`flexShrink`	`ResponsiveProp<CSSProperties['flexShrink']>`	—	—	The `flexShrink` property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`.

Prop	Type	Required	Default	Description
`margin`	`SpacingType`	—	—	The `margin` shorthand property sets the margin area on all four sides of an element at once.
`marginBottom`	`SpacingType`	—	—	The `marginBottom` property sets the margin area on the bottom side of an element.
`marginLeft`	`SpacingType`	—	—	The `marginLeft` property sets the margin area on the left side of an element.
`marginRight`	`SpacingType`	—	—	The `marginRight` property sets the margin area on the right side of an element.
`marginTop`	`SpacingType`	—	—	The `marginTop` property sets the margin area on the top side of an element.
`marginX`	`SpacingType`	—	—	The `marginX` shorthand property sets the margin area on the left and right of the element.
`marginY`	`SpacingType`	—	—	The `marginY` shorthand property sets the margin area on the top and bottom of the element.

Prop	Type	Required	Default	Description
`padding`	`SpacingType`	—	—	The `padding` shorthand property sets the padding area on all four sides of an element at once.
`paddingBottom`	`SpacingType`	—	—	The `paddingBottom` property sets the height of the padding area on the bottom of an element.
`paddingLeft`	`SpacingType`	—	—	The `paddingLeft` property sets the width of the padding area on the left of an element.
`paddingRight`	`SpacingType`	—	—	The `paddingRight` property sets the width of the padding area on the right of an element.
`paddingTop`	`SpacingType`	—	—	The `paddingTop` property sets the height of the padding area on the top of an element.
`paddingX`	`SpacingType`	—	—	The `paddingX` shorthand property sets the padding area on the left and right of the element.
`paddingY`	`SpacingType`	—	—	The `paddingY` shorthand property sets the padding area on the top and bottom of the element.

Prop	Type	Required	Default	Description
`alignSelf`	`ResponsiveProp<CSSProperties['alignSelf']>`	—	—	The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.
`gridArea`	`ResponsiveProp<CSSProperties['gridArea']>`	—	—	Gives a grid item a name so that it can be referenced by a template created with the grid-template-areas property.
`gridColumn`	`ResponsiveProp<CSSProperties['gridColumn']>`	—	—	Shorthand for grid-column-start & grid-column-end.
`gridColumnEnd`	`ResponsiveProp<CSSProperties['gridColumnEnd']>`	—	—	Determines a grid item’s end position within the grid by referring to specific grid column line.
`gridColumnStart`	`ResponsiveProp<CSSProperties['gridColumnStart']>`	—	—	Determines a grid item’s start position within the grid by referring to specific grid column line.
`gridRow`	`ResponsiveProp<CSSProperties['gridRow']>`	—	—	Shorthand for grid-row-start & grid-row-end.
`gridRowEnd`	`ResponsiveProp<CSSProperties['gridRowEnd']>`	—	—	Determines a grid item’s end position within the grid by referring to specific grid row line.
`gridRowStart`	`ResponsiveProp<CSSProperties['gridRowStart']>`	—	—	Determines a grid item’s start position within the grid by referring to specific grid row line.
`justifySelf`	`ResponsiveProp<CSSProperties['justifySelf']>`	—	—	Aligns a grid item inside a cell along the column/block axis.

Box

Box is the lowest-level component for binding theme-based styles to an individual element on the screen.

Card

A flexible container for displaying a subject and its related information.