Accordion Item
draft

An Accordion Item is a single expandable section with its own header and content, used within an Accordion.

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdAccordionItem } from '@fbin-web/neighborhood-core';
<nbhd-accordion-item header="Accordion Item" icon="chevron">
  <nbhd-text> This is the content of the accordion item. <a href="#">This is a link</a>. </nbhd-text>
</nbhd-accordion-item>

React 

import { NbhdAccordionItem, NbhdText } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdAccordionItem
      header="Accordion Item"
      icon="chevron">
      <NbhdText>
        {' '}
        This is the content of the accordion item. <a href="#">This is a link</a>.{' '}
      </NbhdText>
    </NbhdAccordionItem>
  </>
);

Properties

Property Attribute Type Default Description
expanded expanded boolean false Controls whether the accordion item is expanded or collapsed.
dark dark boolean false Applies dark mode styling to the accordion item.
icon icon chevron | plus-minus chevron The icon type to display in the header.
header header string The header text for the accordion item.

Events

Name Description Event Detail
nbhd-accordion-toggle Emitted when the accordion item is toggled. { expanded: boolean }

Slots

Name Description
(default) The main content area that is shown when the accordion item is expanded.
header The header content for the accordion item. Falls back to the header property if not provided.

CSS Parts

Name Description
base The component's base wrapper.
header The accordion item header button.
icon The icon displayed in the header.
panel The expandable content panel region.
panel-content The inner content wrapper within the panel.

CSS Properties

Property Default Value
--nbhd-accordionItem-header-backgroundColor transparent
--nbhd-accordionItem-header-borderRadius 0
--nbhd-accordionItem-header-cursor pointer
--nbhd-accordionItem-header-fontSize var(--nbhd-fontSize-md)
--nbhd-accordionItem-header-fontWeight var(--nbhd-fontWeight-500)
--nbhd-accordionItem-header-paddingBlock var(--nbhd-space-4)
--nbhd-accordionItem-header-paddingInline var(--nbhd-space-4)
--nbhd-accordionItem-header-textAlign start
--nbhd-accordionItem-header-textTransform none
--nbhd-accordionItem-panel-paddingBlock var(--nbhd-space-4)
--nbhd-accordionItem-panel-paddingInline var(--nbhd-space-4)

Dependencies

This component contains the following components as dependencies.