Estoy agregando una funcionalidad al proyecto existente en Angular. Tengo algunas tarjetas de Bulma que muestran cierta información. Me gustaría tener la siguiente opción: cuando no se hace clic en ninguna de las tarjetas, mostrarán solo una versión corta de los datos que obtienen de la API. Si hago clic en una de las tarjetas, me gustaría que esa tarjeta se expandiera horizontal y verticalmente, de modo que se hiciera más ancha y alta, y mostrara la información completa de la API. Mi problema es que no se por donde empezar. Veo mención de Ionic, Angular Material, biblioteca Bulma personalizada como esta https://bulma-collapsible.netlify.app/installation/ . Me gustaría usar la solución más simple. Si alguien me puede señalar en la dirección correcta, estaría muy agradecido. Tutorial, manual, cualquier cosa, ya que no estoy seguro de qué herramienta necesito para esto.

EDITAR Entonces, la tarjeta superior izquierda debe expandirse en el rectángulo rojo, y otras tarjetas deben cambiarse debajo de esta gran tarjeta expandida. También sería beneficioso si solo se puede expandir una tarjeta a la vez. Entonces, si el primero se expande y hago clic en el segundo, el primero colapsaría y el segundo se expandiría.

 <section class="section"> <div class="container"> <div class="columns is-multiline" *ngIf="dummyCampaigns"> <div class="column is-4" *ngFor="let campaign of dummyCampaigns"> <div class="card"> <div class="card-image"> <figure class="image is-4by3"> <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"> </figure> </div> <div class="card-content"> <div class="media"> <div class="media-content"> <p class="title is-4">{{ campaign.title }}</p> <p class="subtitle is-6">{{ campaign.owner }}</p> </div> </div> <div class="content"> {{ campaign.campaignDetails }} <br> <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time> </div> </div> </div> </div> </div> </div> </section>