Settings page

A page where a manager configures the app.

One card per group of settings, one primary Save at the bottom. Show a success alert at the top after saving. If your app uses COHO light config instead, COHO draws this form for you.

LightDark

Example

Reminder settings

When to send

Days before due date

Send by

Email SMS

CancelSave settings

HTML

Copy

<header class="at-header"><h1 class="at-header__title">Reminder settings</h1></header>
<form class="at-stack">
  <div class="at-card at-stack">
    <h2 class="at-card__title">When to send</h2>
    <div class="at-field"><label class="at-label" for="days">Days before due date</label><input class="at-input" id="days" type="number" value="3" /></div>
    <fieldset class="at-fieldset"><legend>Send by</legend><label class="at-choice"><input type="checkbox" checked /> Email</label><label class="at-choice"><input type="checkbox" /> SMS</label></fieldset>
  </div>
  <div class="at-inline at-inline--end"><button type="button" class="at-button">Cancel</button><button type="submit" class="at-button at-button--primary">Save settings</button></div>
</form>