Wyświetlanie kart
Jan
Architekt i inżynier
| Klasa | definiuje |
|---|---|
| w3-kartkę | Pojemnik na treści HTML (z ramką) |
| w3-card-2 | Pojemnik na treści HTML (2px ramką shadow) |
| w3-card-4 | Pojemnik na treści HTML (4px ramką shadow) |
| w3-card-8 | Pojemnik na treści HTML (8 pikseli ramką shadow) |
| w3-card-12 | Pojemnik na treści HTML (12px graniczy shadow) |
| w3-card-16 | Pojemnik na treści HTML (16px graniczy shadow) |
| w3-card-24 | Pojemnik na treści HTML (24px graniczy shadow) |
Kolorowe kartki
Tworzenie kartek papieru jak z klasami w3-kartę i użyć klasy w3 kolorów, aby dodać kolor:
w3-card-2
w3-card-4
w3-card-8
Karta fotograficzna
Język Troll w Hardanger w Norwegii
Przykład
<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> Spróbuj sam " Zawartość karty
nagłówek
Jakiś tekst Lorem ipsum dolor .. sit amet, consectetur adipisicing elit, sed nie eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea Commodo consequat.
Przykład
<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> Spróbuj sam " Efekt Hover
Klasa w3-hover cień dodaje efektu cienia przy aktywowaniu - to sprawi, że każdy element wygląda jak karta na myszy-over (tym samym stylu jak w3-card-4).
Najedź na mnie!
Więcej przykładów
Przyjaciel Zapytanie
nieznany z nazwiska
Przykład
<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> Spróbuj sam " nieznany z nazwiska
1 nowe żądanie przyjaciela
CEO Mighty Szkół. Marketing i reklama. Szukam nowej pracy i nowych możliwości.
Przykład
<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> Spróbuj sam "