(Accordion item) (accordion_item)

Internal: to be used in the 'Accordion' component.

🔗 External documentation.

ID Label Description Schema
title Title Item title.
content Content Accordion item content.
opened Opened If the accordion item is opened by default.
                        type: boolean

                      
heading_level Heading level
                        type: integer
enum:
    - 2
    - 3
    - 4
    - 5
    - 6

                      
item_id ID Must start with a letter. Randomly generated if empty.
                        type: string

                      
            id: accordion_item
label: '(Accordion item)'
description: "Internal: to be used in the 'Accordion' component."
group: Accordion
homepage: 'https://designsystem.digital.gov/components/accordion/'
slots:
    title:
        id: title
        label: Title
        description: 'Item title.'
    content:
        id: content
        label: Content
        description: 'Accordion item content.'
props:
    opened:
        id: opened
        label: Opened
        description: 'If the accordion item is opened by default.'
        schema:
            type: boolean
    heading_level:
        id: heading_level
        label: 'Heading level'
        schema:
            type: integer
            enum:
                - 2
                - 3
                - 4
                - 5
                - 6
    item_id:
        id: item_id
        label: ID
        description: 'Must start with a letter. Randomly generated if empty.'
        schema:
            type: string
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': accordion_item

          

<h2 class="usa-accordion__heading"> <button aria-controls="heading--accordion-item--1353849829" aria-expanded="false" class="usa-accordion__button" type="button"> </button> </h2> <div class="usa-accordion__content usa-prose" id="accordion-item--1353849829"> <div class="accordion-body"></div> </div>