Collapse: code & specs

This page documents the expected code output and structure necessary to display a collapse correctly in the UI.

Collapse base code

The collapse works by using a trigger, usually <a>, with the data-bs-toggle="collapse" attribute and role="button", with the href pointing towards the collapse-card classes id.

Collapse title

Collapse content. Etiam id velit feugiat, scelerisque velit a, scelerisque nunc. Vestibulum ante ipsum primis in faucibus orci luctus.

html 
<div class="collapse-item">
    <a class="collapse-trigger" data-bs-toggle="collapse" href="#collapseexample" role="button" aria-expanded="false" aria-controls="collapseexample">Collapse trigger</a>

    <div class="collapse-card collapse" id="collapseexample">
        <div class="collapse-content">
            <div class="text-block">
                <h6 class="collapse-title">Collapse title</h6>
                <p>Collapse content. Etiam id velit feugiat, scelerisque velit a, scelerisque nunc. Vestibulum ante ipsum primis in faucibus orci luctus.</p>
            </div>
        </div>
    </div>
</div>

Close button

Add the close button using a <button> with the class btn-close directly underneath the .collapse-content

Collapse title

Collapse content. Etiam id velit feugiat, scelerisque velit a, scelerisque nunc. Vestibulum ante ipsum primis in faucibus orci luctus.

html 
<div class="collapse-item">
    <a class="collapse-trigger" data-bs-toggle="collapse" href="#collapseexampleclose" role="button" aria-expanded="false" aria-controls="collapseexampleclose">Collapse trigger</a>

    <div class="collapse-card collapse" id="collapseexampleclose">
        <div class="collapse-content">
            <div class="text-block">
                <h6 class="collapse-title">Collapse title</h6>
                <p>Collapse content. Etiam id velit feugiat, scelerisque velit a, scelerisque nunc. Vestibulum ante ipsum primis in faucibus orci luctus.</p>
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-toggle="collapse" href="#collapseexampleclose" aria-label="Close"></button>
    </div>
</div>

Context bar

The collapse-contextbar provides correct spacing and padding to allow most types of component to be used in a collapse.

  • List heading
  • List item 1
  • List item 2
  • List item 3
Standalone link
html 
<div class="collapse-item">
    <a class="collapse-trigger" data-bs-toggle="collapse" href="#collapse-contextbar" role="button" aria-expanded="true" aria-controls="collapse-contextbar">Context bar example</a>
    <div class="collapse-card collapse show" id="collapse-contextbar">
        <div class="collapse-content">
            <div class="collapse-contextbar">
                <ul class="list">
                    <li class="list-heading">List heading</li>
                    <li class="list-item">
                        <span class="list-icon text-success">
                            <i class="fa-solid fa-circle-check" aria-hidden="true"></i>
                        </span>
                        List item 1
                    </li>
                    <li class="list-item">
                        <span class="list-icon text-success">
                            <i class="fa-solid fa-circle-check" aria-hidden="true"></i>
                        </span>
                        List item 2
                    </li>
                    <li class="list-item">
                        <span class="list-icon text-success">
                            <i class="fa-solid fa-circle-check" aria-hidden="true"></i>
                        </span>
                        List item 3
                    </li>
                </ul>
                <a class="link-standalone" href="#" target="_self"> 
                    <span class="icon">
                        <i class="fa-regular fa-arrow-down-to-bracket" aria-hidden="true"></i>
                    </span>
                    Standalone link
                </a>
            </div>
        </div>
    </div>
</div>