Notice

Inform users

mb-notice is a way to provide information to users. The component is not clickable, but can contain clickable elements such as buttons and links. There is a white version and a green version, which can be chosen depending on how much attention is needed to the info, as the green one acquires more attention from users.

Notice

We can deliver your packages to a parcel locker. Select Optional pickup point from Additional services, type in e.g. "pakkeboks Ski", and pick your desired parcel locker from the dropdown list. Alternatively you can type in a postal code to get a list of the nearest pickup points.

Business parcel

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

<div class="mb-notice flex gas maxwmaxc mbl">
  <p>We can deliver your packages to a parcel locker. Select Optional pickup point from <a href="/">Additional services</a>, type in
    e.g. "pakkeboks Ski", and pick your desired parcel locker from the dropdown list. Alternatively you can type in a
    postal code to get a list of the nearest pickup points.</p>
</div>

<div class="mb-notice flex gas maxwmaxc">
  <span data-mybicon="mybicon-info"></span>
  <div>
    <h3>Business parcel</h3>
    <dl>
      <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"><a href="/"></a>Calculation available</a></dd>
      </div>
      <button class="btn mtm">Click me</button>
    </dl>
  </div>
</div>

Green notice

Business parcel

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

<div class="mb-notice mb-notice--green flex gas maxwmaxc mbl">
  <span data-mybicon="mybicon-info"></span>
  <p>We can deliver your packages to a parcel locker. Select Optional pickup point from <a href="/">Additional services</a>, type in
    e.g. "pakkeboks Ski", and pick your desired parcel locker from the dropdown list. Alternatively you can type in a
    postal code to get a list of the nearest pickup points.</p>
</div>

<div class="mb-notice mb-notice--green flex gas maxwmaxc">
  <span data-mybicon="mybicon-info"></span>
  <div>
    <h3>Business parcel</h3>
    <dl class="mt-auto">
      <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>
        <a href="/"><dd class="di">Calculation available</dd></a>
      </div>
      <button class="btn mtm">Click me</button>
    </dl>
  </div>
</div>