Accordion<!-- --> | Broadacre

Accordion

Pattern Lineage: ui-iconshyperlink

Demo

This is the first item's accordion body. Text Block, no max characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Est arcu pharetra sed donec et diam.

Optional CTA

This is the second item's accordion body. Text Block, no max characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Est arcu pharetra sed donec et diam.

Optional CTA

This is the third item's accordion body. Text Block, no max characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Est arcu pharetra sed donec et diam.

Optional CTA
Usage
<div class="accordion accordion-roomy accordion-flush" id="accordionExample">
    <hr class="full-divider " />
    <div class="accordion-item">
        <div class="accordion-header h400" id="headingOne"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><i class="icon-chevron-right"></i>Accordion Drawer #1</button></div>
        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne">
            <div class="accordion-body">
                <p>This is the first item&#x27;s accordion body. Text Block, no max characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Est arcu pharetra sed donec et diam.</p><a class="hyperlink arrow-right" href="/#">Optional CTA</a>
            </div>
        </div>
    </div>
    <hr class="full-divider " />
    <div class="accordion-item">
        <div class="accordion-header h400" id="headingTwo"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><i class="icon-chevron-right"></i>Accordion Drawer #2</button></div>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo">
            <div class="accordion-body">
                <p>This is the second item&#x27;s accordion body. Text Block, no max characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Est arcu pharetra sed donec et diam.</p><a class="hyperlink arrow-right" href="/#">Optional CTA</a>
            </div>
        </div>
    </div>
    <hr class="full-divider " />
    <div class="accordion-item">
        <div class="accordion-header h400" id="headingThree"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><i class="icon-chevron-right"></i>Accordion Drawer #3</button></div>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree">
            <div class="accordion-body">
                <p>This is the third item&#x27;s accordion body. Text Block, no max characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Est arcu pharetra sed donec et diam.</p><a class="hyperlink arrow-right" href="/#">Optional CTA</a>
            </div>
        </div>
    </div>
    <hr class="full-divider " />
</div>
Options