Modal - Astridd

Overview

A Modal is a way of displaying extra content outside of the normal page structure. Normally, Modals would be used for displaying larger images or videos, as well as additionally content around a specifically highlighted page feature.

A Modal can be triggered from multiple elements, including Buttons and images. Conversely, it can be dismissed by clicking on its close button or outside its borders.

You can also set up a single Modal to open on a page load using a query string parameter, but this should be used cautiously.

Examples

Small variation

<!-- Trigger -->
<button class="btn btn--primary" data-open="modal-sm">Modal</button>
<!-- Modal -->
<div class="modal modal--sm" id="modal-sm" data-myob-modal>
<div class="modal__head mb-1">
<h4 class="modal__title mb-0">Modal Button Heading</h4>
<button type="button" aria-label="Close" class="close" data-close>
<svg aria-hidden="true" role="img" class="icon icon--cross icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross"></use>
</svg>
</button>
</div>
<div class="modal__body modal--image">
<img src="" alt="Introspective Cage" data-interchange="[http://placehold.it/1920x1280]" data-myob-image>
</div>
</div>

Medium variation

<!-- Trigger -->
<button class="btn btn--primary" data-open="modal-md">Modal</button>
<!-- Modal -->
<div class="modal modal--md" id="modal-md" data-myob-modal>
<div class="modal__head mb-1">
<h4 class="modal__title mb-0">Modal Button Heading</h4>
<button type="button" aria-label="Close" class="close" data-close>
<svg aria-hidden="true" role="img" class="icon icon--cross icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross"></use>
</svg>
</button>
</div>
<div class="modal__body modal--image">
<img src="" alt="Introspective Cage" data-interchange="[http://placekitten.com/1920/1280,http://placekitten.com/1920/1280]" data-myob-image>
</div>
</div>

Large variation

<!-- Trigger -->
<button class="btn btn--primary" data-open="modal-lg">Modal</button>
<!-- Modal -->
<div class="modal modal--lg" id="modal-lg" data-myob-modal>
<div class="modal__head mb-1">
<h4 class="modal__title mb-0">Modal Button Heading</h4>
<button type="button" aria-label="Close" class="close" data-close>
<svg aria-hidden="true" role="img" class="icon icon--cross icon--sm">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#cross"></use>
</svg>
</button>
</div>
<div class="modal__body modal--image">
<img src="" alt="Introspective Cage" data-interchange="[http://placekitten.com/1920/1280,http://placekitten.com/1920/1280]" data-myob-image>
</div>
</div>

Usage guidelines

Dos	Don'ts
Do use the large, medium or small Modal variation that best suits your content or media.	Don't use too many Modals on one page.
	Don't use a Modal if you simply can't fit your desired content on the page. If additional content is required to help explain a point, this should be rendered within the page content or on a seperate page.

Implementation guidelines

Name	Class	Attribute	Description
Size	`.modal--sm` `.modal--md` `.modal--lg`		Sizes for Modal. Default is medium.
Open modal		`data-open`	Apply to Modal triggers; i.e. Buttons, Images. Populate with the Modal ID to target.
Auto open modal		`?open-modal=`	Auto open Modal on page load. Append this query parameter with the Modal ID to the end of the URL.