Card
Simple Card
This is the most simple card
<div class="card">
This is the most simple card
</div>
Notice:
The width of .card is set to 100%, meaning that the size of a card depends on its wrapping container.
Color Variants
This is a primary card
This is a success card
This is a warning card
This is a danger card
<div class="card -primary">...</div>
<div class="card -success">...</div>
<div class="card -warning">...</div>
<div class="card -danger">...</div>
Usage
WT
Will Taylor (You)
Product Designer
A card can contain many things — really. It is up to you to decide. However, keep in mind that cards are usually meant for short and quick content. This is why it is good practice to avoid adding too many things inside them.
<div class="cols-5">
<div class="card">
<div class="avatar-block">
<div class="avatar -medium">WT</div>
<div class="nameholder">
<span class="name">Will Taylor (You)</span>
<span class="role small">Product Designer</span>
</div>
</div>
<p>A card can contain many things — ...</p>
<button class="btn -primary">Okay, got it!</button>
</div>
</div>