Containers

Wizard

  • Destroy NY
  • Destroy Sokovia
  • Civil War
  • Endgame
  • When a step is the current one, add aria-current="step".
  • When an element is completed, add is-complete class to it.
  • The last step can also have is-complete class on it (not displayed here but case is possible).
  • You may use the modifier wizard-container--noTextDisplayed on wizard-container to have the current step not displayed.
  • Buttons are just provided to test :)
<div class="wizard-container">
  <ul class="wizard unstyled flex flex-nowrap flex-spacebetween">
    <li class="wizard-item is-complete">
      <span class="wizard-marker"></span>
      <span class="wizard-item-inner">Destroy NY</span>
    </li>
    <li class="wizard-item" aria-current="step">
      <span class="wizard-marker"></span>
      <span class="wizard-item-inner">Destroy Sokovia</span>
    </li>
    <li class="wizard-item">
      <span class="wizard-marker"></span>
      <span class="wizard-item-inner">Civil War</span>
    </li>
    <li class="wizard-item">
      <span class="wizard-marker"></span>
      <span class="wizard-item-inner">Endgame</span>
    </li>
  </ul>
</div>

Container with border/shadow

Here a classic container. For form, etc.
<div class="bordered-container">
  <div class="p1">
    Here a classic container. For form, etc.
  </div>
</div>
This container has no padding/margin by default. You have to add them.
It can be nested
several times
<div class="bordered-container p1 mt0-5">
  This container has no padding/margin by default. 
  You have to add them.
  <div class="bordered-container p1 mt1">
    It can be nested
  </div>
  <div class="bordered-container p1 mt1">
    several times
  </div>
</div>
The same container, but only with bottom border.
<div class="border-bottom">
  <div class="p1">
    The same container, but only with bottom border.
  </div>
</div>
The same container with the same bottom border, but dashed.
<div class="border-bottom border-bottom--dashed">
  <div class="p1">
    The same container with the same bottom border, but dashed.
  </div>
</div>
Here a classic container without border radius. For special cases, etc.
<div class="bordered">
  <div class="p1">
    Here a classic container without border radius. For special cases, etc.
  </div>
</div>
Here a shadowed container. For form, etc.
<div class="shadow-container">
  <div class="p1">
    Here a shadowed container. For form, etc.
  </div>
</div>

“Domain” breadcrumb

<ul class="breadcrumb-container unstyled inline-flex pl0-5 pr0-5">
  <li class="breadcrumb-item">
    <button type="button" class="breadcrumb-button">Domain</button>
  </li>
  <li class="breadcrumb-item">
    <button type="button" class="breadcrumb-button" disabled aria-current="step">Addresses</button>
  </li>
  …
</ul>

Information panels

Go to the User Settings if you want to assign and manage users to your custom Domain.

Go to the User Settings if you want to assign and manage users to your custom Domain.

<div class="information-panel bordered-container relative">
  <div class="information-panel-image flex bg-global-light">
    <svg viewBox="0 0 16 16" class="icon-16p mauto" role="img" aria-hidden="true" focusable="false">
      <use xlink:href="#shape-email-address"></use>
    <svg>
  </div>
  <div class="information-panel-content">
    <p>Go to the User Settings…</p>
    <p class="aligncenter">
      <button type="button" class="pm-button-blue">Wouhou!</button>
    </p>
  </div>
</ul>

Information block

Here a block with important information.
Lorem ipsum dolor si amet.
<div class="block-info-standard">
  Here a block with important information.<br>
  Lorem ipsum dolor si amet.
</div>
Here a block with important information.
Lorem ipsum dolor si amet.
<div class="block-info-standard-error">
  Here a block with important information.<br>
  Lorem ipsum dolor si amet.
</div>
Here a block with warning.
Lorem ipsum dolor si amet.
<div class="block-info-standard-warning">
  Here a block with warning.<br>
  Lorem ipsum dolor si amet.
</div>
Here a block with success.
Lorem ipsum dolor si amet.
<div class="block-info-standard-success">
  Here a block with success.<br>
  Lorem ipsum dolor si amet.
</div>
Here a block with important information.
Lorem ipsum dolor si amet.
<div class="block-info">
  Here a block with important information.<br>
  Lorem ipsum dolor si amet.
</div>
Here a block with important information (errors).
Lorem ipsum dolor si amet.
<div class="block-info-error">
  Here a block with important information.<br>
  Lorem ipsum dolor si amet.
</div>
Here a block with important information (warning).
Lorem ipsum dolor si amet.
<div class="block-info-warning">
  Here a block with important information.<br>
  Lorem ipsum dolor si amet.
</div>
Here a block with important information (success).
Lorem ipsum dolor si amet.
<div class="block-info-success">
  Here a block with important information.<br>
  Lorem ipsum dolor si amet.
</div>

details/summary

General
Wow this is cool.
Particular
Wow this is really cool.
Contacts
Wow, this is cool and already opened!
<details>
  <summary>General</summary>
  <div class="mb1">
    Wow this is cool.
  </div>
</details>
<details>
  <summary>Particular</summary>
  <div class="mb1">
    Wow this is cool.
  </div>
</details>
<details open>
  <summary>Contacts</summary>
  <div class="mb1">Wow, this is cool and opened!</div>
</details>

figure/figcaption

These tags are CSS-reseted, if you want to add padding, use helpers.

Protonmail
This is the nice logo of of ProtonMail
<figure role="group">
  <img src="…" alt="Protonmail" />
  <figcaption>
    This is the nice logo of of ProtonMail
  </figcaption>
</figure>