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 u-bg-body" 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="o-nav | c-nav--mylisters | u-stick u-stick--bottom u-layer-1">
<div class="c-card c-card--shadow | o-navbar__wrapper | u-p-sm u-flex">
<div class="o-navbar__left">
<p class="u-fs-sm u-tc-negative">
<svg class="c-icon | u-mr-xs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<svg class="c-icon | u-mr-xs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-width="1.5" d="M7.993 15a7 7 0 1 1 .014-14 7 7 0 0 1-.014 14Z"/>
<path fill-rule="nonzero" d="M8 12a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0-3a1 1 0 0 1-1-1V5a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1Z"/>
</svg>
</svg>
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">
<div class="c-card" :class="dirty ? 'is-changed' : ''">
<div class="c-card__body | u-p">
<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="dirty_label">
<span class="c-label__text">Change this input</span>
</label>
</div>
<div class="o-grid__item">
<span class="c-label__input">
<input class="c-input c-input--text" id="dirty_label" type="text" x-model.debounce.250ms="dirty">
</span>
<span class="c-note">When the input changes, log the state change and indicate to users that there are unsaved changes.</span>
</div>
</fieldset>
</div>
</div>
</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-tc-negative">
<svg class="c-icon | u-mr-xs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-width="1.5" d="M7.993 15a7 7 0 1 1 .014-14 7 7 0 0 1-.014 14Z"/>
<path fill-rule="nonzero" d="M8 12a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0-3a1 1 0 0 1-1-1V5a1 1 0 1 1 2 0v3a1 1 0 0 1-1 1Z"/>
</svg>
Unsaved changes: <span>Emails</span>
</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>Note: This example uses Alpine.js to add transition utilities to animate the menu in and out of view.
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 parent which segments children content or groups of fields together.
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 that can be used alone or alongside 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 Negative note usually displayed after an error or fault has occurred.
Heading Informative note usually displayed to highlight defaults or available options.
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__item o-flow-sm | u-col-12">
<span class="u-sub-heading">Heading</span>
<span class="c-note c-note--error">Positive note usually displayed after a successful action.</span>
</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--info">Informative note usually displayed to highlight defaults or available options.</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-flex u-self-center u-m-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 c-label--radio | u-mr-0" for="field_phone_1">
<input class="c-input c-input--radio | u-flex u-self-center u-m-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 | u-flex u-self-center u-m-0" 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>