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

Markup changes are required to implement all SCS and Timeline layouts. Update notes can be found here.
For legacy purposes the old markup still works, but will show a deprecation warning.

Modal Layout provides uniform layout for the content inside a Modals body.

The Modal Layout has multiple spacing options. Multiple Modal Layouts can be used inside one modal.

A border is added to better illustrate the example.

Polaroid wolf vegan.

Scenester wes anderson paleo next level literally. Humblebrag green juice fingerstache sriracha yr portland. Hoodie celiac everyday cliche.

<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- 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>Polaroid wolf vegan.</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>
      <div class="vi-modal-layout__section">
        <!-- Content of modal -->
        <div class="vi-typesystem">
          <p>Scenester wes anderson paleo next level literally. Humblebrag green juice fingerstache sriracha yr portland. Hoodie celiac everyday cliche.</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">Everyday flannel</button>
        </div>
      </div>
    </div>
  </div>
</div>

Spacing #

For text content use the Modal Layout without any modifiers.

A border is added to better illustrate the example.

<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout  -->
  <div class="vi-modal-layout">
    <div class="vi-modal-layout__body">
      ...
    </div>
  </div>
</div>

Use modifier --compact for headers visuals.

A border is added to better illustrate the example.

<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --compact) -->
  <div class="vi-modal-layout vi-modal-layout--compact">
    <div class="vi-modal-layout__body">
      ...
    </div>
  </div>
</div>

Use modifier --visual to display a visual.

A border is added to better illustrate the example.

<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --visual) -->
  <div class="vi-modal-layout vi-modal-layout--visual">
    <div class="vi-modal-layout__body">
      ...
    </div>
  </div>
</div>

Sections #

The Modal Layout is divided in sections.

Use section with modifier --header-close for the header (.vi-modal-layout__header) and / or close button (.vi-modal-layout__close).

A border is added to better illustrate the example.

Bushwick health swag.

Ugh post-ironic tacos.

Mumblecore ramps skateboard.

Vinegar vhs plaid.

<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- 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>Bushwick health swag.</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>
    </div>
  </div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- 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>Ugh post-ironic tacos.</h3>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- 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__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>
    </div>
  </div>
</div>
<hr>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --compact) -->
  <div class="vi-modal-layout vi-modal-layout--compact">
    <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">
          <p>Mumblecore ramps skateboard.</p>
        </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>
    </div>
  </div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --compact) -->
  <div class="vi-modal-layout vi-modal-layout--compact">
    <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">
          <p>Vinegar vhs plaid.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --compact) -->
  <div class="vi-modal-layout vi-modal-layout--compact">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section vi-modal-layout__section--header-close">
        <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>
    </div>
  </div>
</div>

Use modifier --video for a 16/9 aspect ratio for video (a video embed, not the Video Component).

A border is added to better illustrate the example.

<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --visual) -->
  <div class="vi-modal-layout vi-modal-layout--visual">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section vi-modal-layout__section--video">
        <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/672TY8K2PKk"></iframe>
      </div>
    </div>
  </div>
</div>

Body Text #

Wrap body copy (not title) in .vi-modal-layout__body-text to apply a max-width for maximum legibility in larger modals.

Use this container optionally.

Gluten-free wayfarers hashtag.

Lumbersexual biodiesel everyday. Blue bottle aesthetic occupy pour-over. Selfies raw denim goth typewriter small batch. Helvetica roof microdosing migas etsy polaroid. Vhs letterpress single-origin coffee. Wolf fashion axe meditation distillery disrupt polaroid franzen roof. Carry lomo tote bag trust fund viral readymade.

<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout  -->
  <div class="vi-modal-layout">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section">
        <!-- Content of modal -->
        <div class="vi-typesystem">
          <h3>Gluten-free wayfarers hashtag.</h3>
          <div class="vi-modal-layout__body-text">
            <p>Lumbersexual biodiesel everyday. Blue bottle aesthetic occupy pour-over. Selfies raw denim goth typewriter small batch. Helvetica roof microdosing migas etsy polaroid. Vhs letterpress single-origin coffee. Wolf fashion axe meditation distillery disrupt polaroid franzen roof. Carry lomo tote bag trust fund viral readymade.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Examples

Following examples are compositions of the above to show some use cases.

Text content #

Examples of text content.

Borders are added to better illustrate the example.

Cray swag quinoa.

Next level kombucha cray microdosing semiotics leggings loko synth. Tofu hammock kale chips humblebrag. Hashtag schlitz godard kogi whatever cleanse cronut 3 wolf moon.

<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- 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>Cray swag quinoa.</h3>
        </div>
      </div>
      <div class="vi-modal-layout__section">
        <!-- Content of modal -->
        <div class="vi-typesystem">
          <p>Next level kombucha cray microdosing semiotics leggings loko synth. Tofu hammock kale chips humblebrag. Hashtag schlitz godard kogi whatever cleanse cronut 3 wolf moon.</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">Scenester park</button>
        </div>
      </div>
    </div>
  </div>
</div>

With title and close button.

Synth organic sartorial.

Selfies chillwave cliche heirloom tattooed mlkshk locavore. Hoodie cornhole tacos letterpress mustache pickled pbr&b chambray. Polaroid flannel squid single-origin coffee.

<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- 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>Synth organic sartorial.</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>
      <div class="vi-modal-layout__section">
        <!-- Content of modal -->
        <div class="vi-typesystem">
          <p>Selfies chillwave cliche heirloom tattooed mlkshk locavore. Hoodie cornhole tacos letterpress mustache pickled pbr&amp;b chambray. Polaroid flannel squid single-origin coffee.</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">Freegan cardigan</button>
        </div>
      </div>
    </div>
  </div>
</div>

In the following examples the vi-modal-layout__header contains a logo image.
Margins are modified with custom sizing classes (E.g. .mb-60 on --header-close).

Utility classes are used for spacing and positioning of buttons. Note that they are reversed when changing direction.

Letterpress paleo gastropub.

Green juice tattooed roof. Food truck hoodie keytar quinoa schlitz vice. Diy xoxo pickled 90's phlogiston selfies twee. Squid cardigan kitsch pabst.

Drinking kickstarter tofu master. Mustache leggings actually. Chartreuse banjo wolf.

<div class="small text-muted sg-rtl-only sg-hidden" dir="ltr">
  <p>Utility classes are used for spacing and positioning of buttons. Note that they are reversed when changing direction.</p>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout  -->
  <div class="vi-modal-layout">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section mb-60 vi-modal-layout__section--header-close">
        <div class="vi-modal-layout__header vi-typesystem vi-typesystem--collapse-last">
          <img src="/assets/images/logos/logo_teva.svg" width="100" height="36" alt="">
        </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>
      <div class="vi-modal-layout__section">
        <!-- Content of modal -->
        <div class="vi-typesystem">
          <h3>Letterpress paleo gastropub.</h3>
          <div class="vi-modal-layout__body-text">
            <p>Green juice tattooed roof. Food truck hoodie keytar quinoa schlitz vice. Diy xoxo pickled 90's phlogiston selfies twee. Squid cardigan kitsch pabst.</p>
            <p>Drinking kickstarter tofu master. Mustache leggings actually. Chartreuse banjo wolf.</p>
          </div>
        </div>
      </div>
      <div class="vi-modal-layout__section">
        <!-- Use utility classes to position the buttons depending implementation requirement and content-editor quirks :). -->
        <div class="d-md-inline-block mb-10 mb-md-0 mr-md-20">
          <!-- Button type: solid  -->
          <button type="button" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Skateboard mixtape</button>
        </div>
        <div class="d-md-inline-block mb-10 mb-md-0">
          <!-- Button type: solid  -->
          <button type="button" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Tilde xoxo</button>
        </div>
        <div class="d-md-inline-block float-md-right">
          <!-- Button type: outline  -->
          <button data-dismiss="modal" type="button" class="vi-btn-outline vi-btn-outline--accent-1 vi-btn-outline--no-pointer vi-btn">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

With back button.

Utility classes are used for spacing and positioning of buttons. Note that they are reversed when changing direction.

Back

Swag bushwick aesthetic.

Artisan etsy polaroid xoxo. 90's intelligentsia cronut tilde. Readymade hella fashion axe fanny pack tote bag roof flannel vice. Echo cliche pickled chillwave craft beer roof.

Cardigan gluten-free cliche heirloom wayfarers. Marfa crucifix jean shorts single-origin coffee master godard authentic. Church-key raw denim 90's. Swag craft beer vinyl tattooed pour-over post-ironic cliche. Celiac whatever tacos before they sold out polaroid fingerstache.

<div class="small text-muted sg-rtl-only sg-hidden" dir="ltr">
  <p>Utility classes are used for spacing and positioning of buttons. Note that they are reversed when changing direction.</p>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout  -->
  <div class="vi-modal-layout">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section mb-60 vi-modal-layout__section--header-close">
        <div class="vi-modal-layout__header vi-typesystem vi-typesystem--collapse-last">
          <img src="/assets/images/logos/logo_teva.svg" width="100" height="36" alt="">
        </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>
      <div class="vi-modal-layout__section mt-n20 mb-30">
        <!-- Button type: outline  -->
        <a href="#" class="vi-btn-outline vi-btn-outline--back-pointer vi-btn">Back</a>
      </div>
      <div class="vi-modal-layout__section">
        <!-- Content of modal -->
        <div class="vi-typesystem">
          <h3>Swag bushwick aesthetic.</h3>
          <div class="vi-modal-layout__body-text">
            <p>Artisan etsy polaroid xoxo. 90's intelligentsia cronut tilde. Readymade hella fashion axe fanny pack tote bag roof flannel vice. Echo cliche pickled chillwave craft beer roof.</p>
            <p>Cardigan gluten-free cliche heirloom wayfarers. Marfa crucifix jean shorts single-origin coffee master godard authentic. Church-key raw denim 90's. Swag craft beer vinyl tattooed pour-over post-ironic cliche. Celiac whatever tacos before they sold out polaroid fingerstache.</p>
          </div>
        </div>
      </div>
      <div class="vi-modal-layout__section">
        <!-- Use utility classes to position the buttons depending implementation requirement and content-editor quirks :). -->
        <div class="d-md-inline-block mb-10 mb-md-0 mr-md-20">
          <!-- Button type: solid  -->
          <button type="button" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Meditation sriracha</button>
        </div>
        <div class="d-md-inline-block mb-10 mb-md-0">
          <!-- Button type: solid  -->
          <button type="button" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Yolo keffiyeh</button>
        </div>
        <div class="d-md-inline-block float-md-right">
          <!-- Button type: outline  -->
          <button data-dismiss="modal" type="button" class="vi-btn-outline vi-btn-outline--accent-1 vi-btn-outline--no-pointer vi-btn">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

With form.

Utility classes are used for spacing and positioning of buttons. Note that they are reversed when changing direction.

Back

Are you a healthcare professional

Kitsch loko semiotics. Tofu slow-carb hella dreamcatcher paleo. Swag crucifix direct trade stumptown paleo heirloom. Cornhole flannel chicharrones bitters 90's tumblr mustache. Cleanse sartorial post-ironic stumptown roof kickstarter shabby chic.

If needed - a link leading to a page that explains how this works.

This is optional positive feedback about the field above.
This is optional negative feedback about the field above.
This is optional positive feedback about the field above.
This is optional negative feedback about the field above.

All fields required

<div class="small text-muted sg-rtl-only sg-hidden" dir="ltr">
  <p>Utility classes are used for spacing and positioning of buttons. Note that they are reversed when changing direction.</p>
</div>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout  -->
  <div class="vi-modal-layout">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section mb-60 vi-modal-layout__section--header-close">
        <div class="vi-modal-layout__header vi-typesystem vi-typesystem--collapse-last">
          <img src="/assets/images/logos/logo_teva.svg" width="100" height="36" alt="">
        </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>
      <div class="vi-modal-layout__section mt-n20 mb-30">
        <!-- Button type: outline  -->
        <a href="#" class="vi-btn-outline vi-btn-outline--back-pointer vi-btn">Back</a>
      </div>
      <div class="vi-modal-layout__section">
        <!-- Content of modal -->
        <div class="vi-typesystem">
          <h3>Are you a healthcare professional</h3>
          <div class="vi-modal-layout__body-text">
            <p>Kitsch loko semiotics. Tofu slow-carb hella dreamcatcher paleo. Swag crucifix direct trade stumptown paleo heirloom. Cornhole flannel chicharrones bitters 90's tumblr mustache. Cleanse sartorial post-ironic stumptown roof kickstarter shabby chic.</p>
            <p>
              If needed -
              <a href="#">a link leading to a page that explains how this works.</a>
            </p>
          </div>
        </div>
      </div>
      <!-- Form  -->
      <form action="#form-c5ea27" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" id="my-form" novalidate>
        <div class="form-group">
          <label for="control-2d1611">Date of birth</label>
          <input aria-required="true" class="form-control" id="control-2d1611" name="name-060473" placeholder="Your date of birth as YYYY-MM-DD" required type="text">
          <div class="valid-feedback">This is optional positive feedback about the field above.</div>
          <div class="invalid-feedback">This is optional negative feedback about the field above.</div>
        </div>
        <div class="form-group">
          <label for="control-79cc56">BIG Number</label>
          <input aria-required="true" class="form-control" id="control-79cc56" name="name-c7e43d" placeholder="Your BIG Registry Number" required type="text">
          <div class="valid-feedback">This is optional positive feedback about the field above.</div>
          <div class="invalid-feedback">This is optional negative feedback about the field above.</div>
        </div>
        <p class="small">All fields required</p>
      </form>
      <div class="vi-modal-layout__section">
        <!-- Use utility classes to position the buttons depending implementation requirement and content-editor quirks :). -->
        <div class="d-md-inline-block mb-10 mb-md-0">
          <!-- Button type: solid  -->
          <button form="my-form" type="submit" class="vi-btn-solid vi-btn">Submit</button>
        </div>
        <div class="d-md-inline-block float-md-right">
          <!-- Button type: outline  -->
          <button data-dismiss="modal" type="button" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

Barcode content #

Examples of model layout with barcodes.

Borders are added to better illustrate the example.

Diclofenac Epolamine Topical Patch 1.3%

Strength
1.3%
Size
30 (5 x 6 Patches/Carton)
NDC
00093-3225-55
Strength
1.3%
Size
30 (5 x 6 Patches/Carton)
NDC
00093-3225-50
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- 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>Diclofenac Epolamine Topical Patch 1.3%</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>
      <div class="vi-modal-layout__section mt-60">
        <div class="vi-grid">
          <div class="vi-grid__row vi-grid__row--vgap-60">
            <div class="col-12">
              <div class="vi-grid">
                <div class="vi-grid__row vi-grid__row--hgap-60 vi-grid__row--vgap-30">
                  <div class="col-md-4 col-lg-3">
                    <img src="/assets/images/products/barcode002.png" class="w-md-100p" alt="">
                  </div>
                  <div class="col-md-8 col-lg-9">
                    <dl class="vi-grid__row vi-grid__row--hgap-15 mb-0">
                      <dt class="col-lg-4">Strength</dt>
                      <dd class="col-lg-8 mb-lg-0">1.3%</dd>
                      <dt class="col-lg-4">Size</dt>
                      <dd class="col-lg-8 mb-lg-0">30 (5 x 6 Patches/Carton)</dd>
                      <dt class="col-lg-4">NDC</dt>
                      <dd class="col-lg-8 mb-0">00093-3225-55</dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12">
              <div class="vi-grid">
                <div class="vi-grid__row vi-grid__row--hgap-60 vi-grid__row--vgap-30">
                  <div class="col-md-4 col-lg-3">
                    <img src="/assets/images/products/barcode001.png" class="w-md-100p" alt="">
                  </div>
                  <div class="col-md-8 col-lg-9">
                    <dl class="vi-grid__row vi-grid__row--hgap-15 mb-0">
                      <dt class="col-lg-4">Strength</dt>
                      <dd class="col-lg-8 mb-lg-0">1.3%</dd>
                      <dt class="col-lg-4">Size</dt>
                      <dd class="col-lg-8 mb-lg-0">30 (5 x 6 Patches/Carton)</dd>
                      <dt class="col-lg-4">NDC</dt>
                      <dd class="col-lg-8 mb-0">00093-3225-50</dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Image content #

Examples of image content. Add a Rectangular Image inside a section.

When a custom aspect ratio is needed, please see documentation.

Borders are added to better illustrate the example.

alt text
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --compact) -->
  <div class="vi-modal-layout vi-modal-layout--compact">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section vi-modal-layout__section--header-close">
        <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>
    </div>
  </div>
  <!-- Modal Layout (mods: --visual) -->
  <div class="vi-modal-layout vi-modal-layout--visual">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section">
        <!-- Rectangular Image  -->
        <div class="vi-rectangular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x450.jpg"></div>
      </div>
    </div>
  </div>
</div>

Video content #

Examples of video content.

Borders are added to better illustrate the example.

A video embed

A video Component

<p class="small text-muted mb-0">A video embed</p>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --compact) -->
  <div class="vi-modal-layout vi-modal-layout--compact">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section vi-modal-layout__section--header-close">
        <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>
    </div>
  </div>
  <!-- Modal Layout (mods: --visual) -->
  <div class="vi-modal-layout vi-modal-layout--visual">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section vi-modal-layout__section--video">
        <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/672TY8K2PKk"></iframe>
      </div>
    </div>
  </div>
</div>
<hr>
<p class="small text-muted mb-0">A video Component</p>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --compact) -->
  <div class="vi-modal-layout vi-modal-layout--compact">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section vi-modal-layout__section--header-close">
        <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>
    </div>
  </div>
  <!-- Modal Layout (mods: --visual) -->
  <div class="vi-modal-layout vi-modal-layout--visual">
    <div class="vi-modal-layout__body">
      <!-- Video  -->
      <div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="LXb3EKWsInQ" data-video-provider="youtube">
        <!-- Rectangular Image (mods: --video) -->
        <div class="vi-rectangular-image vi-rectangular-image--video">
          <div class="vi-video__poster"></div>
        </div>
      </div>
    </div>
  </div>
</div>

With title and close button.

A video embed

90's cronut banjo.

A video Component

Health selfies tumblr.

<p class="small text-muted mb-0">A video embed</p>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --compact) -->
  <div class="vi-modal-layout vi-modal-layout--compact">
    <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">
          <p>90's cronut banjo.</p>
        </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>
    </div>
  </div>
  <!-- Modal Layout (mods: --visual) -->
  <div class="vi-modal-layout vi-modal-layout--visual">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section vi-modal-layout__section--video">
        <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/672TY8K2PKk"></iframe>
      </div>
    </div>
  </div>
</div>
<hr>
<p class="small text-muted mb-0">A video Component</p>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --compact) -->
  <div class="vi-modal-layout vi-modal-layout--compact">
    <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">
          <p>Health selfies tumblr.</p>
        </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>
    </div>
  </div>
  <!-- Modal Layout (mods: --visual) -->
  <div class="vi-modal-layout vi-modal-layout--visual">
    <div class="vi-modal-layout__body">
      <!-- Video  -->
      <div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="LXb3EKWsInQ" data-video-provider="youtube">
        <!-- Rectangular Image (mods: --video) -->
        <div class="vi-rectangular-image vi-rectangular-image--video">
          <div class="vi-video__poster"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Combined with text content.

A video embed

Schlitz literally mixtape.

Chartreuse wayfarers yr.

Iphone blue bottle meditation drinking. Listicle park brooklyn hashtag microdosing muggle magic godard phlogiston. Phlogiston pop-up meggings.

A video Component

Master ennui schlitz.

Chartreuse roof drinking.

Deep v sriracha echo cliche crucifix. Xoxo umami gluten-free 3 wolf moon organic trust fund beard polaroid. Vinyl ramps narwhal green juice gastropub venmo.

<p class="small text-muted mb-0">A video embed</p>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --compact) -->
  <div class="vi-modal-layout vi-modal-layout--compact">
    <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">
          <p>Schlitz literally mixtape.</p>
        </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>
    </div>
  </div>
  <!-- Modal Layout (mods: --visual) -->
  <div class="vi-modal-layout vi-modal-layout--visual">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section vi-modal-layout__section--video">
        <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/672TY8K2PKk"></iframe>
      </div>
    </div>
  </div>
  <!-- Modal Layout  -->
  <div class="vi-modal-layout">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section">
        <div class="vi-typesystem">
          <h3>Chartreuse wayfarers yr.</h3>
        </div>
      </div>
      <div class="vi-modal-layout__section">
        <div class="vi-typesystem vi-typesystem--collapse-last">
          <p>Iphone blue bottle meditation drinking. Listicle park brooklyn hashtag microdosing muggle magic godard phlogiston. Phlogiston pop-up meggings.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>
<p class="small text-muted mb-0">A video Component</p>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --compact) -->
  <div class="vi-modal-layout vi-modal-layout--compact">
    <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">
          <p>Master ennui schlitz.</p>
        </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>
    </div>
  </div>
  <!-- Modal Layout (mods: --visual) -->
  <div class="vi-modal-layout vi-modal-layout--visual">
    <div class="vi-modal-layout__body">
      <!-- Video  -->
      <div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="LXb3EKWsInQ" data-video-provider="youtube">
        <!-- Rectangular Image (mods: --video) -->
        <div class="vi-rectangular-image vi-rectangular-image--video">
          <div class="vi-video__poster"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal Layout  -->
  <div class="vi-modal-layout">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section">
        <div class="vi-typesystem">
          <h3>Chartreuse roof drinking.</h3>
        </div>
      </div>
      <div class="vi-modal-layout__section">
        <div class="vi-typesystem vi-typesystem--collapse-last">
          <p>Deep v sriracha echo cliche crucifix. Xoxo umami gluten-free 3 wolf moon organic trust fund beard polaroid. Vinyl ramps narwhal green juice gastropub venmo.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Showing a transcription

A video embed

Drinking actually intelligentsia.

Transcript

Qui deserunt autem sed doloremque reprehenderit rem natus dolor eos exercitationem culpa et quia voluptate eum repellat accusantium sed amet quasi.

Plaid iphone diy poutine roof occupy. Poutine raw denim jean shorts yolo humblebrag kombucha occupy mlkshk. Readymade gastropub disrupt williamsburg food truck kogi pug. Vinyl photo booth phlogiston jean shorts chia diy kale chips. Scenester biodiesel sustainable butcher carry next level godard disrupt.

Drinking intelligentsia kombucha wolf pabst goth cronut. Kinfolk photo booth vegan. Brunch godard umami drinking kickstarter 3 wolf moon. Whatever swag vegan neutra kickstarter park. Microdosing pork belly diy.

Neutra migas narwhal banjo art party muggle magic yolo. Marfa cleanse waistcoat tousled disrupt 3 wolf moon keytar goth. Wolf heirloom hashtag. Locavore cornhole sartorial 8-bit food truck thundercats hashtag. Dreamcatcher celiac shabby chic xoxo.

Ugh single-origin coffee authentic jean shorts. Hammock you probably haven't heard of them pickled five dollar toast gentrify iphone stumptown. Fanny pack sartorial banh mi.

A video Component

Meggings portland twee.

Transcript

Qui deserunt autem sed doloremque reprehenderit rem natus dolor eos exercitationem culpa et quia voluptate eum repellat accusantium sed amet quasi.

Park vice cred. Etsy ramps vhs before they sold out. Migas health yr quinoa deep v viral.

Literally cronut intelligentsia 8-bit. Direct trade lomo shoreditch whatever salvia blue bottle. Sartorial disrupt chicharrones before they sold out viral umami lumbersexual shabby chic. Food truck taxidermy portland freegan. Distillery tofu pabst poutine.

Blog pickled pour-over cred whatever pork belly. Keytar bespoke portland. Raw denim yolo before they sold out iphone typewriter actually quinoa cronut. Etsy scenester marfa readymade shoreditch. Mixtape lo-fi pickled whatever fashion axe bespoke xoxo seitan.

Tacos semiotics cornhole church-key small batch diy. Master you probably haven't heard of them crucifix. Bespoke whatever five dollar toast etsy heirloom cliche. Kale chips poutine art party asymmetrical.

<p class="small text-muted mb-0">A video embed</p>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --compact) -->
  <div class="vi-modal-layout vi-modal-layout--compact">
    <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">
          <p>Drinking actually intelligentsia.</p>
        </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>
    </div>
  </div>
  <!-- Modal Layout (mods: --visual) -->
  <div class="vi-modal-layout vi-modal-layout--visual">
    <div class="vi-modal-layout__body">
      <div class="vi-modal-layout__section vi-modal-layout__section--video">
        <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/672TY8K2PKk"></iframe>
      </div>
    </div>
  </div>
  <!-- Modal Layout (mods: --visual) -->
  <div class="vi-modal-layout vi-modal-layout--visual">
    <div class="vi-modal-layout__body">
      <!-- Accordion type: refine -->
      <div class="vi-accordion-refine vi-accordion-refine--transcript vi-accordion">
        <div class="is-active vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-3a875d">
          <div class="vi-accordion-refine__header vi-accordion__header">
            <!-- Use h1-h6 depending page hierarchy -->
            <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-e77cba">Transcript</h4>
            <a aria-controls="region-5c9163" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-3a875d" role="button">
              <!-- Button type: generic  -->
              <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
                  Transcript</span></div>
            </a>
          </div>
          <div aria-labelledby="heading-e77cba" class="vi-accordion-refine__main vi-accordion__main" id="region-5c9163" role="region">
            <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
              <!-- Scrollpane (mods: --accent-1, --refine) -->
              <div class="vi-scrollpane vi-scrollpane--accent-1 vi-scrollpane--refine">
                <div class="vi-scrollpane__bar vi-scrollpane__bar--accent-1 vi-scrollpane__bar--refine">
                  <div class="pr-20">
                    <p>
                      <span class="bg-accent-2 text-white">Qui deserunt autem sed doloremque</span>
                      reprehenderit rem natus dolor eos
                      exercitationem culpa et quia voluptate eum repellat accusantium sed amet quasi.
                    </p>
                    <p>Plaid iphone diy poutine roof occupy. Poutine raw denim jean shorts yolo humblebrag kombucha occupy mlkshk. Readymade gastropub disrupt williamsburg food truck kogi pug. Vinyl photo booth phlogiston jean shorts chia diy kale chips. Scenester biodiesel sustainable butcher carry next level godard disrupt.</p>
                    <p>Drinking intelligentsia kombucha wolf pabst goth cronut. Kinfolk photo booth vegan. Brunch godard umami drinking kickstarter 3 wolf moon. Whatever swag vegan neutra kickstarter park. Microdosing pork belly diy.</p>
                    <p>Neutra migas narwhal banjo art party muggle magic yolo. Marfa cleanse waistcoat tousled disrupt 3 wolf moon keytar goth. Wolf heirloom hashtag. Locavore cornhole sartorial 8-bit food truck thundercats hashtag. Dreamcatcher celiac shabby chic xoxo.</p>
                    <p>Ugh single-origin coffee authentic jean shorts. Hammock you probably haven't heard of them pickled five dollar toast gentrify iphone stumptown. Fanny pack sartorial banh mi.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>
<p class="small text-muted mb-0">A video Component</p>
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05)">
  <!-- Modal Layout (mods: --compact) -->
  <div class="vi-modal-layout vi-modal-layout--compact">
    <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">
          <p>Meggings portland twee.</p>
        </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>
    </div>
  </div>
  <!-- Modal Layout (mods: --visual) -->
  <div class="vi-modal-layout vi-modal-layout--visual">
    <div class="vi-modal-layout__body">
      <!-- Video  -->
      <div class="vi-video" data-google-key="AIzaSyCCT69wewvdxKePFXN40xeJmy5MQusd9uc" data-video-id="LXb3EKWsInQ" data-video-provider="youtube">
        <!-- Rectangular Image (mods: --video) -->
        <div class="vi-rectangular-image vi-rectangular-image--video">
          <div class="vi-video__poster"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal Layout (mods: --visual) -->
  <div class="vi-modal-layout vi-modal-layout--visual">
    <div class="vi-modal-layout__body">
      <!-- Accordion type: refine -->
      <div class="vi-accordion-refine vi-accordion-refine--transcript vi-accordion">
        <div class="is-active vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-d2868a">
          <div class="vi-accordion-refine__header vi-accordion__header">
            <!-- Use h1-h6 depending page hierarchy -->
            <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-0a8e6c">Transcript</h4>
            <a aria-controls="region-684c71" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-d2868a" role="button">
              <!-- Button type: generic  -->
              <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
                  Transcript</span></div>
            </a>
          </div>
          <div aria-labelledby="heading-0a8e6c" class="vi-accordion-refine__main vi-accordion__main" id="region-684c71" role="region">
            <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
              <!-- Scrollpane (mods: --accent-1, --refine) -->
              <div class="vi-scrollpane vi-scrollpane--accent-1 vi-scrollpane--refine">
                <div class="vi-scrollpane__bar vi-scrollpane__bar--accent-1 vi-scrollpane__bar--refine">
                  <div class="pr-20">
                    <p>
                      <span class="bg-accent-2 text-white">Qui deserunt autem sed doloremque</span>
                      reprehenderit rem natus dolor eos
                      exercitationem culpa et quia voluptate eum repellat accusantium sed amet quasi.
                    </p>
                    <p>Park vice cred. Etsy ramps vhs before they sold out. Migas health yr quinoa deep v viral.</p>
                    <p>Literally cronut intelligentsia 8-bit. Direct trade lomo shoreditch whatever salvia blue bottle. Sartorial disrupt chicharrones before they sold out viral umami lumbersexual shabby chic. Food truck taxidermy portland freegan. Distillery tofu pabst poutine.</p>
                    <p>Blog pickled pour-over cred whatever pork belly. Keytar bespoke portland. Raw denim yolo before they sold out iphone typewriter actually quinoa cronut. Etsy scenester marfa readymade shoreditch. Mixtape lo-fi pickled whatever fashion axe bespoke xoxo seitan.</p>
                    <p>Tacos semiotics cornhole church-key small batch diy. Master you probably haven't heard of them crucifix. Bespoke whatever five dollar toast etsy heirloom cliche. Kale chips poutine art party asymmetrical.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheets are used to display the example(s).

The following additional javascripts are 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