Skip to main content
MybringDesign System

Disclosure

Using summary and details as a native collapsible

By placing the class mb-disclosure on the details element, the combination with the summary element makes a native collapsible component with built-in functionality and accessibility features. To be as flexible as possible, the component comes without spacing around the content. The recommended margin or padding is size m for coloured backgrounds and s for transparent, see examples below.

Disclosures can be combined with warning and error alert messages.

Disclosure with animated arrow

Intended for use in text-heavy areas, interactive areas such as event history or filtering, where space is a concern and generally where we otherwise would reach for a custom expand and collapse component. Typically in documentation or to disclose agreement texts or small help texts. An arrow-right svg icon is placed inside the summary element.

Event history
  • The shipment has been delivered
  • The shipment has arrived
    0024 OSLO
    Pickup code: J0Z0
    Last day for retrieval: 19.08.2021
<details class="mb-disclosure">
  <summary>
    <span
      data-mybicon="mybicon-arrow-right"
      data-mybicon-width="16"
      data-mybicon-height="16"
    ></span
    >Event history
  </summary>
  <ul class="pts pbm">
    <li class="mvm flex algin-ifs">
      <div class="event__dot icon-ui--green">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path
            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
          ></path>
        </svg>
      </div>
      <div>
        <div>The shipment has been delivered</div>
        <div class="flex flex-wrap baseline text-0.875r">
          <time datetime="2021-08-05T14:50:16+02:00" class="mrs"
            ><span class="mrs">05.08.2021</span>14:50</time
          >
        </div>
      </div>
    </li>
    <li class="mvm flex algin-ifs">
      <div class="event__dot icon-ui--lightgray">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path
            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
          ></path>
        </svg>
      </div>
      <div>
        <div>The shipment has arrived</div>
        <div class="flex flex-wrap baseline text-0.875r">
          <time datetime="2021-08-05T14:39:50+02:00" class="mrs"
            ><span class="mrs">05.08.2021</span>14:39</time
          >0024 OSLO
        </div>
        <div class="mbs">
          <div>Pickup code: J0Z0</div>
          <div>Last day for retrieval: 19.08.2021</div>
        </div>
      </div>
    </li>
  </ul>
</details>

Colours

The disclosure supports bg-gray1 and bg-green1 as background classes on the detail element – in addition to the basic transparent.

bg-gray1

Widget properties
Key Type Description
widgetId string The unique identifier for your widget, used to lookup the settings for your widget.
serviceCodes string[] List of services the widget should display.
showCutOffTime boolean Whenever you should show the cut off time on the widget or not. 
<details class="mb-disclosure bg-gray1">
  <summary>
    <span
      data-mybicon="mybicon-arrow-right"
      data-mybicon-width="16"
      data-mybicon-height="16"
    ></span>
    Widget properties
  </summary>
  <table class="mb-table">
    <thead>
      <tr>
        <th>Key</th>
        <th>Type</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>widgetId</td>
        <td>string</td>
        <td>
          The unique identifier for your widget, used to lookup the settings
          for your widget.
        </td>
      </tr>
      <tr>
        <td>serviceCodes</td>
        <td>string[]</td>
        <td>List of services the widget should display.</td>
      </tr>
      <tr>
        <td>showCutOffTime</td>
        <td>boolean</td>
        <td>
          Whenever you should show the cut off time on the widget or not.
        </td>
      </tr>
    </tbody>
  </table>
</details>

bg-green1

Always provide an address

For the most accurate results when querying for pickup points close to a postal code, we STRONGLY recommend providing the recipient’s address when using the API. This is achieved by adding the following query parameters to the request:

street streetNumber 
<details class="mb-disclosure bg-green1">
  <summary>
    <span
      data-mybicon="mybicon-arrow-right"
      data-mybicon-width="16"
      data-mybicon-height="16"
    ></span
    >Always provide an address
  </summary>
  <div class="pam pts">
    <p>
      For the most accurate results when querying for pickup points close to a
      postal code, we STRONGLY recommend providing the recipient’s address when
      using the API. This is achieved by adding the following query parameters
      to the request:
    </p>
    <code>street</code>
    <code>streetNumber</code>
  </div>
</details>

Custom collapsible

Disclosures are colsely related to collapsibles. The difference is that collapsibles have no native element but is made up of a button and an element that is toggled using JavaScript. It is less rigid than the disclosure in that the elements don’t need to be nested, there are no connections between them but the ones we program. And we have to program that to get it working as an accesible piece of interface using attributes such as aria-expanded and aria-controls. We don’t have a component for this at the moment, but some pointers and example if a disclosure cannot do the job.

Reusable conventions

The shipment has been delivered
The shipment has arrived
0024 OSLO
Pickup code: J0Z0
Last day for retrieval: 19.08.2021
The shipment is in transit
0024 OSLO
The shipment has been handed in at terminal and forwarded.

Custom dropdown

Dropdowns are different from collapsibles and disclosures, it’s more related to the select element and should be built upon the same conventions. A dropdown can be useful in navigation or as a way of providing multiple options to a button where radio buttons or multiple buttons isn’t quite right. A custom solution requires more code in the form of JavaScript and attributes such as aria-expanded and aria-controls to work.

Reusable conventions