Cartes (cards)

Per afegir una imatge i descripció als botons de tota la vida!

Les cartes (o cards) són una alternativa als botons tradicionals. S'utilitzen quan es vol donar un efecte més visual i impactant a la informació.

Exemple estàtic de carta

Per veure un exemple d'us real de cards, visita la pàgina dels campionats de robòtica.

Com s'insereix una carta

1. Copia el codi a l'editor HTML que estiguis utilitzant.

2. Canvia el text que diu linkImatge per l'enllaç de la imatge que vulguis mostrar com a miniatura de la carta.

3. Canvia el text que diu textAlternatiuImatge per un text descriptiu breu de la imatge.

4. Canviar el text que diu titolCard pel títol que vulguis donar a la carta.

5. Canviar el text que diu cardTextCardTextCardTextCardTextCardText pel text principal de la carta. També el pots treure, si et sembla que no cal posar-n'hi cap.

6. Canviar el text que diu linkBoto per l'enllaç on vulguis dirigir l'usuari quan cliqui el botó (si tens dubtes amb els enllaços, pots consultar la guia d'enllaços) i textBoto pel text que ha de mostrar el botó.

<div class="card">
    <img class="card-img-top" src="linkImatge" alt="textAlternatiuImatge">
    <div class="card-body">
        <h3 class="card-title">titolCard</h3>
        <p class="card-text">cardTextCardTextCardTextCardTextCardText</p><a href="linkBoto" class="btn btn-primary">textBoto</a>
        <a class="btn btn-primary" href="linkBoto" role="button">textBotó</a>
    </div>
</div>

Recorda que pots treure qualsevol fragment de codi que no sigui necessari en el cas concret que t'ocupa. Però tingues en compte de no deixar etiquetes obertes al mig de l'estructura o el resultat no es veurà bé.