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

<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>
{{> @input-pair }}
<div class="blocks">
{{> @single-block }}
{{> @single-block }}
{{> @single-block }}
{{> @single-block }}
{{> @single-block }}
</div>
{{> @input-pair }}
/* No context defined for this component. */
  • Content:
    .blocks {
    	
    	margin-top: $main-gutter;
    	border-top: 1px dotted palette(ui);
    	padding-top: $main-gutter;
    
    	margin-bottom: $main-gutter;
    	border-bottom: 1px dotted palette(ui);
    	padding-bottom: $main-gutter;
    
    	position: relative;
    }
    
    .blocks:before {
    	content: "◤";
    	position: absolute;
    	top: -3px;
    	left: 0;
    	@include font-scale(s, helvetica);
    	color: palette(ui);
    }
  • URL: /components/raw/stack-of-blocks/stack-of-blocks.scss
  • Filesystem Path: src/components/12-forms/03-organisms/06-blocks/03-stack-of-blocks/stack-of-blocks.scss
  • Size: 366 Bytes

There are no notes for this item.