Accordion

import { Accordion } from 'marketing-ui'

function Demo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <Accordion open label='Label'>
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </Accordion>
      <Accordion label='Label'>
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </Accordion>
      <Accordion label='Label'>
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </Accordion>
    </div>
  )
}

export default Demo

import { Accordion } from 'marketing-ui'

function Demo() {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '1rem',
        padding: 'var(--s-small)',
        background: 'var(--sonax-red-100)',
      }}
    >
      <Accordion variant='invert' label='Label'>
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </Accordion>
      <Accordion variant='invert' label='Label'>
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </Accordion>
      <Accordion variant='invert' label='Label'>
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </Accordion>
    </div>
  )
}

export default Demo

import { Accordion, Container } from 'marketing-ui'

function Demo() {
  return (
    <Container>
      <Accordion size='big' label='Label'>
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </Accordion>
      <Accordion size='big' label='Label'>
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </Accordion>
      <Accordion size='big' label='Label'>
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </Accordion>
    </Container>
  )
}

export default Demo