Customising header

You may provide the header prop of AccordionItem with any JSX elements or React components, allowing the item header be to freely customised.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quisque eget luctus mi, vehicula mollis lorem. Proin fringilla vel erat quis sodales. Nam ex enim, eleifend venenatis lectus vitae, accumsan auctor mi.

import { Accordion, AccordionItem } from '@szhsin/react-accordion';
import styles from './styles.module.css';

export default function Example() {
  return (
    <Accordion>
      <AccordionItem
        header={
          <div>
            <p className={styles.title}>What is Lorem Ipsum?</p>
            <p className={styles.description}>
              Lorem ipsum is a placeholder text commonly used to
              demonstrate the visual form of a document.
            </p>
          </div>
        }
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </AccordionItem>

      <AccordionItem header="Where does it come from?">
        Quisque eget luctus mi, vehicula mollis lorem. Proin fringilla
        vel erat quis sodales. Nam ex enim, eleifend venenatis lectus
        vitae, accumsan auctor mi.
      </AccordionItem>
    </Accordion>
  );
}

styles.module.css

.title {
  font-size: 1.5rem;
  font-weight: bold;
}

.description {
  color: var(--ifm-color-gray-600);
  margin: 0;
}

info

You may use the headingTag prop to set a heading level which is appropriate for the information structure of the page. By default a h3 tag is rendered.