@govbr-ds/core
Version:
Padrão Digital de Governo
96 lines (95 loc) • 3.81 kB
HTML
<div class="br-list horizontal mt-5" role="list">
<div class="header">
<div class="title">Versão com expansão</div>
</div><span class="br-divider"></span>
<div class="group">
<div class="br-item" role="listitem" data-toggle="collapse" data-target="h1">
<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="h1" 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 class="group">
<div class="br-item" role="listitem" data-toggle="collapse" data-target="h2">
<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="h2" 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 class="group">
<div class="br-item" role="listitem" data-toggle="collapse" data-target="h3">
<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="h3" 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>