Flex

import { Flex } from 'marketing-ui'

function Demo() {
  return (
    <Flex direction={{ default: 'horizontal' }} gap={{ default: 'macro' }}>
      <div
        className='box'
        style={{ padding: '1rem', background: 'var(--sonax-red-100)' }}
      >
        One
      </div>
      <div
        className='box'
        style={{ padding: '1rem', background: 'var(--sonax-red-100)' }}
      >
        Two
      </div>
      <div
        className='box'
        style={{ padding: '1rem', background: 'var(--sonax-red-100)' }}
      >
        Three
      </div>
    </Flex>
  )
}

export default Demo

import { Flex } from 'marketing-ui'

function Demo() {
  return (
    <Flex
      direction={{ default: 'vertical' }}
      gap={{ default: 'base' }}
      padding={{ default: 'base' }}
    >
      <div
        className='box'
        style={{ padding: '1rem', background: 'var(--sonax-red-100)' }}
      >
        One
      </div>
      <div
        className='box'
        style={{ padding: '1rem', background: 'var(--sonax-red-100)' }}
      >
        Two
      </div>
    </Flex>
  )
}

export default Demo

import { Flex } from 'marketing-ui'

function Demo() {
  return (
    <Flex
      direction={{ default: 'horizontal' }}
      gap={{ default: 'small' }}
      alignItems='center'
      justifyContent='center'
    >
      <div
        className='box'
        style={{ padding: '1rem', background: 'var(--sonax-red-100)' }}
      >
        A
      </div>
      <div
        className='box'
        style={{ padding: '2rem', background: 'var(--sonax-red-100)' }}
      >
        B
      </div>
    </Flex>
  )
}

export default Demo