Accordion

An Accordion component is a collapsible structure used to organize and hide or reveal content, such as FAQs or detailed sections. Each accordion consists of AccordionItems that contain the actual content.

Example

Preview

Accordion header text

Accordion subheader text

Code

import {
  Accordion as AccordionRoot,
  AccordionHeader,
  AccordionItem,
  AccordionItemContent,
  AccordionItemHeader,
  AccordionItemText,
  AccordionSubheader,
  AccordionWrapper,
} from '@hv/ui/accordion';
import { Text } from '@hv/ui/text';

export default function AccordionExample({
  id,
  openByDefault,
  header,
  subheader,
  accordionItems = [],
  ...variants
}) {
  return (
    <AccordionWrapper {...variants}>
      <AccordionHeader className='m-0'>
        <Text format='markdown' text={header} id={id} type='text' />
      </AccordionHeader>
      {subheader && (
        <AccordionSubheader className='m-0'>
          <Text format='markdown' text={subheader} id={id} type='text' />
        </AccordionSubheader>
      )}
      <AccordionRoot
        type='multiple'
        defaultValue={openByDefault ? accordionItems?.map(item => item.id) : []}
      >
        {accordionItems.map(item => {
          return (
            <AccordionItem
              key={item.id}
              value={item.id}
              textPosition={variants.itemTextPosition}
            >
              <AccordionItemHeader textPosition={variants.itemTextPosition}>
                <Text
                  format='markdown'
                  text={item.header}
                  id={item.id}
                  type='text'
                />
              </AccordionItemHeader>
              <AccordionItemContent>
                <AccordionItemText>
                  <Text
                    format='markdown'
                    text={item.text}
                    id={item.id}
                    type='text'
                  />
                </AccordionItemText>
              </AccordionItemContent>
            </AccordionItem>
          );
        })}
      </AccordionRoot>
    </AccordionWrapper>
  );
}

Variants

The variants object allows you to customize the visual appearance of the accordion, such as padding, full-bleed, and text alignment.

Use theicon above to preview

Variant	Description	Values
fullBleed	Boolean that determines whether the accordion takes up the full width of its container.	true false
paddingTop	The amount of space above the accordion.	regular extra
paddingBottom	The amount of space below the accordion.	regular extra
textPosition	The alignment of the accordion text	left center right

Accordion Configurations

Field	Description
header	The main title for the accordion.
subheader	Optional text to provide more information below the header.
accordionItems	Array of AccordionItem objects, each representing a collapsible accordion item.
openByDefault	Boolean that indicates if the accordion items should be open by default when loaded.
variants	Configuration object for visual variants such as padding, alignment, and full-bleed.

Accordion Item

An AccordionItem is the collapsible content inside each accordion. It includes a header and content that is revealed when the item is expanded.

Accordion Item Configurations

Field	Description
header	The title for the accordion item. This text appears on the header of each item.
text	The text inside the accordion item. This is the text displayed when expanded.
mediaAssets	An array of media items (images, videos) that can be shown inside the accordion item.
mediaBlocks	Optional additional media content blocks inside the accordion item.

Usage Notes

• Accordion supports multiple accordion items, which can be expanded or collapsed individually.
• openByDefault allows you to control if all accordion items should be open on initial load.
• AccordionItem allows embedding of text, media, and other content blocks.

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides to modify styles for a particular instance.