Accordion

import Accordion from '@/components/accordion';

const data = [
  {
    "title": "Primary Title",
    "content": <p>Laboris magna labore aute amet non tempor ut labore dolore labore adipisicing laboris sint ex. Voluptate qui id mollit officia amet laboris esse excepteur Lorem sint nostrud proident sit nulla. Veniam aliqua eu laboris reprehenderit esse nostrud non est qui consequat labore ullamco Lorem. Enim fugiat consequat duis magna ipsum ut Lorem nisi aliqua dolore sunt esse mollit. Enim non nulla laborum et. Ad voluptate consequat pariatur proident non aliquip officia nisi ut elit ipsum laborum</p>
  },
  {
    "title": "Secondary Title",
    "content": <p>Laboris magna labore aute amet non tempor ut labore dolore labore adipisicing laboris sint ex. Voluptate qui id mollit officia amet laboris esse excepteur Lorem sint nostrud proident sit nulla. Veniam aliqua eu laboris reprehenderit esse nostrud non est qui consequat labore ullamco Lorem. Enim fugiat consequat duis magna ipsum ut Lorem nisi aliqua dolore sunt esse mollit. Enim non nulla laborum et. Ad voluptate consequat pariatur proident non aliquip officia nisi ut elit ipsum laborum</p>
  },
  {
    "title": "Third Title",
    "content": <p>Laboris magna labore aute amet non tempor ut labore dolore labore adipisicing laboris sint ex. Voluptate qui id mollit officia amet laboris esse excepteur Lorem sint nostrud proident sit nulla. Veniam aliqua eu laboris reprehenderit esse nostrud non est qui consequat labore ullamco Lorem. Enim fugiat consequat duis magna ipsum ut Lorem nisi aliqua dolore sunt esse mollit. Enim non nulla laborum et. Ad voluptate consequat pariatur proident non aliquip officia nisi ut elit ipsum laborum</p>
  }
];

<Accordion data={data} />

import Accordion from '@/components/accordion';

const data = [
  {
    "title": "Primary Title",
    "content": <p>Laboris magna labore aute amet non tempor ut labore dolore labore adipisicing laboris sint ex. Voluptate qui id mollit officia amet laboris esse excepteur Lorem sint nostrud proident sit nulla. Veniam aliqua eu laboris reprehenderit esse nostrud non est qui consequat labore ullamco Lorem. Enim fugiat consequat duis magna ipsum ut Lorem nisi aliqua dolore sunt esse mollit. Enim non nulla laborum et. Ad voluptate consequat pariatur proident non aliquip officia nisi ut elit ipsum laborum</p>
  },
  {
    "title": "Secondary Title",
    "content": <p>Laboris magna labore aute amet non tempor ut labore dolore labore adipisicing laboris sint ex. Voluptate qui id mollit officia amet laboris esse excepteur Lorem sint nostrud proident sit nulla. Veniam aliqua eu laboris reprehenderit esse nostrud non est qui consequat labore ullamco Lorem. Enim fugiat consequat duis magna ipsum ut Lorem nisi aliqua dolore sunt esse mollit. Enim non nulla laborum et. Ad voluptate consequat pariatur proident non aliquip officia nisi ut elit ipsum laborum</p>
  },
  {
    "title": "Third Title",
    "content": <p>Laboris magna labore aute amet non tempor ut labore dolore labore adipisicing laboris sint ex. Voluptate qui id mollit officia amet laboris esse excepteur Lorem sint nostrud proident sit nulla. Veniam aliqua eu laboris reprehenderit esse nostrud non est qui consequat labore ullamco Lorem. Enim fugiat consequat duis magna ipsum ut Lorem nisi aliqua dolore sunt esse mollit. Enim non nulla laborum et. Ad voluptate consequat pariatur proident non aliquip officia nisi ut elit ipsum laborum</p>
  }
];

<Accordion data={data} toggle />

import Accordion from '@/components/accordion';
import Icon from '@/components/icon';

const data = [
  {
    "title": "Primary Title",
    "iconBefore": <Icon name="icon-home" />,
    "content": <p>Laboris magna labore aute amet non tempor ut labore dolore labore adipisicing laboris sint ex. Voluptate qui id mollit officia amet laboris esse excepteur Lorem sint nostrud proident sit nulla. Veniam aliqua eu laboris reprehenderit esse nostrud non est qui consequat labore ullamco Lorem. Enim fugiat consequat duis magna ipsum ut Lorem nisi aliqua dolore sunt esse mollit. Enim non nulla laborum et. Ad voluptate consequat pariatur proident non aliquip officia nisi ut elit ipsum laborum</p>
  },
  {
    "title": "Secondary Title",
    "iconBefore": <Icon name="icon-youtube" />,
    "content": <p>Laboris magna labore aute amet non tempor ut labore dolore labore adipisicing laboris sint ex. Voluptate qui id mollit officia amet laboris esse excepteur Lorem sint nostrud proident sit nulla. Veniam aliqua eu laboris reprehenderit esse nostrud non est qui consequat labore ullamco Lorem. Enim fugiat consequat duis magna ipsum ut Lorem nisi aliqua dolore sunt esse mollit. Enim non nulla laborum et. Ad voluptate consequat pariatur proident non aliquip officia nisi ut elit ipsum laborum</p>""
  },
  {
    "title": "Third Title",
    "iconBefore": <Icon name="icon-twitter" />,
    "content": <p>Laboris magna labore aute amet non tempor ut labore dolore labore adipisicing laboris sint ex. Voluptate qui id mollit officia amet laboris esse excepteur Lorem sint nostrud proident sit nulla. Veniam aliqua eu laboris reprehenderit esse nostrud non est qui consequat labore ullamco Lorem. Enim fugiat consequat duis magna ipsum ut Lorem nisi aliqua dolore sunt esse mollit. Enim non nulla laborum et. Ad voluptate consequat pariatur proident non aliquip officia nisi ut elit ipsum laborum</p>""
  }
];

<Accordion data={data} />

import Accordion from '@/components/accordion';
import Icon from '@/components/icon';

const data = [
  {
    "title": "Primary Title",
    "iconAfter": <Icon name="icon-home" />,
    "content": <p>Laboris magna labore aute amet non tempor ut labore dolore labore adipisicing laboris sint ex. Voluptate qui id mollit officia amet laboris esse excepteur Lorem sint nostrud proident sit nulla. Veniam aliqua eu laboris reprehenderit esse nostrud non est qui consequat labore ullamco Lorem. Enim fugiat consequat duis magna ipsum ut Lorem nisi aliqua dolore sunt esse mollit. Enim non nulla laborum et. Ad voluptate consequat pariatur proident non aliquip officia nisi ut elit ipsum laborum</p>
  },
  {
    "title": "Secondary Title",
    "iconAfter": <Icon name="icon-youtube" />,
    "content": <p>Laboris magna labore aute amet non tempor ut labore dolore labore adipisicing laboris sint ex. Voluptate qui id mollit officia amet laboris esse excepteur Lorem sint nostrud proident sit nulla. Veniam aliqua eu laboris reprehenderit esse nostrud non est qui consequat labore ullamco Lorem. Enim fugiat consequat duis magna ipsum ut Lorem nisi aliqua dolore sunt esse mollit. Enim non nulla laborum et. Ad voluptate consequat pariatur proident non aliquip officia nisi ut elit ipsum laborum</p>""
  },
  {
    "title": "Third Title",
    "iconAfter": <Icon name="icon-twitter" />,
    "content": <p>Laboris magna labore aute amet non tempor ut labore dolore labore adipisicing laboris sint ex. Voluptate qui id mollit officia amet laboris esse excepteur Lorem sint nostrud proident sit nulla. Veniam aliqua eu laboris reprehenderit esse nostrud non est qui consequat labore ullamco Lorem. Enim fugiat consequat duis magna ipsum ut Lorem nisi aliqua dolore sunt esse mollit. Enim non nulla laborum et. Ad voluptate consequat pariatur proident non aliquip officia nisi ut elit ipsum laborum</p>""
  }
];

<Accordion data={data} />