Affichage des cartes
John
Architecte et ingénieur
| Classe | définit |
|---|---|
| w3-card | Conteneur pour tout contenu HTML (avec la frontière) |
| w3-card-2 | Conteneur pour tout contenu HTML (shadow bordered 2px) |
| w3-card-4 | Conteneur pour tout contenu HTML (shadow bordered 4px) |
| w3-card-8 | Conteneur pour tout contenu HTML (shadow bordered 8px) |
| w3-card-12 | Conteneur pour tout contenu HTML (12px bordée ombre) |
| w3-card-16 | Conteneur pour tout contenu HTML (16px bordée ombre) |
| w3-card-24 | Conteneur pour tout contenu HTML (24px bordée ombre) |
Cartes de couleur
Créer des cartes de type papier avec les classes w3-carte et utiliser une classe w3-couleur pour ajouter une couleur:
w3-card-2
w3-card-4
w3-card-8
Photo Card
La langue du Troll à Hardanger, Norvège
Exemple
<div class="w3-card-12">
<img src="img_fjords.jpg"
alt="Norway">
<div class="w3-container w3-center">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div> Try It Yourself » Contenu de la carte
Entête
Certains textes .. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Exemple
<div class="w3-card-4">
<header class="w3-container
w3-blue">
<h1>Header</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum...</p>
<button
class="w3-btn">Button</button>
</div>
<footer class="w3-container
w3-blue">
<h5>Footer</h5>
</footer>
</div> Try It Yourself » Hover effet
La classe w3-hover-shadow ajoute un effet d'ombre sur le vol stationnaire - cela fera tout élément ressembler à une carte sur la souris sur (même style que w3-card-4).
Survolez moi!
Exemple
<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over
me!</p>
</div> Try It Yourself » Autres exemples
Demande d'ami
homme de la rue
Exemple
<div class="w3-card-8 w3-dark-grey">
<div class="w3-container
w3-center">
<h3>Friend request</h3>
<img src="img_avatar3.png"
alt="Avatar" style="width:80%">
<h5>John
Doe</h5>
<button class="w3-btn w3-green">Accept</button>
<button class="w3-btn w3-red">Decline</button>
</div>
</div> Try It Yourself » homme de la rue
1 nouvelle demande d'ami
PDG dans les écoles Puissant. Marketing et publicité. A la recherche d'un nouvel emploi et de nouvelles opportunités.
Exemple
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>John Doe</h3>
</header>
<div
class="w3-container">
<p>1 new friend request</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>President/CEO at Mighty Schools...</p>
</div>
<button class="w3-btn-block
w3-dark-grey">+ Connect</button>
</div> Try It Yourself »