Last updated 4 months ago

Jumbotron

Heading In Here Big Text

Description in here with some more text

<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

NameTypeDefaultDescription
bgImagestringDefines the background image style property.
bgColorstringDefines the background color style property.
parallaxEffectbooleanfalseEnable parallax effect of the component.
textColorstringDefines the color of H1 and H2 inside of the Jumbotron.
ptstring0Defines the padding-top style property.
pbstring8emDefines the padding-bottom style property.
plstring1emDefines the padding-left style property.
prstring1emDefines the padding-right style property.
mstring | number | array | object0Defines the margin style property.
mtstring | number | array | object0Defines the margin-top style property.
mrstring | number | array | object0Defines the margin-right style property.
mbstring | number | array | object0Defines the margin-bottom style property.
mlstring | number | array | object0Defines the margin-left style property.
mxstring | number | array | object0Defines the margin-left and margin-right style property.
mystring | number | array | object0Defines the margin-top and margin-bottom style property.
pstring | number | array | object0Defines the padding style property.
pxstring | number | array | object0Defines the padding-left and padding-right style property.
pystring | number | array | object0Defines the padding-top and padding-bottom style property.
widthstring | number | array | object'auto'Defines the width style property.
maxWidthstring | number | array | object'none'Defines the max-width style property.
heightstring | number | array | object'auto'Defines the height style property.
minHeightstring | number | array | object'auto'Defines the min-height style property.
flexDirection'row' | 'row-reverse' | 'column' | 'column-reverse'rowDefines the flex-direction style property.
flexWrap'nowrap' | 'wrap' | 'wrap-reverse'wrapDefines the flex-wrap style property.
alignItems'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'stretchDefines the align-items style property for vertical alignment.
justifyContent'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'flex-startDefines the justify-content style property. It is applied for all screen sizes.
alignContent'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around'stretchDefines the align-content style property.
flexstring | number0 1 autoDefines the flex style property.
flexBasisstring | numberautoSpecifies the initial length of a flexible item.
flexGrownumber0Specifies how much the item will grow relative to the rest of the flexible items inside the same container.
flexShrinknumber1Specifies how the item will shrink relative to the rest of the flexible items inside the same container.
alignSelf'auto' | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'autoDefines the align-self style property.
ordernumber0Specifies the order of a flexible item relative to the rest of the flexible items inside the same container.