<form class="form-simple form-setup">

    <div class="field-wrap annotated with-detailed-help">
        <label for="myfield">Things here</label>

        <div class="input-detailed-help">
            <svg width="14" height="14" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="https://grabaperch.com/">Read more</a>
        </div>
        <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="field-wrap annotated with-detailed-help">
        <label for="myfield">Things here</label>

        <div class="input-detailed-help">
            <svg width="14" height="14" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="https://grabaperch.com/">Read more</a>
        </div>
        <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="field-wrap annotated with-detailed-help">
        <label for="myfield">Things here</label>

        <div class="input-detailed-help">
            <svg width="14" height="14" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="https://grabaperch.com/">Read more</a>
        </div>
        <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="field-wrap annotated with-detailed-help">
        <label for="myfield">Things here</label>

        <div class="input-detailed-help">
            <svg width="14" height="14" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="https://grabaperch.com/">Read more</a>
        </div>
        <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>
    <h2 class="divider">
        <div>
            <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 an item divider added by Perch
        </div>
    </h2>

    <div class="field-wrap annotated with-detailed-help">
        <label for="myfield">Things here</label>

        <div class="input-detailed-help">
            <svg width="14" height="14" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="https://grabaperch.com/">Read more</a>
        </div>
        <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="field-wrap annotated with-detailed-help">
        <label for="myfield">Things here</label>

        <div class="input-detailed-help">
            <svg width="14" height="14" class="icon icon-info-alt"><use xlink:href="/assets/svg/core.svg#info-alt" /></svg> Lorem ipsum <strong>dolor sit amet</strong>, consectetur adipisicing elit, sed do <em>eiusmod
	tempor</em> incididunt <code>ut labore et dolore</code> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="https://grabaperch.com/">Read more</a>
        </div>
        <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="submit-bar-setup">
        <div class="submit-bar-actions">
            <button class="button button-simple action-success">
Submit
</button> or <a href="/perch/core/users">Cancel</a>
        </div>
    </div>
</form>
<form class="form-simple form-setup">

  {{render "@input-pair--detailed-help" }}
  {{render "@input-pair--detailed-help" }}
  {{render "@input-pair--detailed-help" }}
  {{render "@input-pair--detailed-help" }}
  {{render "@divider--h2" }}
  {{render "@input-pair--detailed-help" }}
  {{render "@input-pair--detailed-help" }}
  {{render "@setup-submit-bar" }}
</form>
/* No context defined for this component. */
  • Content:
    .form-setup .field-wrap {
    	padding-left: $half-gutter;
    
    }
    
    .form-setup .divider {
    	margin: 0;
    	border-bottom: 1px solid palette(ui, keyline);
    }
  • URL: /components/raw/setup-form/setup-form.scss
  • Filesystem Path: src/components/40-setup/02-molecules/02-setup-form/setup-form.scss
  • Size: 143 Bytes

There are no notes for this item.