Card
Our cards provide a flexible and extensible content container with multiple variants and options.
Invoice card
Used for displaying information about invoices. In most cases this should be clickable link to full detail about the invoice.
<a href="#" class="card card-action">
<div class="card-body">
<h2 class="card-title d-flex justify-content-between align-items-center">
<span>Årsavgift 2017</span>
<span class="badge badge-danger ml-2">Förfallen</span>
</h2>
<div class="row">
<div class="col mb-2">
<h6>Förfallodatum</h6>
<span class="h3">2017-07-15</span>
</div>
<div class="col mb-2">
<h6>Att betala</h6>
<span class="h3">250,00kr</span>
</div>
</div>
<h6>Meddelande</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</a>
Event card
Used for displaying information about events. In most cases this should be clickable link to full detail about the event.
<a href="#" class="card card-action">
<img class="card-img-top" src="https://picsum.photos/600/300" alt="Blodomloppet Örebro">
<div class="card-body">
<h3 class="card-title d-flex justify-content-between align-items-center">
<span>Blodomloppet Örebro</span>
<span class="badge badge-primary ml-2">Bokad</span>
</h3>
<div class="row align-items-center">
<div class="col-md flex-grow-0 text-md-center">
<span class="h3 mb-0">8</span>
<p class="mb-md-0">Januari</p>
</div>
<div class="col-md">
<div class="row">
<h4 class="col-md-auto"><i class="fal fa-map-marker-alt"></i> Stockholm</h4>
<h4 class="col-md-auto"><i class="fal fa-clock"></i> 13:00 - 19:00</h4>
</div>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</a>
Other card variants
You can mix and match many sorts of HTML content in the cards, refer to the Bootstrap documentation for inspiration.