Container
npm i --save @hixme-ui/container
Usage
import Container from '@hixme-ui/container'
<Container padding='30px' shadow>
<p>Content goes here</p>
</Container>
<Container flex textCenter opacity='.6'>
<p>Flex content goes here</p>
</Container>
Default Props
Name | Type | Default |
---|---|---|
padding | string | 20px |
background | string | none |
Text Align
Name | Type | Description |
---|---|---|
textLeft | bool | text-align: left |
textCenter | bool | text-align: center |
textRight | bool | text-align: right |
Background Color
Name | Type | Description |
---|---|---|
background | string | Apply CSS background properties |
default | bool | Default will apply a white background |
primary | bool | |
success | bool | |
warning | bool | |
error | bool | |
muted | bool | |
white | bool | |
black | bool | |
red | bool | |
blue | bool | |
purple | bool | |
yellow | bool | |
green | bool | |
light | bool | |
lighter | bool | |
lightest | bool |
Borders
Name | Type | Description |
---|---|---|
border | string | Apply CSS border properties |
borderColor | string | Apply CSS border-color properties |
borderTop | string | Apply CSS border-top properties |
borderBottom | string | Apply CSS border-bottom properties |
borderLeft | string | Apply CSS border-left properties |
borderRight | string | Apply CSS border-right properties |
dashed | bool | Apply 2px, grey dashed border |
rounded | bool | Apply 6px, border radius to container |
Margin
Name | Type | Description |
---|---|---|
margin | string | Apply CSS margin properties |
marginLeft | string | Apply CSS margin-left properties |
marginRight | string | Apply CSS margin-right properties |
marginTop | string | Apply CSS margin-top properties |
marginBottom | string | Apply CSS margin-bottom properties |
marginSides | string | Apply CSS margin-left and right properties |
Padding
Name | Type | Description |
---|---|---|
padding | string | Apply CSS padding properties |
paddingLeft | string | Apply CSS padding-left properties |
paddingRight | string | Apply CSS padding-right properties |
paddingTop | string | Apply CSS padding-top properties |
paddingBottom | string | Apply CSS padding-bottom properties |
paddingSides | string | Apply CSS padding-left and right properties |
noPadding | bool | Remove default padding from container |
Width
Name | Type | Description |
---|---|---|
width | string | Apply CSS width properties |
minWidth | string | Apply CSS min-width properties |
maxWidth | string | Apply CSS max-width properties |
Height
Name | Type | Description |
---|---|---|
height | string | Apply CSS height properties |
minHeight | string | Apply CSS min-height properties |
maxHeight | string | Apply CSS max-height properties |
Flex Properties
Name | Type | Description |
---|---|---|
flex | bool | Apply display: flex |
inlineFlex | bool | Apply display: inline-flex |
flexWrap | bool | Apply flex-wrap: wrap |
flexRow | bool | Apply flex-direction: row |
flexColumn | bool | Apply flex-direction: column |
justifyStart | bool | Apply justify-content: flex-start |
justifyEnd | bool | Apply justify-content: flex-end |
justifyCenter | bool | Apply justify-content: center |
justifySpaceBetween | bool | Apply justify-content: space-between |
justifySpaceAround | bool | Apply justify-content: space-around |
alignStart | bool | Apply align-items: flex-start |
alignEnd | bool | Apply align-items: flex-end |
alignCenter | bool | Apply align-items: center |
alignSpaceBetween | bool | Apply align-items: space-between |
alignSpaceAround | bool | Apply align-items: space-around |
direction | string | Apply CSS flex-direction properties |
alignItems | string | Apply CSS align-items properties |
alignContent | string | Apply CSS align-content properties |
justifyContent | string | Apply CSS justify-content properties |
alignSelf | string | Apply CSS align-self properties |
flexBasis | string | Apply CSS flex-basis properties |
flexGrow | string | Apply CSS flex-grow properties |
flexShrink | string | Apply CSS flex-shrink properties |
Other
Name | Type | Description |
---|---|---|
withOutline | bool | Add 1px solid red outline |
shadow | bool | Add box shadow to container |
heavyShadow | bool | Add heavy box shadow to container |
animate | bool | Add animation property to container |
opacity | number | Add opacity for container. |