Cards
Entrances
mb-card provides background, shape and hover state for interactive elements which
leads to another page such as entrance links and custom service selectors. For instance,
tiles or boxes with descriptions or dynamic information that contain more than just
a label.
This isn’t an alternative to standard links, buttons, form elements or backgrounds but as a higher level entrance and select elements for front pages and dashboards.
Examples
Entrance card
<div class="flex flex-wrap gas">
<a href="#" class="mb-card pam pbl">
<h3>Business parcel</h3>
<dl class="mt-auto mb0">
<div>
<dt class="di">Weight:</dt>
<dd class="di">Max 35 kg per parcel</dd>
</div>
<div>
<dt class="di">Delivery:</dt>
<dd class="di">Tomorrow at 09-13</dd>
</div>
<div>
<dt class="di">Price:</dt>
<dd class="di">Calculation available</dd>
</div>
</dl>
</a>
<a href="#" class="mb-card pam pbl">
<h3>Mailbox parcel</h3>
<dl class="mt-auto mb0">
<div>
<dt class="di">Weight:</dt>
<dd class="di">Max 5 kg per parcel</dd>
</div>
<div>
<dt class="di">Delivery:</dt>
<dd class="di">Monday</dd>
</div>
<div>
<dt class="di">Price:</dt>
<dd class="di">Calculation available</dd>
</div>
</dl>
</a>
<a href="#" class="mb-card pam pbl">
<h3>Home delivery parcel</h3>
<dl class="mt-auto mb0">
<div>
<dt class="di">Weight:</dt>
<dd class="di">Max 35 kg per parcel</dd>
</div>
<div>
<dt class="di">Delivery:</dt>
<dd class="di">Tomorrow at 15-22</dd>
</div>
<div>
<dt class="di">Price:</dt>
<dd class="di">Calculation available</dd>
</div>
</dl>
</a>
</div>