Royal Canin Logo

Working together for the ultimate brand experience

Royal Canin Design Language

Checklist

A checklist can be used as an interactive tool for users to mark off items as completed. It should be used for listed content, and we recommend including both a heading and body copy to support each item. Upon clicking the heading or the check box, the text will strike through and a check mark appear to indicate it’s been done. This component also uses internal browser storage. If you leave the page, once you return, the component will remember which items you have checked.

Usage

For heading only lists, we’d recommend using a small container. For heading and body copy, we’d recommend using a medium container and the body copy to be no longer than 200 characters.

Checklist

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non varius urna. Fusce efficitur urna sem, sed cursus nulla rhoncus in. Vivamus enim lacus, consequat a placerat id, commodo et sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non varius urna. Fusce efficitur urna sem, sed cursus nulla rhoncus in. Vivamus enim lacus, consequat a placerat id, commodo et sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non varius urna. Fusce efficitur urna sem, sed cursus nulla rhoncus in. Vivamus enim lacus, consequat a placerat id, commodo et sapien.

<form class="rc-checklist" data-rc-checklist="">
  <h2 class="rc-beta rc-margin-bottom--xl rc-margin-bottom--sm--desktop">Checklist</h2>
  <div class="rc-checklist-row rc-margin-bottom--xl rc-margin-bottom--md--desktop">
    <label class="rc-checklist-row__label">
      <input type="checkbox" class="rc-checklist-row__input form-checkbox" />
      <span class="rc-checklist-row__title-container">
        <span class="rc-checklist-row__title rc-delta">Wake up in the morning</span>
      </span>
    </label>
    <p class="rc-checklist-row__subtitle rc-body rc-margin-top--xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non varius urna. Fusce efficitur urna sem, sed cursus nulla rhoncus in. Vivamus enim lacus, consequat a placerat id, commodo et sapien.</p>
  </div>
  <div class="rc-checklist-row rc-margin-bottom--xl rc-margin-bottom--md--desktop">
    <label class="rc-checklist-row__label">
      <input type="checkbox" class="rc-checklist-row__input form-checkbox" />
      <span class="rc-checklist-row__title-container">
        <span class="rc-checklist-row__title rc-delta">Wake up in the morning 2</span>
      </span>
    </label>
    <p class="rc-checklist-row__subtitle rc-body rc-margin-top--xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non varius urna. Fusce efficitur urna sem, sed cursus nulla rhoncus in. Vivamus enim lacus, consequat a placerat id, commodo et sapien.</p>
  </div>
  <div class="rc-checklist-row rc-margin-bottom--xl rc-margin-bottom--md--desktop">
    <label class="rc-checklist-row__label">
      <input type="checkbox" class="rc-checklist-row__input form-checkbox" />
      <span class="rc-checklist-row__title-container">
        <span class="rc-checklist-row__title rc-delta">Wake up in the morning 3</span>
      </span>
    </label>
    <p class="rc-checklist-row__subtitle rc-body rc-margin-top--xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non varius urna. Fusce efficitur urna sem, sed cursus nulla rhoncus in. Vivamus enim lacus, consequat a placerat id, commodo et sapien.</p>
  </div>
</form>

Copied!