Containers

Tabs

Here the content of 1st tab
This tab is sad, he will maybe never be displayed.
Here the content of 2nd tab
  • Please note the link between tabs and tab panels using aria-controls and aria-labelledby.
  • Please note the use of role="tablist/presentation/tab/tabpanel".
  • A selected tab has aria-selected="true", aria-selected="false" if not.
  • If you need a tab to be disabled, just add disabled attribute to the a.
<div class="tabs-container">
  <ul class="tabs-list" role="tablist">
    <li class="tabs-list-item" role="presentation">
      <a class="tabs-list-link" id="label_tab1" role="tab" aria-controls="tab1"
        tabindex="0" aria-selected="true">A tab</a>
    </li>
    <li class="tabs-list-item" role="presentation">
      <a class="tabs-list-link" id="label_tab2" role="tab" aria-controls="tab2"
        tabindex="0" aria-selected="false">A tab</a>
    </li>
  </ul>
  <div id="tab1" class="tabs-tabcontent" role="tabpanel" aria-labelledby="label_tab1">…</div>
  <div id="tab2" class="tabs-tabcontent" role="tabpanel" aria-labelledby="label_tab2">…</div>
  …
</div>
      

Step dots component

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 (and with bordered-container--error if there is an error)
<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 bordered-container--error 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>
The same container with the same bottom border, but dashed and using currentColor
<div class="border-bottom border-bottom--dashed border-bottom--currentColor">
  <div class="p1">
    The same container with the same bottom border, but dashed.
  </div>
</div>
The same container, but only with top border.
<div class="border-top">
  <div class="p1">
  The same container, but only with top border.
  </div>
</div>
The same container with the same top border, but dashed.
<div class="border-top border-top--dashed">
  <div class="p1">
    The same container with the same top 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 classic container without border radius, with dashed border.
<div class="dashed">
  <div class="p1">
    Here a classic container without border radius, with dashed border.
  </div>
</div>
Here a classic container with border radius, with dashed border.
<div class="dashed-container">
  <div class="p1">
    Here a classic container with border radius, with dashed border.
  </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>

Note: a helper border-currentColor is also available (performs a border: 1px solid currentColor).

“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>

Welcome placeholders (home)

These boxes are set up to be integrated in a 2 columns content (Mail/Contact home). They will be stacked vertically around $breakpoint-2-columns value (~1180px default).

Cool title

Cool information text that explains the cool title

Another cool info

Cool trick text that explains the cool info, briefly

Cool cool cool

This is so cool that we put a third cool box with another text inside

<div class="flex flex-nowrap boxes-placeholder-container mw50e">
  <div class="bordered-container …">…</div>
  <div class="bordered-container …">…</div>
  <div class="bordered-container …">…</div>
</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>