Menus inherit a lot of styles from Cards but are primarily designed as dropdown replacements rather than page segments.

Single Selection

  • Menu 1
  • Menu 2
  • Divider
  • Menu 3
  • Menu 4
  • Menu item disabled
  • Menu item active
  • Menu 5
  • Menu 6
  • Menu 7
  • Menu 8
  • Menu 9
  • Menu 10
<ul class="c-card c-card--menu u-high">
  <li class="c-card__item">Menu 1</li>
  <li class="c-card__item">Menu 2</li>
  <li class="c-card__item c-card__item--divider">Divider</li>
  <li class="c-card__item">Menu 3</li>
  <li class="c-card__item">Menu 4</li>
  <li class="c-card__item c-card__item--disabled">Menu item disabled</li>
  <li class="c-card__item c-card__item--active">Menu item active</li>
  <li class="c-card__item">Menu 5</li>
  <li class="c-card__item">Menu 6</li>
  <li class="c-card__item">Menu 7</li>
  <li class="c-card__item">Menu 8</li>
  <li class="c-card__item">Menu 9</li>
  <li class="c-card__item">Menu 10</li>
</ul> 

Grouped Items

  • Menu 1
  • Menu 2
  • Menu 3
  • Menu 4
  • Menu item disabled
  • Menu item active
  • Menu 5
  • Menu 6
  • Menu 7
  • Menu 8
  • Menu 9
  • Menu 10
<ul class="c-card c-card--menu u-high c-card--grouped">
  <li class="c-card__item">Menu 1</li>
  <li class="c-card__item">Menu 2</li>
  <li class="c-card__item">Menu 3</li>
  <li class="c-card__item">Menu 4</li>
  <li class="c-card__divider"></li>
  <li class="c-card__item c-card__item--disabled">Menu item disabled</li>
  <li class="c-card__item c-card__item--active">Menu item active</li>
  <li class="c-card__divider"></li>
  <li class="c-card__item">Menu 5</li>
  <li class="c-card__item">Menu 6</li>
  <li class="c-card__item">Menu 7</li>
  <li class="c-card__divider"></li>
  <li class="c-card__item">Menu 8</li>
  <li class="c-card__divider"></li>
  <li class="c-card__item">Menu 9</li>
  <li class="c-card__item">Menu 10</li>
</ul> 

Colored Items

  • Menu 1
  • Menu 2
  • Divider
  • Menu 3
  • Menu 4
  • Menu item disabled
  • Menu item active
  • Menu 5
  • Menu 6
  • Menu 7
  • Menu 8
  • Menu 9
  • Menu 10
<ul class="c-card c-card--menu">
  <li class="c-card__item c-card__item--brand">Menu 1</li>
  <li class="c-card__item c-card__item--brand">Menu 2</li>
  <li class="c-card__item c-card__item--divider">Divider</li>
  <li class="c-card__item c-card__item--brand">Menu 3</li>
  <li class="c-card__item c-card__item--brand">Menu 4</li>
  <li class="c-card__item c-card__item--brand c-card__item--disabled">Menu item disabled</li>
  <li class="c-card__item c-card__item--brand c-card__item--active">Menu item active</li>
  <li class="c-card__item c-card__item--brand">Menu 5</li>
  <li class="c-card__item c-card__item--brand">Menu 6</li>
  <li class="c-card__item c-card__item--brand">Menu 7</li>
  <li class="c-card__item c-card__item--brand">Menu 8</li>
  <li class="c-card__item c-card__item--brand">Menu 9</li>
  <li class="c-card__item c-card__item--brand">Menu 10</li>
</ul> 

Combo

Divider
<div class="c-card c-card--menu u-high">
  <label class="c-card__item c-field c-field--choice">
    <input type="checkbox"> Item 1
  </label>
  <label class="c-card__item c-field c-field--choice">
    <input type="checkbox"> Item 2
  </label>
  <div class="c-card__item c-card__item--divider">Divider</div>
  <label class="c-card__item c-field c-field--choice">
    <input type="checkbox"> Item 3
  </label>
  <label class="c-card__item c-field c-field--choice">
    <input type="checkbox"> Item 4
  </label>
</div>