Cartes

Les cartes sont un élément essentiel du framework CSS de Materialise, elles fournissent une approche sémantique et esthétique pour afficher le contenu de manière compréhensible.

Syntaxe #

• Une carte de base
• Création d’une carte horizontale
• Ajout d’un bouton d’action flottant à mi-chemin
• Révélation de la carte
• Onglets dans les cartes
• Différentes tailles de cartes
• Panneau de carte

Carte de base #

<div class="container">
  <div class="row">
    <div class="col s6">
      <div class="card">

        <div class="card-image"> <!-- Card Image -->
          <img src="image.png" alt="Image">
        </div>

        <div class="card-content"> <!-- Card Content -->
          <h3>This is a card</h3>
          <p class="flow-text">Cards are really cool for conveying information in a beautiful way.</p>
        </div>

        <div class="card-action"> <!-- Card Action -->
          <a href="#" class="btn orange">Read More</a>
        </div>

      </div>
    </div>
  </div>
</div>

Important:

• Utilisez .card comme principal élément environnant.
• Entourez les images avec .card-image
• Entourez le contenu avec .card-content
• Boutons d’action surround avec .card-action

Voici à quoi ça ressemble :

Carte horizontale #

<div class="container">
  <div class="row">
    <div class="col s12">
      <div class="card horizontal">
        <div class="card-image"><img src="image.png"></div>
        <div class="card-stacked">
          <div class="card-content">
            <h3>This is a card</h3>
            <p class="flow-text">Cards are really cool for conveying information in a beautiful way.</p>
          </div>
          <div class="card-action"><a href="#" class="btn orange">Read More</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

Important:

• Ajouter .horizontal à l’élément de la carte
• Entourez .card-content et .card-action d’un div avec .card-stacked

Voici à quoi ça ressemble :

Carte avec un bouton d’action flottant (FAB) #

<div class="container">
    <div class="row">
        <div class="col s5">
            <div class="card">
                <div class="card-image">
                  <img src="image.png">
                  <a href="#" class="btn-floating halfway-fab orange btn-large"><i class="material-icons">add</i></a>
                </div>
                <div class="card-content">
                    <h3>This is a card</h3>
                    <p class="flow-text">Cards are really cool for conveying information in a beautiful way.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Important:

• Mettez un a.btn-floating.halfway-fab à l’intérieur du conteneur .card-image.

Voici à quoi ça ressemble :