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 the deprecated 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

Business parcel

Weight:
Max 35 kg per parcel
Delivery:
Tomorrow at 09-13
Price:
Calculation available

Mailbox parcel

Weight:
Max 5 kg per parcel
Delivery:
Monday
Price:
Calculation available

Home delivery parcel

Weight:
Max 35 kg per parcel
Delivery:
Tomorrow at 15-22
Price:
Calculation available
 
<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&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">
  <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">
  <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

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

Active state on input

<fieldset class="flex flex-wrap gaxs">
<div>
  <input
    type="radio"
    class="hidden"
    name="typeselect"
    id="typeselect1"
    value="type1"
  /><label for="typeselect1" class="mb-card pam"
    >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"
    >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"
    >Type3 <span class="text-0.875r lh-tight db">Description</span></label
  >
</div>
</fieldset>