Container
The Container Component creates a div element and should be used to group other Components.

Props

Prop Key
Type
Notes
alignItems
String
Possible values: flex-start, flex-end, stretch, center, baseline.
alignSelf
String
Possible values: auto, flex-start, flex-end, stretch, center, baseline.
backgroundColor
Object
Object must be structured to represent a valid RGBA value.
Example: { r: 229, g: 231, b: 235, a: 1 }
backgroundImageType
String
Sets whether the background image should have an image.
Possible values: none, image.
backgroundImageURL
String
URL of the background image.
backgroundPositionKeyword
String
Possible values: left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom.
backgroundPositionType
String
Sets whether to use backgroundPositions and backgroundPositionUnits or backgroundPositionKeyword.
Possible values: keyword, value.
backgroundPositionUnits
Array
String
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
backgroundPositions
Array
Number
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
backgroundRepeat
String
Possible values: repeat, no-repeat, repeat-x, repeat-y, space, round.
backgroundSizeKeyword
String
Possible values: auto, cover, contain.
backgroundSizeType
String
Sets whether to use backgroundSizes and backgroundSizeUnits or backgroundSizeKeyword.
Possible values: keyword, value.
backgroundSizeUnits
Array
String
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
backgroundSizes
Array
Number
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
borderColor
Object
Object must be structured to represent a valid RGBA value.
Example: { r: 229, g: 231, b: 235, a: 1 }
borderRadii
Array
Number
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
borderRadiusUnits
Array
String
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
borderStyle
String
Possible values: none, solid, dashed, dotted.
borderWidthUnits
Array
String
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
borderWidths
Array
Number
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
boxShadowColor
Object
Object must be structured to represent a valid RGBA value.
Example: { r: 229, g: 231, b: 235, a: 1 }
boxShadowEnabled
Boolean
Sets whether to enable box shadows.
boxShadowGroups
Array
Object
Array containing box shadow styles. This allows multiple box shadows to be added to a Component.
Example: [ { id: short.generate(), boxShadows: ['8', '8', '0', '0'], boxShadowUnits: ['px', 'px', 'px', 'px'], boxShadowColor: { r: 31, g: 41, b: 55, a: 1 }, }, ]
boxShadowUnits
Array
String
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
boxShadows
Array
Number
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
columnGap
Number
columnGapUnit
String
Possible values: px, %, em, rem, ch, vw, vh, auto.
display
String
Possible values: flex, block, inline, inline-block.
flexBasis
Number
flexBasisUnit
String
Possible values: px, %, em, rem, ch, vw, vh, auto.
flexDirection
String
Possible values: row, row-reverse, column, column-reverse.
flexGrow
Number
flexShrink
Number
flexWrap
String
Possible values: nowrap, wrap, wrap-reverse.
fontColor
Object
Object must be structured to represent a valid RGBA value.
Example: { r: 229, g: 231, b: 235, a: 1 }
fontFamily
String
Possible values: Alegreya, Alegreya Sans, Archivo Narrow, BioRhyme, Cardo, Chivo, Cormorant, Crimson Text, DM Sans, Eczar, Fira Sans, IBM Plex Sans, Inconsolata, Inknut Antiqua, Inter, Karla, Lato, Libre Bakserville, Libre Franklin, Lora, Merriweather, Montserrat, Neuton, Open Sans, PT Sans, PT Serif, Playfair Display, Poppins, Proza Libre, Raleway, Roboto, Roboto Slab, Rubik, Source Sans Pro, Source Serif Pro, Space Grotesk, Space Mono, Spectral, Syne, Work Sans,
fontSize
Number
fontSizeUnit
String
Possible values: px, %, em, rem, ch, vw, vh.
fontStyle
String
Possible values: normal, italic, oblique.
fontWeight
Number
Font family must support value passed in. Refer to fonts.google.com to check supported font weights.
height
Number
heightUnit
String
Possible values: px, %, em, rem, ch, vw, vh, auto.
justifyContent
String
Possible values: flex-start, flex-end, center, space-between, space-around, space-evenly.
letterSpacing
Number
letterSpacingUnit
String
Possible values: px, %, em, rem, ch, vw, vh, normal.
lineHeight
Number
lineHeightUnit
String
Possible values: px, %, em, rem, ch, vw, vh.
margin
Array
Number
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
marginUnits
Array
String
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
maxHeight
Number
maxHeightUnit
String
Possible values: px, %, em, rem, ch, vw, vh, none.
maxWidth
Number
maxWidthUnit
String
Possible values: px, %, em, rem, ch, vw, vh, none.
minHeight
Number
minHeightUnit
String
Possible values: px, %, em, rem, ch, vw, vh.
minWidth
Number
minWidthUnit
String
Possible values: px, %, em, rem, ch, vw, vh.
order
Number
overflow
String
Possible values: hidden, visible.
padding
Array
Number
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
paddingUnits
Array
String
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
position
String
Possible values: static, relative, fixed, absolute.
If value is either static, fixed, or absolute then positions and positionUnits will be used to set the top, right, bottom, and left values.
positionUnits
Array
String
Four values in an array that map to top, right, bottom, and left units.
Example: [ 'px', 'px', 'px', 'px' ]
Possible values (each array item can be different): px, %, em, rem, ch, vw, vh, auto.
positions
Array
Number
Four values in an array that map to top, right, bottom, and left values.
Example: [ 10, 10, 10, 10 ]
rowGap
Number
rowGapUnit
String
Possible values: px, %, em, rem, ch, vw, vh, auto.
textAlign
String
Possible values: left, right, center, justify.
textDecoration
String
Possible values: underline, line-through, overline, none.
textDirection
String
Possible values: ltr, rtl
textOverflow
String
Possible values: clip, ellipsis.
textTransform
String
Possible values: capitalize, uppercase, lowercase, full-width, none.
typographyEnabled
Boolean
Sets whether or not to enabled typography styles on Component. If set to false, all typography syles will have values set to inherit, which will inherit the parent styles.
whiteSpace
String
Possible values: normal, nowrap, pre, pre-wrap, break-spaces.
width
Number
widthUnit
String
Possible values: px, %, em, rem, ch, vw, vh, auto.
wordBreak
String
Possible values: normal, break-all, keep-all.
zIndex
Number
Last modified 2mo ago
Copy link
Contents
Props