@contentful/f36-accordion

Forma 36: Accordion React Component

Usage no npm install needed!

<script type="module">
  import contentfulF36Accordion from 'https://cdn.skypack.dev/@contentful/f36-accordion';
</script>

README

title: 'Accordion' type: 'component' slug: /components/accordion/ github: 'https://github.com/contentful/forma-36/tree/master/packages/components/accordion' typescript: ./src/Accordion.tsx,./src/AccordionItem/AccordionItem.tsx

Accordions are a good way to deliver a large amount of information. An accordion is a list of headers that after being clicked reveal or hide more content related to them. The header gives the user a summary of the content and the user decides if they need to see the extended content or not.

Import

import { Accordion } from '@contentful/f36-components';
// or
import { Accordion } from '@contentful/f36-accordion';

Examples

The accordion has two variations that define the alignment of the chevron icon: left or right.

Basic usage

Using it with other components

Other typographic components can be passed as the accordion's title and anything can be used as the accordion's content. For example:

Props (API reference)

Accordion

Accordion.Item

Content guidelines

  • The title should be a short message that summarize the content of the accordion.
  • Anything can be passed as the content of the accordion, but often organizing it with Texts and Tables would be enough.
  • When using headings, be mindful about the heading levels. The header is a Subheading with h2 tag.

Accessibility

  • It allows keyboard navigation to open and close the accordions