Skip to main content
MybringDesign System

Cards and tabs

Entrances and selection

mb-card provides a set of properties for interactive elements such as entrance links, tabs and custom service selectors. For instance, tiles or boxes with descriptions or dynamic information that contain more than just a label.

The component doesn’t provide any inner settings, only background, shape and different states.

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. Not to be confused with local navigation.

Class Declaration Usage
mb-card display: block;
color: hsla(0, 0%, 0%, 0.75);
background-color: hsl(86, 47%, 94%);
border-bottom: 2px solid hsl(86, 47%, 94%);
border-radius: 2px;
transition: 0.15s ease-out;
Basic style. Includes a hover/focus state. Provides the active state if the class is applied to the input sibling element (see input example).
mb-card--active color: hsl(0, 0%, 20%);
background-color: hsl(86, 44%, 89%);
border-bottom-color: hsl(155, 100%, 19.6%);
box-shadow: none;
Only needed if showing active/selected state and the element is not an input sibling (see examples).
hidden opacity: 0;
position: fixed;
width: 0px;
Only needed if working with inputs. Place on the input element to hide it without removing the ability for keyboard navigation (see input example). Does not work on other elements.

Examples

Entrance card

<div class="flex flex-wrap">
<a href="#" class="mb-card pam pbl mrs">
  <h3>Business parcel</h3>
  <dl class="mt-auto mb0">
    <div>
      <dt class="di">Weight:</dt>
      <dd class="di">Max 35&nbsp;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 mrs">
  <h3>Mailbox parcel</h3>
  <dl class="mt-auto mb0">
    <div>
      <dt class="di">Weight:</dt>
      <dd class="di">Max 5&nbsp;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 mrs">
  <h3>Home delivery parcel</h3>
  <dl class="mt-auto mb0">
    <div>
      <dt class="di">Weight:</dt>
      <dd class="di">Max 35&nbsp;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>

Active state class / Tabs

<div class="flex flex-wrap">
<a href="#" class="mb-card phm pvs mbs mrxs">
  <span class="mrm">In transit</span><span class="fwb">11</span>
</a>
<a href="#" class="mb-card mb-card--active phm pvs mbs mrxs">
  <span class="mrm">Loaded on vehicle</span><span class="fwb">43</span>
</a>
<a href="#" class="mb-card phm pvs mbs mrxs">
  <span class="mrm">Attempted delivery</span><span class="fwb">13</span>
</a>
<a href="#" class="mb-card phm pvs mbs">
  <span class="mrm">Delivered</span><span class="fwb">243</span>
</a>
</div>

Active state on input

<fieldset class="flex flex-wrap">
<div>
  <input
    type="radio"
    class="hidden"
    name="typeselect"
    id="typeselect1"
    value="type1"
  /><label for="typeselect1" class="mb-card pam mrs"
    >Type1 <span class="text-0.875r lh-tight db">Description</span></label
  >
</div>
<div>
  <input
    type="radio"
    class="hidden"
    name="typeselect"
    id="typeselect2"
    value="type21"
    checked
  /><label for="typeselect2" class="mb-card pam mrs"
    >Type2 <span class="text-0.875r lh-tight db">Description</span></label
  >
</div>
<div>
  <input
    type="radio"
    class="hidden"
    name="typeselect"
    id="typeselect3"
    value="type3"
  /><label for="typeselect3" class="mb-card pam mrs"
    >Type3 <span class="text-0.875r lh-tight db">Description</span></label
  >
</div>
</fieldset>