@govbr-ds/core/dist/components/list/examples/list-simples-selecionaveis.html

Padrão Digital de Governo

<div class="br-list" role="list">
  <div class="header">
    <div class="title">Itens selecionáveis</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">
        ITEM
        Texto principal
      </div>
      <div class="col-auto">
        <div class="br-checkbox hidden-label">
          <input id="check-01" name="check-01" type="checkbox" aria-label="ITEM Texto principal"/>
          <label for="check-01"></label>
        </div>
      </div>
    </div>
  </div>
  <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">
        ITEM
        Texto principal
      </div>
      <div class="col-auto">
        <div class="br-checkbox hidden-label">
          <input id="check-02" name="check-02" type="checkbox" aria-label="ITEM Texto principal"/>
          <label for="check-02"></label>
        </div>
      </div>
    </div>
  </div>
  <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">
        ITEM
        Texto principal
      </div>
      <div class="col-auto">
        <div class="br-checkbox hidden-label">
          <input id="check-03" name="check-03" type="checkbox" aria-label="ITEM Texto principal"/>
          <label for="check-03"></label>
        </div>
      </div>
    </div>
  </div>
</div>