Modal Body

<div class="modal">
    <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>