Notifications

A notification settings card puts users in control of what interrupts them. Each row pairs a switch with a label and a short description, so options explain themselves, from email digests to push alerts and mentions. Settings and preference pages in almost every app group their toggles exactly like this.

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Notifications</h3>
    <p class="card-description">Choose how you want to be notified.</p>
  </div>
  <div class="card-content field-group gap-5">
    <div class="field field-horizontal">
      <div class="field-content">
        <label class="label" for="notif-email">Email notifications</label>
        <p class="field-description">Receive updates and alerts via email.</p>
      </div>
      <input
        type="checkbox"
        role="switch"
        class="switch"
        id="notif-email"
        name="notif-email"
        checked=""
      />
    </div>
    <div class="field field-horizontal">
      <div class="field-content">
        <label class="label" for="notif-push">Push notifications</label>
        <p class="field-description">
          Get instant alerts on your mobile device.
        </p>
      </div>
      <input
        type="checkbox"
        role="switch"
        class="switch"
        id="notif-push"
        name="notif-push"
      />
    </div>
    <div class="field field-horizontal">
      <div class="field-content">
        <label class="label" for="notif-marketing">Marketing emails</label>
        <p class="field-description">
          Stay informed about new features and offers.
        </p>
      </div>
      <input
        type="checkbox"
        role="switch"
        class="switch"
        id="notif-marketing"
        name="notif-marketing"
      />
    </div>
  </div>
  <div class="card-footer">
    <button class="btn w-full">Save preferences</button>
  </div>
</div>

Browse more card examples.