Skip to main content

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.

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.