Jumbotron

Heading In Here Big Text

Description in here with some more text

Copy
Copied
<Jumbotron pb="3.5em" flexDirection="column" alignItems="center">
  <H1 mb="0">Heading In Here Big Text</H1>
  <H2 mt="16px">Description in here with some more text</H2>
</Jumbotron>

Props

NameTypeDescription
bgImagestringDefines the background image style property.
bgColorstringDefines the background color style property.
parallaxEffectbooleanEnable parallax effect of the component. Default value: false
textColorstringDefines the color of H1 and H2 inside of the Jumbotron.
ptstringDefines the padding-top style property. Default value: 0
pbstringDefines the padding-bottom style property. Default value: 8em
plstringDefines the padding-left style property. Default value: 1em
prstringDefines the padding-right style property. Default value: 1em
mstring | number | array | objectDefines the margin style property. Default value: 0
mtstring | number | array | objectDefines the margin-top style property. Default value: 0
mrstring | number | array | objectDefines the margin-right style property. Default value: 0
mbstring | number | array | objectDefines the margin-bottom style property. Default value: 0
mlstring | number | array | objectDefines the margin-left style property. Default value: 0
mxstring | number | array | objectDefines the margin-left and margin-right style property. Default value: 0
mystring | number | array | objectDefines the margin-top and margin-bottom style property. Default value: 0
pstring | number | array | objectDefines the padding style property. Default value: 0
pxstring | number | array | objectDefines the padding-left and padding-right style property. Default value: 0
pystring | number | array | objectDefines the padding-top and padding-bottom style property. Default value: 0
widthstring | number | array | objectDefines the width style property. Default value: 'auto'
maxWidthstring | number | array | objectDefines the max-width style property. Default value: 'none'
heightstring | number | array | objectDefines the height style property. Default value: 'auto'
minHeightstring | number | array | objectDefines the min-height style property. Default value: 'auto'
flexDirection'row' | 'row-reverse' | 'column' | 'column-reverse'Defines the flex-direction style property. Default value: row
flexWrap'nowrap' | 'wrap' | 'wrap-reverse'Defines the flex-wrap style property. Default value: wrap
alignItems'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'Defines the align-items style property for vertical alignment. Default value: stretch
justifyContent'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'Defines the justify-content style property. It is applied for all screen sizes. Default value: flex-start
alignContent'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around'Defines the align-content style property. Default value: stretch
flexstring | numberDefines the flex style property. Default value: 0 1 auto
flexBasisstring | numberSpecifies the initial length of a flexible item. Default value: auto
flexGrownumberSpecifies how much the item will grow relative to the rest of the flexible items inside the same container. Default value: 0
flexShrinknumberSpecifies how the item will shrink relative to the rest of the flexible items inside the same container. Default value: 1
alignSelf'auto' | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'Defines the align-self style property. Default value: auto
ordernumberSpecifies the order of a flexible item relative to the rest of the flexible items inside the same container. Default value: 0