@hixme-ui/container
2.1.0 • Public • Published Container
npm i --save @hixme-ui/container
View it live
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. |
Package Sidebar
Install
npm i @hixme-ui/container
Weekly Downloads
Last publish