Application Shell
Parent layout for the entire login/settings area.
Page Title
Title lead or sub title, an introductory paragraph or summary of the page contents.
<header class="c-hero c-hero--header u-bb u-b-ui" id="app_top">
<div class="c-hero__body">
<div class="c-hero__body-description">
<h1 class="c-hero-heading | u-heading u-kilo">Page Title</h1>
<p class="c-hero-lead | u-lead u-delta">Title lead or sub title, an introductory paragraph or summary of the page contents.</p>
</div>
</div>
</header>
<section class="o-section">
<div class="o-wrapper">
<div class="o-grid | u-justify-center u-justify-start-@bp4">
<div class="o-grid__item | u-col-12 u-col-9-@bp3 u-col-3-@bp4"
x-data="{ mobileModal: false }"
>
<!-- Menu/Sidebar -->
<nav class="c-sidebar | u-stick u-removed-<bp4">
<div class="c-sidebar__head">
<span class="c-sidebar__heading">Menu:</span>
</div>
<ul class="c-sidebar__list | o-list-stacked">
<li class="c-sidebar__item | o-list__item">
<a class="c-sidebar__link | is-active" href="#">Item 1</a>
</li>
<li class="c-sidebar__item | o-list__item">
<a class="c-sidebar__link" href="#">Item 2</a>
<ul class="c-sidebar__list c-sidebar__sub | o-list-stacked">
<li class="c-sidebar__item | o-list__item">
<a class="c-sidebar__link" href="#">Item 2a</a>
</li>
<li class="c-sidebar__item | o-list__item">
<a class="c-sidebar__link" href="#">Item 2b</a>
</li>
</ul>
</li>
<li class="c-sidebar__item | o-list__item">
<a class="c-sidebar__link" href="#">Item 3</a>
</li>
</ul>
</nav>
<!-- Mobile Menu -->
<button class="c-btn c-btn--lg | u-aspect u-round u-removed-@bp4"
:aria-label="mobileModal == true ? 'Open Menu' : 'Close Menu'"
@click="mobileModal = true"
>
<svg class="c-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M2 8h12M2 13h8M2 3h10"></path>
</svg>
</button>
<div class="c-modal c-modal--sidebar | u-removed-@bp4"
role="dialog"
aria-modal="true"
style="display: none;"
x-show="mobileModal"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="mobileModal = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="mobileModal"
x-transition.opacity.duration.400
@click="mobileModal = false"
style="display: none;"
></div>
<div class="c-modal__body"
x-show="mobileModal"
@click.outside="mobileModal = false"
x-trap.noscroll.inert="mobileModal"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-n100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-n100%"
style="display: none;"
>
<div class="c-modal__body-close">
<button class="c-btn c-btn--clear" type="button" @click="mobileModal = false">
<span class="u-hidden">Close</span>
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
<div class="c-modal__body-content | o-flow">
<h2 class="u-ml u-mt" :id="$id('modal-title')">Menu</h2>
<nav class="c-sidebar | u-mb u-b-0">
<ul class="c-sidebar__list | o-list-stacked">
<li class="c-sidebar__item | o-list__item">
<a class="c-sidebar__link | is-active" href="#">
Item 1
</a>
</li>
<li class="c-sidebar__item | o-list__item">
<a class="c-sidebar__link" href="#">
Item 2
</a>
</li>
<li class="c-sidebar__item | o-list__item">
<a class="c-sidebar__link" href="#">
Item 3
</a>
</li>
<li class="c-sidebar__item | o-list__item">
<button class="c-sidebar__link | u-tc-negative" type="button">
Sign Out
<svg class="c-icon | u-ml-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.5 8h7M5 4.5 1.5 8 5 11.5m4.5-10h3.2a1.8 1.8 0 0 1 1.8 1.8v9.4a1.8 1.8 0 0 1-1.8 1.8H9.5h0"></path>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="o-grid__item o-section-flow | u-col-9-@bp3 u-col-8-@bp4 u-col-7-@bp5">
<!-- Main Content -->
<section class="o-section">...</section>
<section class="o-section">...</section>
<section class="o-section">...</section>
<!-- Bottom Navigation -->
<nav class="c-card c-card--shadow | o-nav | u-stick u-stick--bottom u-layer-1">
<div class="o-navbar__wrapper | u-p-sm">
<div class="o-navbar__left">
<p class="u-fs-sm u-fw-500">Unsaved changes</p>
</div>
<div class="o-navbar__right | u-flex u-space-x-sm">
<button class="c-btn c-btn--tertiary" type="button">Reset</button>
<button class="c-btn c-btn--positive" type="submit">Save changes</button>
</div>
</div>
</nav>
</div>
<!-- Go Top Btn -->
<div class="o-grid__item | u-col-content u-removed-<bp3 u-col-2-@bp5 u-flex u-flex-column u-nmr-lg u-m-0-@bp4">
<div class="u-h-100% --u-spacer--"></div>
<a class="c-btn c-btn--tertiary | u-stick u-stick--bottom u-layer-1" href="#app_top">
<span class="u-hidden">Go to top</span>
<svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="M8 14.5V3M3 7l5-5 5 5"/>
</svg>
</a>
</div>
</div>
</div>
</section>Save Changes Nav
When form changes have been made, a popup save menu appears at the bottom of the viewport.
<div class=""
x-data="{ dirty: null }"
>
<div class="o-grid">
<div class="o-grid__item | u-col-12">
<label class="c-label">
<span class="c-label__text">Make Dirty</span>
<span class="c-label__input">
<input class="c-input c-input--text" type="text" x-model.debounce.250ms="dirty">
</span>
</label>
</div>
<div class="o-grid__item | u-col-12 u-h-4">
<nav class="c-card c-card--shadow | o-nav | u-stick u-stick--bottom u-layer-1" style="display: none;"
x-show="dirty"
x-transition:enter="u-transition u-easing-scalein u-duration-700"
x-transition:enter-start="u-opacity:0% u-translate-y-100%"
x-transition:enter-end="u-opacity:100% u-translate-y-0"
x-transition:leave="u-transition u-easing-scalein u-duration-700"
x-transition:leave-start="u-opacity:100% u-translate-y-0"
x-transition:leave-end="u-opacity:0% u-translate-y-100%"
>
<div class="o-navbar__wrapper | u-p-sm">
<div class="o-navbar__left">
<p class="u-fs-sm u-fw-500">Unsaved changes</p>
</div>
<div class="o-navbar__right | u-flex u-space-x-sm">
<button class="c-btn c-btn--tertiary" type="button">Reset</button>
<button class="c-btn c-btn--positive" type="submit">Save changes</button>
</div>
</div>
</nav>
</div>
</div>
</div>Card Sections
Group related sets of inputs and fields together inside a carded section.
Section 1
...
Section 2
...
Section 3
...
<section id="section_1">
<h2 class="u-heading u-delta u-fw-500 u-mb">Section 1</h2>
<div class="c-card">
<div class="c-card__body">
...
</div>
</div>
</section>
<!-- Repeat Sections -->
<section id="section_2">
<h2 class="u-heading u-delta u-fw-500 u-mb">Section 2</h2>
<div class="c-card">
<div class="c-card__body">
...
</div>
</div>
</section>
<section id="section_3">
<h2 class="u-heading u-delta u-fw-500 u-mb">Section 3</h2>
<div class="c-card">
<div class="c-card__body">
...
</div>
</div>
</section>Field Groups
A specific parent group or selection of fields which contain inputs, actions or content.
Title 1
Content/Input/Actions
Title 2
Content/Input/Actions
Title 3
Content/Input/Actions
<div class="c-card">
<div class="c-card__body | u-p">
<div class="o-grid | u-gap-x-sm">
<!-- Group Start -->
<div class="o-grid__item | u-col-12 u-nmb">
<div class="o-split">
<span class="c-label__text | o-split__title">Title</span>
<span class="u-fw-500 u-fw-sm u-tc-slate u-muted:50%">1</span>
</div>
</div>
<div class="o-grid__item | u-col-12">
Content/Input/Actions
</div>
<!-- Group End -->
<div class="o-grid__item | u-col-12">
<hr class="c-rule | u-nmx">
</div>
<!-- Another Group -->
<div class="o-grid__item | u-col-12 u-nmb">
<div class="o-split">
<span class="c-label__text | o-split__title">Title</span>
<span class="u-fw-500 u-fw-sm u-tc-slate u-muted:50%">2</span>
</div>
</div>
<div class="o-grid__item | u-col-12">
Content/Input/Actions
</div>
<!-- Group End -->
<div class="o-grid__item | u-col-12">
<hr class="c-rule | u-nmx">
</div>
<!-- Another Group -->
<div class="o-grid__item | u-col-12 u-nmb">
<div class="o-split">
<span class="c-label__text | o-split__title">Title</span>
<span class="u-fw-500 u-fw-sm u-tc-slate u-muted:50%">3</span>
</div>
</div>
<div class="o-grid__item | u-col-12">
Content/Input/Actions
</div>
</div>
</div>
</div>Group State
Imply that unsaved changes have been made to a group of fields.
Title 1
Content/Input/Actions
Title 2
Content/Input/Actions
Title 3
Content/Input/Actions
<div class="c-card | is-changed">
...
</div>Content Fields
A selection of content based fields to use alone or alongside some of the input based fields.
Heading
Heading example (no label), usually with content or actions.
Heading
Content example for adding extra information or context about a user action.
- Item 1
- Item 2
- Item 3
Heading
Content and actions example.
Heading Positive note usually displayed after a successful action.
Heading
...
<div class="o-grid__item o-flow-sm">
<span class="u-sub-heading">Heading</span>
<p>Heading example (no label), usually with content or actions.</p>
</div>
......
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-col-12">
<label class="c-label | u-w-100%" for="field_label">
<span class="c-label__text">Heading</span>
</label>
</div>
<div class="o-grid__item">
<span class="c-label__input">
<input class="c-input c-input--text" id="field_label" type="text" placeholder="Input Text">
</span>
<span class="c-note">Standard label field with text input.</span>
</div>
</fieldset>
......
<div class="o-grid__item o-flow-sm">
<span class="u-sub-heading">Heading</span>
<p>Content example for adding extra information or context about a user action.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
......
<div class="o-grid__item o-flow-sm">
<span class="u-sub-heading">Heading</span>
<p>Content and actions example.</p>
</div>
<div class="o-grid__item | u-w-content u-flex u-align-start">
<button class="c-btn c-btn--primary">Setup</button>
</div>
......
<div class="o-grid__item o-flow-sm | u-col-12">
<span class="u-sub-heading">Heading</span>
<span class="c-note c-note--success">Positive note usually displayed after a successful action.</span>
</div>
......
<div class="o-grid | u-gap-x-sm">
<div class="o-grid__item o-flow-sm">
<span class="u-sub-heading">Heading</span>
<button class="c-btn c-btn--empty | o-flow-sm | u-h-10 u-aspect--3x1 u-w-100% u-mt" type="button">
<svg class="c-icon c-icon--md" viewBox="0 0 16 16" aria-hidden="true">
<path stroke-linecap="round" stroke-width="1.5" d="M8 3v10M3 8h10"/>
</svg>
<span class="u-body-type u-mt-xs">Add a new address</span>
<span class="u-sub-heading">No Addresses</span>
</button>
</div>
</div>
...Input Fields
A selection of input field sets which allow users to input or change data.
...
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-col-12">
<label class="c-label | u-w-100%" for="field_text">
<span class="c-label__text">Heading</span>
</label>
</div>
<div class="o-grid__item">
<span class="c-label__input">
<input class="c-input c-input--text" id="field_text" type="text">
</span>
<span class="c-note">Standard label field with text input.</span>
</div>
</fieldset>
......
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-col-12">
<span class="u-sub-heading">Heading</span>
</div>
<div class="o-grid__item o-flow-sm">
<div class="c-label | u-w-100%">
<label class="c-label c-label--checkbox" for="check_1">
<input class="c-input c-input--checkbox" id="check_1" type="checkbox">
<span class="c-label__text">Checkbox 1</span>
</label>
<label class="c-label c-label--checkbox" for="check_2">
<input class="c-input c-input--checkbox" id="check_2" type="checkbox">
<span class="c-label__text">Checkbox 2</span>
</label>
<label class="c-label c-label--checkbox" for="check_3">
<input class="c-input c-input--checkbox" id="check_3" type="checkbox">
<span class="c-label__text">Checkbox 3</span>
</label>
</div>
</div>
</fieldset>
......
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-col-12">
<span class="u-sub-heading">Heading</span>
</div>
<div class="o-grid__item o-flow-sm">
<div class="c-label | u-w-100%">
<label class="c-label c-label--radio" for="radio_1">
<input class="c-input c-input--radio" id="radio_1" type="radio">
<span class="c-label__text">Radio 1</span>
</label>
<label class="c-label c-label--radio" for="radio_2">
<input class="c-input c-input--radio" id="radio_2" type="radio">
<span class="c-label__text">Radio 2</span>
</label>
<label class="c-label c-label--radio" for="radio_3">
<input class="c-input c-input--radio" id="radio_3" type="radio">
<span class="c-label__text">Radio 3</span>
</label>
</div>
</div>
</fieldset>
......
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-col-12">
<label class="c-label | u-w-100%" for="field_select">
<span class="c-label__text">Heading</span>
</label>
</div>
<div class="o-grid__item">
<span class="c-label__input">
<select class="c-input c-input--select" id="field_select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</select>
</span>
<span class="c-note">Standard label field with select.</span>
</div>
</fieldset>
......
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-col-12 u-col-6-@bp2">
<label class="c-label | u-w-100%" for="text_1">
<span class="c-label__text">Text 1</span>
<span class="c-label__input">
<input class="c-input c-input--text" id="text_1" type="text">
</span>
</label>
</div>
<div class="o-grid__item | u-col-12 u-col-6-@bp2">
<label class="c-label | u-w-100%" for="text_2">
<span class="c-label__text">Text 2</span>
<span class="c-label__input">
<input class="c-input c-input--text" id="text_2" type="text">
</span>
</label>
</div>
</fieldset>
...Input Fields with Actions
A selection of input elements alongside an a single or set of actions.
...
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-col-12">
<label class="c-label | u-w-100%" for="field_text_action">
<span class="c-label__text">Heading</span>
</label>
</div>
<div class="o-grid__item">
<span class="c-label__input">
<input class="c-input c-input--text" id="field_text_action" type="text">
</span>
<span class="c-note">Standard label field with text input.</span>
</div>
<div class="o-grid__item | u-col-content">
<button class="c-btn c-btn--primary" type="button">
Setup
</button>
</div>
</fieldset>
......
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-col-12">
<span class="u-sub-heading">Heading</span>
</div>
<div class="o-grid__item">
<div class="c-label">
<label class="c-label c-label--checkbox" for="check_action_1">
<input class="c-input c-input--checkbox" id="check_action_1" type="checkbox">
<span class="c-label__text">Check 1</span>
</label>
<label class="c-label c-label--checkbox" for="check_action_2">
<input class="c-input c-input--checkbox" id="check_action_2" type="checkbox">
<span class="c-label__text">Check 2</span>
</label>
<label class="c-label c-label--checkbox" for="check_action_3">
<input class="c-input c-input--checkbox" id="check_action_3" type="checkbox">
<span class="c-label__text">Check 3</span>
</label>
</div>
<span class="c-note">Standard label field with checkbox input.</span>
</div>
<div class="o-grid__item | u-w-content u-flex u-align-start u-space-x-sm u-mt-33">
<button class="c-btn c-btn--primary">Setup</button>
</div>
</fieldset>
......
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-col-12">
<span class="u-sub-heading">Heading</span>
</div>
<div class="o-grid__item">
<div class="c-label">
<label class="c-label c-label--radio" for="radio_action_1">
<input class="c-input c-input--radio" id="radio_action_1" type="radio" name="radio_action_grp">
<span class="c-label__text">Radio 1</span>
</label>
<label class="c-label c-label--radio" for="radio_action_2">
<input class="c-input c-input--radio" id="radio_action_2" type="radio" name="radio_action_grp">
<span class="c-label__text">Radio 2</span>
</label>
<label class="c-label c-label--radio" for="radio_action_3">
<input class="c-input c-input--radio" id="radio_action_3" type="radio" name="radio_action_grp">
<span class="c-label__text">Radio 3</span>
</label>
</div>
<span class="c-note">Standard label field with radio input.</span>
</div>
<div class="o-grid__item | u-w-content u-flex u-align-start u-space-x-sm u-mt-33">
<button class="c-btn c-btn--primary">Setup</button>
</div>
</fieldset>
......
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-col-12">
<label class="c-label | u-w-100%" for="field_select_action">
<span class="c-label__text">Heading</span>
</label>
</div>
<div class="o-grid__item">
<span class="c-label__input">
<select class="c-input c-input--select" id="field_select_action">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</select>
</span>
<span class="c-note">Standard label field with select.</span>
</div>
<div class="o-grid__item | u-col-content u-flex u-space-x-sm u-align-start u-mt-33">
<button class="c-btn c-btn--primary">Setup</button>
</div>
</fieldset>
...Field State
A field state that makes it clear to a user the action they`re currently undertaking. i.e. deleting or adding a row.
...
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-w-1.5 u-flex">
<svg class="c-icon | u-tc-positive u-ring-green-100 u-round u-self-start u-mt-sm" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M8 1c3.86 0 7.023 3.198 6.998 7.046A7 7 0 0 1 8 15a7.008 7.008 0 0 1-7-7C.996 4.136 4.14 1 8 1Zm.75 4a.75.75 0 0 0-1.5 0v2.25H5a.75.75 0 0 0 0 1.5h2.25V11a.75.75 0 0 0 1.5 0V8.75H11a.75.75 0 0 0 0-1.5H8.75V5Z" clip-rule="evenodd"/>
</svg>
</div>
...
...
</fieldset>
......
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-w-1.5 u-flex">
<svg class="c-icon | u-tc-negative u-ring-red-100 u-round u-self-start u-mt-sm" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M8 1c3.86 0 7.023 3.198 6.998 7.046A7 7 0 0 1 8 15a7.008 7.008 0 0 1-7-7C.996 4.136 4.14 1 8 1ZM5 7.25a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5H5Z" clip-rule="evenodd"/>
</svg>
</div>
...
...
</fieldset>
...Example Fields
A few example fields used within the settings pages.
Emails
Phones
Addresses
<div class="c-card">
<div class="c-card__body | u-p">
<div class="o-grid | u-gap-sm">
<div class="o-grid__item | u-col-12">
<span class="u-sub-heading">Emails</span>
</div>
<div class="o-grid__item | u-col-12">
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-w-1.5">
<label class="c-label--radio | u-mr-0" for="field_email_1">
<input class="c-input c-input--radio | u-mr-0" id="field_email_1" type="radio" name="field_grp" value="field_1">
<span class="c-label__text | u-hidden">Select Primary</span>
</label>
</div>
<div class="o-grid__item | u-flex-auto u-flex-80% u-flex-fill-@bp3">
<div class="o-grid | u-gap-sm">
<div class="o-grid__item | u-flex-auto u-flex-85% u-flex-fill-@bp3">
<label class="c-label | u-w-100%" for="field_email_2">
<span class="c-label__input">
<input class="c-input c-input--text" id="field_email_2" type="email" readonly value="steve.jobs@apple.com">
</span>
</label>
</div>
<div class="o-grid__item | u-col-content">
<label class="c-label | u-w-100%" for="field_email_3">
<span class="c-label__input">
<select class="c-input c-input--select | u-w-content" id="field_email_3">
<option selected>Option 1</option>
<option>Option 2</option>
</select>
</span>
</label>
</div>
<div class="o-grid__item | u-col-content u-flex u-space-x-sm">
<button class="c-btn c-btn--tertiary" type="button">
<span class="u-hidden">Edit</span>
<svg class="c-icon | u-tc-info" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.241 2.991 1.125-1.125a1.25 1.25 0 0 1 1.768 1.768l-9.58 9.58a3 3 0 0 1-1.264.753L1.5 14.5l.533-1.79a3 3 0 0 1 .754-1.265l8.455-8.454h0Zm0 0L13 4.75"></path>
</svg>
</button>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div><div class="c-card">
<div class="c-card__body | u-p">
<div class="o-grid | u-gap-sm">
<div class="o-grid__item | u-col-12">
<span class="u-sub-heading">Phones</span>
</div>
<div class="o-grid__item | u-col-12">
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-w-1.5">
<label class="c-label--radio | u-mr-0" for="field_phone_1">
<input class="c-input c-input--radio | u-mr-0" id="field_phone_1" type="radio" name="field_phone_grp" value="field_1">
<span class="c-label__text | u-hidden">Select Primary</span>
</label>
</div>
<div class="o-grid__item | u-flex-auto u-flex-80% u-flex-fill-@bp3">
<div class="o-grid | u-gap-sm">
<div class="o-grid__item | u-flex-auto u-flex-85% u-flex-fill-@bp3">
<label class="c-label | u-w-100%" for="field_phone_2">
<span class="c-label__input">
<input class="c-input c-input--text" id="field_phone_2" type="text" readonly value="077317 88811">
</span>
</label>
</div>
<div class="o-grid__item | u-col-content">
<label class="c-label | u-w-100%" for="field_phone_3">
<span class="c-label__input">
<select class="c-input c-input--select | u-w-content" id="field_3">
<option selected>Option 1</option>
<option>Option 2</option>
</select>
</span>
</label>
</div>
<div class="o-grid__item | u-col-content u-flex u-space-x-sm">
<button class="c-btn c-btn--tertiary" type="button">
<span class="u-hidden">Edit</span>
<svg class="c-icon | u-tc-info" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.241 2.991 1.125-1.125a1.25 1.25 0 0 1 1.768 1.768l-9.58 9.58a3 3 0 0 1-1.264.753L1.5 14.5l.533-1.79a3 3 0 0 1 .754-1.265l8.455-8.454h0Zm0 0L13 4.75"></path>
</svg>
</button>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div><div class="c-card">
<div class="c-card__body | u-p">
<div class="o-grid | u-gap-sm">
<div class="o-grid__item | u-col-12">
<span class="u-sub-heading">Addresses</span>
</div>
<div class="o-grid__item | u-col-12">
<fieldset class="o-grid | u-gap-sm u-p-0">
<div class="o-grid__item | u-w-1.5">
<label class="c-label c-label--radio | u-mr-0" for="field_address_1">
<input class="c-input c-input--radio" type="radio" id="field_address_1">
<span class="c-label__text | u-hidden">Select Primary</span>
</label>
</div>
<div class="o-grid__item | u-flex-auto u-flex-80% u-flex-fill-@bp3">
<div class="o-grid | u-gap-sm">
<div class="o-grid__item | u-flex u-flex-auto u-flex-85% u-flex-fill-@bp3">
<label class="c-label | u-w-100%" for="field_address_2">
<span class="c-label__input">
<input class="c-input c-input--text" id="field_address_2" type="text" value="16 Gundulf Road, Meon Vale, Warwickshire, CV37 8WX" readonly>
</span>
</label>
</div>
<div class="o-grid__item | u-col-content u-flex u-align-start u-space-x-sm">
<button class="c-btn c-btn--tertiary | u-font-body u-fs-xs u-w-4" type="button">
Verify
</button>
<button class="c-btn c-btn--tertiary" type="button">
<span class="u-hidden">Edit</span>
<svg class="c-icon | u-tc-info" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.241 2.991 1.125-1.125a1.25 1.25 0 0 1 1.768 1.768l-9.58 9.58a3 3 0 0 1-1.264.753L1.5 14.5l.533-1.79a3 3 0 0 1 .754-1.265l8.455-8.454h0Zm0 0L13 4.75"></path>
</svg>
</button>
<button class="c-btn c-btn--tertiary" type="button">
<span class="u-hidden">Delete</span>
<svg class="c-icon | u-tc-negative" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9.993 5.91-.252 6.545m-3.482 0-.252-6.546m7.25-2.334c.248.038.496.078.743.12m-.743-.12-.777 10.097a1.636 1.636 0 0 1-1.632 1.51H5.152a1.636 1.636 0 0 1-1.632-1.51L2.743 3.575m10.514 0a34.988 34.988 0 0 0-2.53-.289m-7.984.289a31.72 31.72 0 0 0-.743.12m.743-.12c.84-.127 1.683-.223 2.53-.289m5.454 0V2.62c0-.858-.662-1.574-1.52-1.6a37.79 37.79 0 0 0-2.414 0c-.858.026-1.52.743-1.52 1.6v.666m5.454 0a35.465 35.465 0 0 0-5.454 0"></path>
</svg>
</button>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>Field Lists
A list of repeatable field groups used to store variants of the same information.
Heading
- 20/20 Limit Reached
<div class="c-card">
<div class="c-card__body | u-p">
<div class="o-grid | u-gap-sm">
<div class="o-grid__item | u-col-12">
<span class="u-sub-heading">Heading</span>
</div>
<div class="o-grid__item | u-col-12">
<!-- Parent List Container -->
<ul class="o-grid | u-gap-sm-@bp2">
<!-- Field Group 1 -->
<li class="o-grid__item | u-col-12">
<fieldset class="o-grid | u-gap-sm u-p-0">
<!-- Input 1 -->
<div class="o-grid__item | u-w-1.5">
<label class="c-label c-label--radio | u-mr-0" for="field_list_1_1">
<input class="c-input c-input--radio" id="field_list_1_1" type="radio" name="field_set_1">
<span class="c-label__text | u-hidden">Select primary</span>
</label>
</div>
<!-- Mobile Split Container -->
<div class="o-grid__item | u-flex-auto u-flex-80% u-flex-fill-@bp3">
<div class="o-grid | u-gap-sm">
<!-- Input 2 -->
<div class="o-grid__item | u-flex-auto u-flex-85% u-flex-fill-@bp3">
<label class="c-label | u-w-100%" for="field_list_1_2">
<span class="c-label__input">
<input class="c-input c-input--text" id="field_list_1_2" type="email" readonly value="steve.jobs@apple.com">
</span>
</label>
</div>
<!-- Input 3 -->
<div class="o-grid__item | u-col-content">
<label class="c-label | u-w-100%" for="field_list_1_3">
<span class="c-label__input">
<select class="c-input c-input--select | u-w-content" id="field_list_1_3">
<option selected>Option 1</option>
<option>Option 2</option>
</select>
</span>
</label>
</div>
<!-- Input 4 -->
<div class="o-grid__item | u-col-content">
<button class="c-btn c-btn--tertiary" type="button">
<span class="u-hidden">Edit</span>
<svg class="c-icon | u-tc-info" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.241 2.991 1.125-1.125a1.25 1.25 0 0 1 1.768 1.768l-9.58 9.58a3 3 0 0 1-1.264.753L1.5 14.5l.533-1.79a3 3 0 0 1 .754-1.265l8.455-8.454h0Zm0 0L13 4.75"></path>
</svg>
</button>
</div>
</div>
</div>
</fieldset>
</li>
<!-- Field Group 2 -->
<li class="o-grid__item | u-col-12">
<fieldset class="o-grid | u-gap-sm u-p-0">
<!-- Input 1 -->
<div class="o-grid__item | u-w-1.5">
<label class="c-label c-label--radio | u-mr-0" for="field_list_2_1">
<input class="c-input c-input--radio" id="field_list_2_1" type="radio" name="field_set_1">
</label>
</div>
<!-- Split Container -->
<div class="o-grid__item | u-flex-auto u-flex-80% u-flex-fill-@bp3">
<div class="o-grid | u-gap-sm">
<div class="o-grid__item | u-flex-auto u-flex-85% u-flex-fill-@bp3">
<label class="c-label | u-w-100%" for="field_list_2_2">
<span class="c-label__input">
<input class="c-input c-input--text" id="field_list_2_2" type="email" readonly value="craig.federighi@apple.com">
</span>
</label>
</div>
<div class="o-grid__item | u-w-2 u-removed-@bp2 is-spacer"></div>
<div class="o-grid__item | u-col-content">
<label class="c-label | u-w-100%" for="field_list_2_3">
<span class="c-label__input">
<select class="c-input c-input--select | u-w-content" id="field_list_2_3">
<option selected>Option 1</option>
<option>Option 2</option>
</select>
</span>
</label>
</div>
<div class="o-grid__item | u-col-content">
<button class="c-btn c-btn--tertiary" type="button">
<span class="u-hidden">Edit</span>
<svg class="c-icon | u-tc-info" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.241 2.991 1.125-1.125a1.25 1.25 0 0 1 1.768 1.768l-9.58 9.58a3 3 0 0 1-1.264.753L1.5 14.5l.533-1.79a3 3 0 0 1 .754-1.265l8.455-8.454h0Zm0 0L13 4.75"></path>
</svg>
</button>
</div>
</div>
</div>
</fieldset>
</li>
<!-- Repeat Field Groups as necessary -->
...
<!-- Limit -->
<li class="c-rule-container | o-grid__item | u-col-12">
<div class="c-rule__label">
<span class="u-sub-heading u-fs-xs">20/20 Limit Reached</span>
</div>
<hr class="c-rule c-rule--gradient">
</li>
</ul>
</div>
</div>
</div>
</div>