Modals
Modals are used to display content in a layer above the main page content, typically to capture user attention or require interaction before continuing.
Corncob Modals take advantage of the native <dialog> element and are controlled via commands to show and hide the modal from buttons or other interactive elements.
This takes care of the accessibility requirements for modals by leveraging the native <dialog> element which handles focus trapping and other accessibility concerns out of the box.
See MDN dialog element for more information on the native <dialog> element and its features.
This modal shows an optional header with a close button that the user can use to dismiss the modal.
<dialog closedby="any" class="corn-modal corn-panel" id="corn-modal-example">
<div class="corn-modal--header">
<h4>Modal Header</h4>
<button
class="corn-button corn-button--icon corn-button--xs"
commandfor="corn-modal-example"
command="close"
type="button"
aria-label="Close"
>
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon"><use href="[close icon]"></use></svg>
</button>
</div>
<div class="corn-modal--content">
<p>This is a modal content area.</p>
</div>
</dialog>Modal Tokens
:root {
--cc-modal--backdrop--background: rgb(from var(--cc-gray-90) r g b / 80%);
--cc-modal--color: var(--cc-white);
--cc-modal--font-size: var(--cc-size--1);
--cc-modal--padding: var(--cc-size--2) var(--cc-size--1);
--cc-modal--border-radius: var(--cc-border--radius);
--cc-modal--box-shadow: var(--cc-shadow--drop);
--cc-modal--transition-function: var(--cc-transition--easing);
--cc-modal--transition-time: var(--cc-transition--time--fast);
}