Cartões exibindo
João
Arquiteto e engenheiro
| Classe | define |
|---|---|
| W3-card | Recipiente para qualquer conteúdo HTML (com margem) |
| w3-card-2 | Recipiente para qualquer conteúdo HTML (sombra com borda 2px) |
| w3-card-4 | Recipiente para qualquer conteúdo HTML (sombra com borda 4px) |
| w3-card-8 | Recipiente para qualquer conteúdo HTML (sombra com borda 8px) |
| w3-card-12 | Recipiente para qualquer conteúdo HTML (12px fronteira de sombra) |
| w3-card-16 | Recipiente para qualquer conteúdo HTML (16px fronteira de sombra) |
| w3-card-24 | Recipiente para qualquer conteúdo HTML (24px fronteira de sombra) |
Colorido Cartões
Criar cartões de papel-like com as classes w3-cartão, e usar uma classe w3-color para adicionar uma cor:
w3-card-2
w3-card-4
w3-card-8
cartão da foto
A língua do Troll em Hardanger, Noruega
Exemplo
<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> Tente você mesmo " conteúdo do cartão
Cabeçalho
Algum texto .. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed não eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Exemplo
<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> Tente você mesmo " Hover Effect
A classe w3-pairar-sombra acrescenta um efeito de sombra em foco - isto fará qualquer elemento parecido com um cartão no mouse-over (mesmo estilo que w3-card-4).
Passe o mouse sobre mim!
Exemplo
<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over
me!</p>
</div> Tente você mesmo " mais Exemplos
Pedido de amizade
John Doe
Exemplo
<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> Tente você mesmo " John Doe
1 novo pedido de amigo
CEO da Poderoso Escolas. Marketing e publicidade. Procurando um novo emprego e novas oportunidades.
Exemplo
<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> Tente você mesmo "