hixme-ui Container component

Usage no npm install needed!

<script type="module">
  import hixmeUiContainer from 'https://cdn.skypack.dev/@hixme-ui/container';



npm i --save @hixme-ui/container

View it live


import Container from '@hixme-ui/container'

<Container padding='30px' shadow>
  <p>Content goes here</p>

<Container flex textCenter opacity='.6'>
  <p>Flex content goes here</p>

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


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


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


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


Name Type Description
width string Apply CSS width properties
minWidth string Apply CSS min-width properties
maxWidth string Apply CSS max-width properties


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


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.