@govbr-ds/core/dist/components/list/examples/list-group-expansion.html

Padrão Digital de Governo

<div class="br-list" role="list">
  <div class="header">
    <div class="title">Por expansão</div>
  </div><span class="br-divider"></span>
  <div class="br-item" role="listitem" data-toggle="collapse" data-target="l1">
    <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="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" data-toggle="collapse" data-target="l2">
    <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="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" data-toggle="collapse" data-target="l3">
    <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="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>