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

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.

Organic echo gluten-free.

Muggle magic letterpress plaid retro aesthetic hella organic cleanse. Portland distillery etsy church-key chambray. Irony church-key photo booth microdosing. Knausgaard seitan everyday helvetica semiotics. Fingerstache swag wayfarers keytar lomo trust fund.

<!-- 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>Organic echo gluten-free.</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>Muggle magic letterpress plaid retro aesthetic hella organic cleanse. Portland distillery etsy church-key chambray. Irony church-key photo booth microdosing. Knausgaard seitan everyday helvetica semiotics. Fingerstache swag wayfarers keytar lomo trust fund.</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">Gluten-free kickstarter</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.

Franzen letterpress brunch.

Selfies scenester cleanse.

Tacos brooklyn beard.

Brooklyn blog lumbersexual.

<!-- 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>Franzen letterpress brunch.</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>Selfies scenester cleanse.</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>Tacos brooklyn beard.</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>Brooklyn blog lumbersexual.</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.

Mixtape intelligentsia truffaut.

Brooklyn deep v bitters trust fund mixtape +1 pop-up. Diy tacos tousled brunch echo bespoke chartreuse hammock. Next level echo pug synth. Meh scenester wayfarers tattooed pitchfork knausgaard. Vhs letterpress seitan distillery artisan craft beer mlkshk five dollar toast. Disrupt poutine asymmetrical ennui yolo.

<!-- 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>Mixtape intelligentsia truffaut.</h3>
          <div class="vi-modal-layout__body-text">
            <p>Brooklyn deep v bitters trust fund mixtape +1 pop-up. Diy tacos tousled brunch echo bespoke chartreuse hammock. Next level echo pug synth. Meh scenester wayfarers tattooed pitchfork knausgaard. Vhs letterpress seitan distillery artisan craft beer mlkshk five dollar toast. Disrupt poutine asymmetrical ennui yolo.</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.

8-bit normcore fixie.

Tofu leggings bitters hella twee five dollar toast portland. Gentrify williamsburg kale chips slow-carb letterpress pitchfork brunch umami. Cardigan banjo try-hard marfa asymmetrical forage normcore retro. Umami offal kinfolk pinterest occupy. Skateboard brooklyn ugh gentrify.

<!-- 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>8-bit normcore fixie.</h3>
        </div>
      </div>
      <div class="vi-modal-layout__section">
        <!-- Content of modal -->
        <div class="vi-typesystem">
          <p>Tofu leggings bitters hella twee five dollar toast portland. Gentrify williamsburg kale chips slow-carb letterpress pitchfork brunch umami. Cardigan banjo try-hard marfa asymmetrical forage normcore retro. Umami offal kinfolk pinterest occupy. Skateboard brooklyn ugh gentrify.</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">Twee pinterest</button>
        </div>
      </div>
    </div>
  </div>
</div>

With title and close button.

Bespoke ugh asymmetrical.

Flexitarian heirloom synth kitsch. Yolo letterpress synth crucifix lomo loko intelligentsia pbr&b. Kitsch meggings plaid phlogiston austin truffaut. Pour-over craft beer bicycle rights drinking post-ironic. Vinegar messenger bag yolo.

<!-- 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>Bespoke ugh asymmetrical.</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>Flexitarian heirloom synth kitsch. Yolo letterpress synth crucifix lomo loko intelligentsia pbr&amp;b. Kitsch meggings plaid phlogiston austin truffaut. Pour-over craft beer bicycle rights drinking post-ironic. Vinegar messenger bag yolo.</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">Pabst pitchfork</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.

Kogi celiac fingerstache.

Sustainable kale chips carry pug yr. Franzen fixie gluten-free flannel green juice ugh. Leggings schlitz letterpress.

Before they sold out green juice quinoa tofu. Fingerstache pop-up photo booth sartorial truffaut fanny pack. Kale chips schlitz mlkshk direct trade chia vinegar. Squid ethical portland phlogiston hoodie try-hard.

<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>Kogi celiac fingerstache.</h3>
          <div class="vi-modal-layout__body-text">
            <p>Sustainable kale chips carry pug yr. Franzen fixie gluten-free flannel green juice ugh. Leggings schlitz letterpress.</p>
            <p>Before they sold out green juice quinoa tofu. Fingerstache pop-up photo booth sartorial truffaut fanny pack. Kale chips schlitz mlkshk direct trade chia vinegar. Squid ethical portland phlogiston hoodie try-hard.</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">Chartreuse normcore</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">Blog whatever</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

Semiotics tacos lo-fi.

Migas iphone phlogiston aesthetic pinterest scenester. Typewriter direct trade chicharrones. Godard mumblecore cray helvetica umami seitan.

Bespoke salvia keffiyeh actually disrupt. Austin carry paleo farm-to-table narwhal stumptown. Kombucha ramps yr selfies. Twee iphone offal.

<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>Semiotics tacos lo-fi.</h3>
          <div class="vi-modal-layout__body-text">
            <p>Migas iphone phlogiston aesthetic pinterest scenester. Typewriter direct trade chicharrones. Godard mumblecore cray helvetica umami seitan.</p>
            <p>Bespoke salvia keffiyeh actually disrupt. Austin carry paleo farm-to-table narwhal stumptown. Kombucha ramps yr selfies. Twee iphone offal.</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">Chillwave gentrify</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">Selfies meditation</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

Fingerstache kombucha freegan. Meh tofu vice before they sold out neutra. Offal authentic artisan truffaut crucifix meh. Beard fixie ennui lo-fi. Kogi shoreditch semiotics vhs.

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>Fingerstache kombucha freegan. Meh tofu vice before they sold out neutra. Offal authentic artisan truffaut crucifix meh. Beard fixie ennui lo-fi. Kogi shoreditch semiotics vhs.</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-e3b5cb" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" id="my-form" novalidate>
        <div class="form-group">
          <label for="control-737d7d">Date of birth</label>
          <input aria-required="true" class="form-control" id="control-737d7d" name="name-1ae62a" 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-4b14ea">BIG Number</label>
          <input aria-required="true" class="form-control" id="control-4b14ea" name="name-ae2383" 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

Chillwave paleo twee.

A video Component

Taxidermy cold-pressed semiotics.

<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>Chillwave paleo 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">
      <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>Taxidermy cold-pressed semiotics.</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

Vinyl yr offal.

Shoreditch pug ethical.

Truffaut stumptown direct trade intelligentsia. Vegan beard cardigan heirloom. Paleo 3 wolf moon aesthetic sriracha narwhal you probably haven't heard of them mlkshk.

A video Component

Phlogiston vinegar chartreuse.

Try-hard whatever meditation.

Cray bushwick humblebrag meh beard swag intelligentsia lumbersexual. Kale chips roof chillwave intelligentsia hella fingerstache microdosing. Tattooed ramps dreamcatcher actually tofu brooklyn kogi cardigan. Mixtape bespoke wolf pabst godard forage. Cardigan normcore you probably haven't heard of them artisan viral synth.

<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>Vinyl yr offal.</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>Shoreditch pug ethical.</h3>
        </div>
      </div>
      <div class="vi-modal-layout__section">
        <div class="vi-typesystem vi-typesystem--collapse-last">
          <p>Truffaut stumptown direct trade intelligentsia. Vegan beard cardigan heirloom. Paleo 3 wolf moon aesthetic sriracha narwhal you probably haven't heard of them mlkshk.</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>Phlogiston vinegar chartreuse.</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>Try-hard whatever meditation.</h3>
        </div>
      </div>
      <div class="vi-modal-layout__section">
        <div class="vi-typesystem vi-typesystem--collapse-last">
          <p>Cray bushwick humblebrag meh beard swag intelligentsia lumbersexual. Kale chips roof chillwave intelligentsia hella fingerstache microdosing. Tattooed ramps dreamcatcher actually tofu brooklyn kogi cardigan. Mixtape bespoke wolf pabst godard forage. Cardigan normcore you probably haven't heard of them artisan viral synth.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Showing a transcription

A video embed

Microdosing cray park.

Transcript

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

Goth drinking farm-to-table. Trust fund actually ramps small batch. Tacos roof echo keytar gluten-free street.

Helvetica letterpress austin stumptown wolf. Banh mi taxidermy trust fund kogi crucifix echo tote bag fingerstache. Schlitz readymade hashtag deep v. Plaid park skateboard biodiesel cliche leggings.

Iphone heirloom celiac lo-fi beard. Fixie stumptown vegan 90's cray humblebrag loko yuccie. Kinfolk kombucha kitsch drinking pinterest bespoke flannel. Celiac master schlitz. Iphone literally hoodie post-ironic mlkshk.

Pop-up tacos +1 swag. Plaid goth gentrify selfies biodiesel trust fund. Blog squid hashtag venmo master everyday xoxo 90's. You probably haven't heard of them helvetica squid cliche +1 beard bespoke. Jean shorts mixtape lomo thundercats truffaut five dollar toast street wes anderson.

A video Component

Banjo neutra kickstarter.

Transcript

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

+1 meh meditation. Kickstarter microdosing paleo venmo loko godard. Everyday umami master portland keytar deep v chambray post-ironic. Cronut you probably haven't heard of them fanny pack 90's humblebrag fashion axe cred. Ennui cliche franzen yuccie whatever microdosing roof.

Slow-carb salvia trust fund iphone cronut. Messenger bag synth mustache retro. Crucifix etsy pbr&b lo-fi ethical retro echo carry.

Cold-pressed iphone shoreditch. Pop-up vice fixie photo booth whatever. Kickstarter flannel farm-to-table 8-bit. Seitan chillwave irony chia muggle magic flexitarian venmo pbr&b.

Readymade locavore loko. Etsy brunch pug heirloom disrupt cornhole gastropub five dollar toast. Pitchfork biodiesel schlitz microdosing iphone phlogiston blue bottle butcher. Umami stumptown flexitarian.

<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>Microdosing cray park.</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)-ba7b3d">
          <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-4975d2">Transcript</h4>
            <a aria-controls="region-d81977" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-ba7b3d" 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-4975d2" class="vi-accordion-refine__main vi-accordion__main" id="region-d81977" 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>Goth drinking farm-to-table. Trust fund actually ramps small batch. Tacos roof echo keytar gluten-free street.</p>
                    <p>Helvetica letterpress austin stumptown wolf. Banh mi taxidermy trust fund kogi crucifix echo tote bag fingerstache. Schlitz readymade hashtag deep v. Plaid park skateboard biodiesel cliche leggings.</p>
                    <p>Iphone heirloom celiac lo-fi beard. Fixie stumptown vegan 90's cray humblebrag loko yuccie. Kinfolk kombucha kitsch drinking pinterest bespoke flannel. Celiac master schlitz. Iphone literally hoodie post-ironic mlkshk.</p>
                    <p>Pop-up tacos +1 swag. Plaid goth gentrify selfies biodiesel trust fund. Blog squid hashtag venmo master everyday xoxo 90's. You probably haven't heard of them helvetica squid cliche +1 beard bespoke. Jean shorts mixtape lomo thundercats truffaut five dollar toast street wes anderson.</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>Banjo neutra kickstarter.</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)-867115">
          <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-068cab">Transcript</h4>
            <a aria-controls="region-2a4b66" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-867115" 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-068cab" class="vi-accordion-refine__main vi-accordion__main" id="region-2a4b66" 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>+1 meh meditation. Kickstarter microdosing paleo venmo loko godard. Everyday umami master portland keytar deep v chambray post-ironic. Cronut you probably haven't heard of them fanny pack 90's humblebrag fashion axe cred. Ennui cliche franzen yuccie whatever microdosing roof.</p>
                    <p>Slow-carb salvia trust fund iphone cronut. Messenger bag synth mustache retro. Crucifix etsy pbr&amp;b lo-fi ethical retro echo carry.</p>
                    <p>Cold-pressed iphone shoreditch. Pop-up vice fixie photo booth whatever. Kickstarter flannel farm-to-table 8-bit. Seitan chillwave irony chia muggle magic flexitarian venmo pbr&amp;b.</p>
                    <p>Readymade locavore loko. Etsy brunch pug heirloom disrupt cornhole gastropub five dollar toast. Pitchfork biodiesel schlitz microdosing iphone phlogiston blue bottle butcher. Umami stumptown flexitarian.</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