Stack

import { Stack } from 'sxa-ui'
function Demo() {

  return (
    <Stack>
      <div
        style={{
          width: '100%',
          height: '50px',
          padding: '24px',
          backgroundColor: 'rgb(255, 216, 216)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#000',
        }}
      >
        Element 1
      </div>
      <div
        style={{
          width: '100%',
          height: '50px',
          padding: '24px',
          backgroundColor: 'rgb(255, 216, 216)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#000',
        }}
      >
        Element 2
      </div>
      <div
        style={{
          width: '100%',
          height: '50px',
          padding: '24px',
          backgroundColor: 'rgb(255, 216, 216)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#000',
        }}
      >
        Element 3
      </div>
    </Stack>  )
}

export default Demo

import { Stack, spacing } from 'sxa-ui'
function Demo() {

  return (
    <Stack direction={Stack.directions.vertical}>
      <div
        style={{
          width: '100%',
          height: '50px',
          padding: '24px',
          backgroundColor: 'rgb(255, 216, 216)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#000',
        }}
      >
        Element 1
      </div>
      <div
        style={{
          width: '100%',
          height: '50px',
          padding: '24px',
          backgroundColor: 'rgb(255, 216, 216)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#000',
        }}
      >
        Element 2
      </div>
      <div
        style={{
          width: '100%',
          height: '50px',
          padding: '24px',
          backgroundColor: 'rgb(255, 216, 216)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#000',
        }}
      >
        Element 3
      </div>
    </Stack>  )
}

export default Demo

import { Stack, spacing } from 'sxa-ui'
function Demo() {

  return (
    <Stack alignItems={Stack.alignItems.center} gap={spacing.xs}>
      <div
        style={{
          width: '150px',
          height: '150px',
          padding: '24px',
          backgroundColor: 'rgb(255, 216, 216)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#000',
        }}
      >
        Element 1
      </div>
      <div
        style={{
          width: '150px',
          height: '50px',
          padding: '24px',
          backgroundColor: 'rgb(255, 216, 216)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#000',
        }}
      >
        Element 2
      </div>
      <div
        style={{
          width: '150px',
          height: '100px',
          padding: '24px',
          backgroundColor: 'rgb(255, 216, 216)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#000',
        }}
      >
        Element 3
      </div>
    </Stack>
  )
}

export default Demo

import { Stack, spacing } from 'sxa-ui'
function Demo() {

  return (
    <Stack justifyContent={Stack.justifyContent.end} gap={spacing.s}>
      <div
        style={{
          width: '100px',
          height: '50px',
          padding: '24px',
          backgroundColor: 'rgb(255, 216, 216)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#000',
        }}
      >
        Element 1
      </div>
      <div
        style={{
          width: '100px',
          height: '50px',
          padding: '24px',
          backgroundColor: 'rgb(255, 216, 216)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#000',
        }}
      >
        Element 2
      </div>
      <div
        style={{
          width: '100px',
          height: '50px',
          padding: '24px',
          backgroundColor: 'rgb(255, 216, 216)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: '#000',
        }}
      >
        Element 3
      </div>
    </Stack>
  )
}

export default Demo