Grid

Demos

Layout container

import { Grid } from 'marketing-ui'

function Demo() {
  return (
    <Grid style={{ height: 100, background: 'var(--sonax-red-100)' }}>
      <div className='box'>Layout Container</div>
    </Grid>
  )
}

export default Demo

12 columns

import { Grid } from 'marketing-ui'

function Demo() {
  return (
    <Grid>
      {new Array(12).fill(() => 1).map(() => {
        return (
          <div
            className='box'
            style={{
              gridColumn: 'span 1',
              height: 100,
              background: 'var(--sonax-red-100)',
            }}
          >
            Box
          </div>
        )
      })}
    </Grid>
  )
}

export default Demo

Props