Modals
Modals overlay content on the screen after being opened.
Radix UI
The Radix UI implementations can be found here.
Basic modal
Basic modal styling that will allow vertical scrolling if the content requires it.
Hello world!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<div class="ch-modal-wrapper">
<div class="ch-mask"></div>
<div class="ch-modal">
<button class="ch-modal__close" type="button">
<span class="ch-reader">Close</span>
</button>
<div class="ch-modal__body ch-pa--4">
<h1 class="ch-fs--5">Hello world!</h1>
<p>Lorem Ipsum is simply dummy text...</p>
</div>
</div>
</div>Advanced modal
A modal with a sticky header and/or footer.
Hello world!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<div class="ch-modal-wrapper">
<div class="ch-mask"></div>
<div class="ch-modal">
<div class="ch-modal__header">
<h1 class="ch-fs--5 ch-mb--0">Hello world!</h1>
<button class="ch-modal__close" type="button">
<span class="ch-reader">Close</span>
</button>
</div>
<div class="ch-modal__body ch-pa--2 ch-bg--grey-1">
<p>Lorem Ipsum is simply dummy text...</p>
</div>
<div class="ch-modal__footer">
<button class="ch-btn ch-btn--success" type="button">Continue</button>
</div>
</div>
</div>Modal drawer
ch-modal--drawer
A modal that scrolls up from the bottom app-style on mobile. (Reduce the browser width to see it in action.)
Contact us
<div class="ch-modal-wrapper">
<div class="ch-mask"></div>
<div class="ch-modal ch-modal--drawer">
<div class="ch-modal__header">
<h1 class="ch-fs--5 ch-mb--0">Contact us</h1>
<button class="ch-modal__close" type="button">
<span class="ch-reader">Close</span>
</button>
</div>
<div class="ch-modal__body ch-pa--2 ch-bg--grey-1">
<button class="ch-btn ch-mb--2 ch-width--12" type="button">
Web chat
</button>
<button class="ch-btn ch-mb--2 ch-width--12" type="button">
WhatsApp
</button>
<button class="ch-btn ch-width--12" type="button">Send an enquiry</button>
</div>
<div class="ch-modal__footer">
<button class="ch-btn ch-width--12" type="button">Cancel</button>
</div>
</div>
</div>Close button label
A close button with a text label.
Hello world!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<div class="ch-modal-wrapper">
<div class="ch-mask"></div>
<div class="ch-modal">
<button class="ch-modal__close ch-modal__close--label" type="button">
Close
</button>
<div class="ch-modal__body ch-pa--4">
<h1 class="ch-fs--5">Hello world!</h1>
<p>Lorem Ipsum is simply dummy text...</p>
</div>
</div>
</div>Modifiers
ch-modal--xs
Limit the max-width of the modal to 400px instead of 735px.
ch-modal--sm
Limit the max-width of the modal to 600px instead of 735px.