<div class="modal-overlay">
<div class="modal modal-small">
<form>
<div class="modal-header">
<div class="modal-header__title-wrapper">
<h2 class="modal-header__title">New Service Category</h2>
</div>
<button class="btn btn-small btn-icon-only " type="button">
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="20px"
height="20px"
viewBox="0 0 20 20"
enable-background="new 0 0 20 20"
xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8334 5.3415L14.6584 4.1665L10.0001 8.82484L5.34175 4.1665L4.16675 5.3415L8.82508 9.99984L4.16675 14.6582L5.34175 15.8332L10.0001 11.1748L14.6584 15.8332L15.8334 14.6582L11.1751 9.99984L15.8334 5.3415Z"/>
</svg>
</span>
</span>
</button>
</div>
<div class="modal-body">
<div class="form-row">
<div class="text-input ">
<div class="text-input__pre">
<label class="text-input__label" for="name">Category Name</label>
</div>
<div class="text-input__inner">
<input type="" class="text-input__input" placeholder="i.e. Barber" id="name" />
</div>
<p class="text-input__helper"></p>
</div>
</div>
<div class="form-row">
<div class="text-input ">
<div class="text-input__pre">
<label class="text-input__label" for="teaser">Teaser</label>
<span class="text-input__post-label">0/64</span>
</div>
<div class="text-input__inner">
<input type="" class="text-input__input" placeholder="Haircuts, shaves, and touch-ups." id="teaser" />
</div>
<p class="text-input__helper">Add a short teaser for your guests to see when they browse your services. Please limit to 64 characters.</p>
</div>
</div>
<div class="form-row">
<div class="text-input ">
<div class="text-input__pre">
<label class="text-input__label" for="description">Description</label>
</div> <textarea class="text-area__input text-area__input-no-resize" id=description name="" placeholder="Optional category description…" rows="3"></textarea>
<p class="text-input__helper">Add a short teaser for your guests to see when they browse your services.</p>
</div>
</div>
<div class="form-row">
<div class="checkbox-item">
<div class="checkbox-item__inner">
<input class="checkbox-item__input" type="checkbox" id="hide" name="" value="" />
<label class="checkbox-item__label" for="hide">Hide this category</label>
<div class="checkbox-item__icons">
<?xml version="1.0" encoding="utf-8"?>
<svg class='checkbox-item__icon checkbox-item__icon-yes' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24"
xml:space="preserve">
<path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<svg class='checkbox-item__icon checkbox-item__icon-maybe' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24"
xml:space="preserve">
<defs><path id="a" d="M0 0h24v24H0z"/></defs><clipPath id="b">use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<svg class='checkbox-item__icon checkbox-item__icon-no' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24"
xml:space="preserve">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M0 0h24v24H0z" fill="none"/>
</svg>
</div>
</div>
<p class="checkbox-item__post-text">It will still be visible to your teammates, but will be hidden from guests.</p>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary " type="button">
<span class="btn__inner">
<span class="btn__text">Create Category</span>
</span>
</button>
<button class="btn btn-secondary " type="button">
<span class="btn__inner">
<span class="btn__text">Cancel</span>
</span>
</button>
</div>
</form>
</div>
</div>
<div class="modal-overlay">
<div class="modal modal-small">
<form>
{{> @modal-header title="New Service Category"}}
<div class="modal-body">
<div class="form-row">
{{>
@text-input
id="name"
label="Category Name"
placeholder="i.e. Barber"
}}
</div>
<div class="form-row">
{{>
@text-input
id="teaser"
label="Teaser"
placeholder="Haircuts, shaves, and touch-ups."
helper="Add a short teaser for your guests to see when they browse your services. Please limit to 64 characters."
postLabel='0/64'
}}
</div>
<div class="form-row">
{{>
@textarea
id="description"
label="Description"
placeholder="Optional category description…"
helper="Add a short teaser for your guests to see when they browse your services."
rows=3
}}
</div>
<div class="form-row">
{{>
@checkbox
id="hide"
label="Hide this category"
postText="It will still be visible to your teammates, but will be hidden from guests."
iconYes='<path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>'
iconNo='<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M0 0h24v24H0z" fill="none"/>'
iconMaybe='<defs><path id="a" d="M0 0h24v24H0z"/></defs><clipPath id="b">use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"/>'
}}
</div>
</div>
{{> @modal-footer primaryAction="Create Category" secondaryAction="Cancel"}}
</form>
</div>
</div>
/* No context defined for this component. */
Modals enable users to perform complex tasks without leaving the current view.
Context; a Modal should include enough information for a user to know what they’re doing at a glance Accessibility; any Modal should be dismissible via the Esc key, and forms in Modals should behave just like any other form.
Use a Modal for tasks of medium complexity.