@govbr-ds/core
Version:
Padrão Digital de Governo
89 lines (88 loc) • 3.75 kB
HTML
<div class="accordion-example">
<div class="br-list" role="list">
<div class="br-item" role="listitem" tabindex="0" data-toggle="accordion" data-target="a-l1" data-group="group1">
<div class="content">
<div class="flex-fill">RÓTULO 01</div><i class="fas fa-angle-down" aria-hidden="true"></i>
</div>
</div>
<div class="br-list" id="a-l1" role="list" hidden="hidden">
<div class="br-item" role="listitem">
<div class="row align-items-center">
<div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
</div>
<div class="col">Sub-item</div>
</div>
</div><span class="br-divider"></span>
<div class="br-item" role="listitem">
<div class="row align-items-center">
<div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
</div>
<div class="col">Sub-item</div>
</div>
</div><span class="br-divider"></span>
<div class="br-item" role="listitem">
<div class="row align-items-center">
<div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
</div>
<div class="col">Sub-item</div>
</div>
</div><span class="br-divider"></span>
</div>
<div class="br-item" role="listitem" tabindex="0" data-toggle="accordion" data-target="a-l2" data-group="group1">
<div class="content">
<div class="flex-fill">RÓTULO 02</div><i class="fas fa-angle-down" aria-hidden="true"></i>
</div>
</div>
<div class="br-list" id="a-l2" role="list" hidden="hidden">
<div class="br-item" role="listitem">
<div class="row align-items-center">
<div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
</div>
<div class="col">Sub-item</div>
</div>
</div><span class="br-divider"></span>
<div class="br-item" role="listitem">
<div class="row align-items-center">
<div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
</div>
<div class="col">Sub-item</div>
</div>
</div><span class="br-divider"></span>
<div class="br-item" role="listitem">
<div class="row align-items-center">
<div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
</div>
<div class="col">Sub-item</div>
</div>
</div><span class="br-divider"></span>
</div>
<div class="br-item" role="listitem" tabindex="0" data-toggle="accordion" data-target="a-l3" data-group="group1">
<div class="content">
<div class="flex-fill">RÓTULO 03</div><i class="fas fa-angle-down" aria-hidden="true"></i>
</div>
</div>
<div class="br-list" id="a-l3" role="list" hidden="hidden">
<div class="br-item" role="listitem">
<div class="row align-items-center">
<div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
</div>
<div class="col">Sub-item</div>
</div>
</div><span class="br-divider"></span>
<div class="br-item" role="listitem">
<div class="row align-items-center">
<div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
</div>
<div class="col">Sub-item</div>
</div>
</div><span class="br-divider"></span>
<div class="br-item" role="listitem">
<div class="row align-items-center">
<div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
</div>
<div class="col">Sub-item</div>
</div>
</div><span class="br-divider"></span>
</div>
</div>
</div>