@govbr-ds/core/dist/components/card/examples/card-collapse.html

Padrão Digital de Governo

<div class="col-sm-6 col-md-4 col-lg-3">
  <div class="br-card">
    <div class="card-header">
      <div class="d-flex"><span class="br-avatar mt-1" title="Fulano da Silva"><span class="content"><img src="https://picsum.photos/id/823/400"/></span></span>
        <div class="ml-3">
          <div class="text-weight-semi-bold text-up-02">Maria Amorim</div>
          <div>UX Designer</div>
        </div>
        <div class="ml-auto">
          <button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-ellipsis-v" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="card-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste sit dolor exercitationem asperiores voluptates tenetur consectetur error vero ut expedita, sapiente voluptate nulla esse! Veritatis aliquam consectetur quod harum expedita!</p>
    </div>
    <div class="card-footer">
      <div class="text-right">
        <button class="br-button circle" type="button" aria-label="Botão para expandir ou recolher conteúdos adicionais" data-toggle="collapse" data-target="expanded" aria-controls="expanded" aria-expanded="false" data-visible="false"><i class="fas fa-chevron-down" aria-hidden="true"></i>
        </button>
      </div>
      <div id="expanded" hidden="hidden">
        <div class="br-list mt-3">
          <div class="br-item">
            <div class="row">
              <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
              </div>
              <div class="col">
                <p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
              </div>
            </div>
          </div><span class="br-divider"></span>
          <div class="br-item">
            <div class="row">
              <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
              </div>
              <div class="col">
                <p class="m-0">Nesciunt, laudantium ea officiis hic tempora velit aperiam nemo accusamus nisi, eligendi ducimus! Incidunt ullam minima ratione amet sequi.</p>
              </div>
            </div>
          </div><span class="br-divider"></span>
          <div class="br-item">
            <div class="row">
              <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i>
              </div>
              <div class="col">
                <p class="m-0">Voluptates, iste recusandae.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>