Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Global
Primitives & components: Teva Global

Modal Layout

v0.0.0

Modal Layout Markup changed.

For legacy purposes the old markup still works, but will show a deprecation warning.
To disable this warning add .vi-disable-warnings to the body element.

Cred sustainable authentic.

Muggle magic waistcoat park drinking taxidermy mixtape sustainable. Crucifix loko kogi flannel five dollar toast. Bespoke pbr&b authentic.

<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (legacy markup)  -->
  <div class="vi-modal-layout">
    <!-- wrap following in .vi-modal-layout__body -->
    <div class="vi-modal-layout__close">
      <!-- Button type: close  -->
      <button aria-label="Message dialog - click to close or navigate to the message content" data-dismiss="modal" type="button" class="vi-btn-close vi-btn-close--accent-1 vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></button>
    </div>
    <div class="vi-modal-layout__section vi-modal-layout__section--header-close">
      <div class="vi-modal-layout__header vi-typesystem vi-typesystem--collapse-last">
        <h3>Cred sustainable authentic.</h3>
      </div>
    </div>
    <div class="vi-modal-layout__section">
      <!-- Content of modal -->
      <div class="vi-typesystem">
        <p>Muggle magic waistcoat park drinking taxidermy mixtape sustainable. Crucifix loko kogi flannel five dollar toast. Bespoke pbr&amp;b authentic.</p>
      </div>
      <div class="text-center">
        <!-- Button type: solid  -->
        <button data-dismiss="modal" type="button" class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn">Salvia selvage</button>
      </div>
    </div>
  </div>
</div>

Update notes #

A simplefied version of the markup changes:

  • All contents of .vi-modal-layout should be wrapped in .vi-modal-layout__body
  • Change classes on the .vi-typesystem element containing the title to .vi-modal-layout__header.vi-typesystem.vi-typesystem--collapse-last
  • Move .vi-modal-layout__close inside first .vi-modal-layout__section, after .vi-modal-layout__header
  • Add modifier --header-close to the .vi-modal-layout__section that contains the header and close.

Old markup of title and close button:

<!-- Modal Layout (legacy markup)  -->
<div class="vi-modal-layout">
  <!-- wrap following in .vi-modal-layout__body -->
  <div class="vi-modal-layout__close">
    <!-- Button type: close  -->
    <button aria-label="Message dialog - click to close or navigate to the message content" data-dismiss="modal" type="button" class="vi-btn-close vi-btn-close--accent-1 vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></button>
  </div>
  <div class="vi-modal-layout__section">
    <div class="vi-typesystem">
      <h3>Title</h3>
    </div>
  </div>
  <!-- ... other sections -->
  <div class="vi-modal-layout__section">
    ...
  </div>
</div>

New markup of title and close button:

<!-- Modal Layout  -->
<div class="vi-modal-layout">
  <div class="vi-modal-layout__body">
    <div class="vi-modal-layout__section vi-modal-layout__section--header-close">
      <div class="vi-modal-layout__header vi-typesystem vi-typesystem--collapse-last">
        <h3>Title</h3>
      </div>
      <div class="vi-modal-layout__close">
        <!-- Button type: close  -->
        <button aria-label="Message dialog - click to close or navigate to the message content" data-dismiss="modal" type="button" class="vi-btn-close vi-btn-close--accent-1 vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></button>
      </div>
    </div>
    <!-- ... other sections -->
    <div class="vi-modal-layout__section">
      ...
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheet is used to display the example(s).

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • A11y Capped offsetted focus outline.
  • IE11 issue with close button rendering outside container.

Changed

  • A11y changed text of aria-label close button.
  • Changed the utility classes used in one of the examples.
  • Markup Changes content of vi-modal-layout now wrapped in vi-modal-layout__body. (update notes)
  • Markup Changes .vi-modal-layout__header and vi-modal-layout__close now in vi-modal-layout__section with modifier --header-close. (update notes)
  • Markup Changes header now in .vi-modal-layout__header. (update notes)

Added