<div class="block-wrap">
    <div class="block-item">
        <h2 class="divider">Text
            <span class="rm"><a href="#"><svg width="16" height="16" class="icon icon-cancel"><use xlink:href="/assets/svg/core.svg#cancel" /></svg> <span aria-hidden="true">Delete this item?</span></a>
            </span>
        </h2>

        <div class="field-wrap annotated"><label for="myfield">Things here</label>
            <div class="form-entry"><input type="text" id="myfield" required="required" aria-required="true" placeholder="This is a text field" class="input-simple m"></div>
            <p class="inline-help">This is the help text for this field.</p>
        </div>

        <fieldset class="fieldset-clean">
            <div class="fieldset-inner">

                <div class="legend-wrap">
                    <legend>May be created by</legend>
                </div>

                <div class="checkbox-group">

                    <div class="checkbox-single">
                        <label for="subpage_roles_0" class="">Everyone</label>
                        <div class="form-entry">
                            <input type="checkbox" id="subpage_roles_0" name="subpage_roles[]" value="*">
                        </div>
                    </div>

                    <div class="checkbox-single">
                        <label for="subpage_roles_1" class="">Admin</label>
                        <div class="form-entry"><input type="checkbox" id="subpage_roles_1" name="subpage_roles[]" value="2" checked disabled></div>
                    </div>

                    <div class="checkbox-single">
                        <label for="subpage_roles_2" class="">Editor</label>
                        <div class="form-entry"><input type="checkbox" id="subpage_roles_2" name="subpage_roles[]" value="1"></div>
                    </div>
                </div>

            </div>

        </fieldset>

        <div class="divider">
            <a href="#" class="divider-toggle"><svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg></a> This is content in a divider added with divider-before
        </div>

        <div class="field-wrap checkbox-single"><label for="myfield">Things here</label>
            <div class="form-entry"><input type="checkbox" id="">
            </div>
        </div>

    </div>
    <div class="block-add-bar">
        <span class="block-add-prompt"><svg width="20" height="20" class="icon icon-add"><use xlink:href="/assets/svg/core.svg#add" /></svg></span>
        <a href="#" class="block-add"><svg width="10" height="10" class="icon icon-pencil"><use xlink:href="/assets/svg/blocks.svg#pencil" /></svg> Text</a>
        <a href="#" class="block-add"><svg width="10" height="10" class="icon icon-quote"><use xlink:href="/assets/svg/blocks.svg#quote" /></svg> Pull quote</a>
        <a href="#" class="block-add"><svg width="10" height="10" class="icon icon-photo"><use xlink:href="/assets/svg/blocks.svg#photo" /></svg> Feature image</a>
        <a href="#" class="block-add"><svg width="10" height="10" class="icon icon-signs"><use xlink:href="/assets/svg/blocks.svg#signs" /></svg> Directions</a>
    </div>
</div>
<div class="block-wrap">
	<div class="block-item">
		<h2 class="divider">Text
			<span class="rm"><a href="#">{{ icon 'core/cancel'}} <span aria-hidden="true">Delete this item?</span></a></span>
		</h2>
		{{render "@input-pair" }}
		{{render "@checkbox-group" }}
		{{render "@divider" }}
		{{render "@single-checkbox" }}
	</div>
	{{> @block-add-bar }}
</div>
/* No context defined for this component. */
  • Content:
    .block-item .rm {
    	font-weight: 400;
        @include font-scale(sm, helvetica);
    }
    
    .block-item .rm span {
    	display: none;
    }
    
    .block-item .rm svg {
    	fill: palette(ui);
    	vertical-align: middle;
    }
    
    .block-item:hover .rm svg {
    	fill: palette(ui, darker);
    }
    
    .block-item .rm:hover svg {
    	fill: palette(alert);
    }
  • URL: /components/raw/single-block/single-block.scss
  • Filesystem Path: src/components/12-forms/03-organisms/06-blocks/02-single-block/single-block.scss
  • Size: 303 Bytes

There are no notes for this item.