Icon List

Icon lists allow for a richer formatting for bulleted lists of things including checkbox lists, feature lists, and more!


React Component

Basic example

  • Lorem ipsum dolor sit amet

    Consectetur adipiscing elit. Donec imperdiet commodo libero, at faucibus justo sollicitudin venenatis. Nulla mattis tellus quis lectus tristique, sit amet dapibus sem placerat.

  • Lorem ipsum dolor sit amet

    Consectetur adipiscing elit. Donec imperdiet commodo libero, at faucibus justo sollicitudin venenatis. Nulla mattis tellus quis lectus tristique, sit amet dapibus sem placerat.

  • Lorem ipsum dolor sit amet

    Consectetur adipiscing elit. Donec imperdiet commodo libero, at faucibus justo sollicitudin venenatis. Nulla mattis tellus quis lectus tristique, sit amet dapibus sem placerat.

Checkbox list

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus aliquam suspendisse pretium diam posuere phasellus sit sed. Consectetur at convallis dis senectus euismod cursus orci, amet quis.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus aliquam suspendisse pretium diam posuere phasellus sit sed. Consectetur at convallis dis senectus euismod cursus orci, amet quis.
  • By checking this box you certify that you have gathered proper permissions to send marketing emails to every email address in this file.

Radio list

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus aliquam suspendisse pretium diam posuere phasellus sit sed. Consectetur at convallis dis senectus euismod cursus orci, amet quis.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tempus aliquam suspendisse pretium diam posuere phasellus sit sed. Consectetur at convallis dis senectus euismod cursus orci, amet quis.

  • By checking this box you certify that you have gathered proper permissions to send marketing emails to every email address in this file.

Sage Component

SageIconList
<h3 class="t-sage-heading-6">Basic example</h3>
<%= sage_component SageIconList, {
  items: [
    {
      bullet: %(
        <i class="sage-icon-circle-1 t-sage--color-charcoal-300"></i>
      ),
      body: %(
        <h4 class="sage-icon-list-item__title">Lorem ipsum dolor sit amet</h4>
        <p>Consectetur adipiscing elit. Donec imperdiet commodo libero, at faucibus justo sollicitudin venenatis. Nulla mattis tellus quis lectus tristique, sit amet dapibus sem placerat.</p>
      )
    },
    {
      bullet: %(
        <i class="sage-icon-circle-2 t-sage--color-charcoal-300"></i>
      ),
      body: %(
        <h4 class="sage-icon-list-item__title">Lorem ipsum dolor sit amet</h4>
        <p>Consectetur adipiscing elit. Donec imperdiet commodo libero, at faucibus justo sollicitudin venenatis. Nulla mattis tellus quis lectus tristique, sit amet dapibus sem placerat.</p>
      )
    },
    {
      bullet: %(
        <i class="sage-icon-circle-3 t-sage--color-charcoal-300"></i>
      ),
      body: %(
        <h4 class="sage-icon-list-item__title">Lorem ipsum dolor sit amet</h4>
        <p>Consectetur adipiscing elit. Donec imperdiet commodo libero, at faucibus justo sollicitudin venenatis. Nulla mattis tellus quis lectus tristique, sit amet dapibus sem placerat.</p>
      )
    }
  ]
} %>
<h3 class="t-sage-heading-6">Checkbox list</h3>
<%= sage_component SageIconList, {
  items: [
    {
      bullet: %(
        <input id="c1" type="checkbox" class="sage-checkbox sage-checkbox--standalone" />
      ),
      bullet_type: "checkbox",
      body: %(
        <label for="c1" class="sage-icon-list-item__label">Grant an offer</label>
        <div class="sage-icon-list-item__label-subtext">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Tempus aliquam suspendisse pretium diam posuere phasellus
          sit sed. Consectetur at convallis dis senectus euismod cursus
          orci, amet quis.
        </div>
      )
    },
    {
      bullet: %(
        <input id="c2" type="checkbox" class="sage-checkbox sage-checkbox--standalone" />
      ),
      bullet_type: "checkbox",
      body: %(
        <label for="c2" class="sage-icon-list-item__label">Add tags</label>
        <div class="sage-icon-list-item__label-subtext">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Tempus aliquam suspendisse pretium diam posuere phasellus
          sit sed. Consectetur at convallis dis senectus euismod cursus
          orci, amet quis.
        </div>
      )
    },
    {
      bullet: %(
        <input id="c3" type="checkbox" class="sage-checkbox sage-checkbox--standalone" />
      ),
      bullet_type: "checkbox",
      body: %(
        <label for="c3" class="sage-icon-list-item__label">Subscribe to marketing emails</label>
        <div class="sage-icon-list-item__label-subtext">
          By checking this box you certify that you have gathered proper
          permissions to send marketing emails to every email address in
          this file.
        </div>
      )
    }
  ]
} %>
<h3 class="t-sage-heading-6">Radio list</h3>
<%= sage_component SageIconList, {
  items: [
    {
      bullet: %(
        <input id="r1" type="radio" name="radio-group" class="sage-radio sage-radio--standalone" />
      ),
      bullet_type: "radio",
      body: %(
        <label for="r1" class="sage-icon-list-item__label">Grant an offer</label>
        <p class="sage-icon-list-item__label-subtext">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Tempus aliquam suspendisse pretium diam posuere phasellus
          sit sed. Consectetur at convallis dis senectus euismod cursus
          orci, amet quis.
        </p>
      )
    },
    {
      bullet: %(
        <input id="r2" type="radio" name="radio-group" class="sage-radio sage-radio--standalone" />
      ),
      bullet_type: "radio",
      body: %(
        <label for="r2" class="sage-icon-list-item__label">Add tags</label>
        <p class="sage-icon-list-item__label-subtext">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Tempus aliquam suspendisse pretium diam posuere phasellus
          sit sed. Consectetur at convallis dis senectus euismod cursus
          orci, amet quis.
        </p>
      )
    },
    {
      bullet: %(
        <input id="r3" type="radio" name="radio-group" class="sage-radio sage-radio--standalone" />
      ),
      bullet_type: "radio",
      body: %(
        <label for="r3" class="sage-icon-list-item__label">Subscribe to marketing emails</label>
        <p class="sage-icon-list-item__label-subtext">
          By checking this box you certify that you have gathered proper
          permissions to send marketing emails to every email address in
          this file.
        </p>
      )
    }
  ]
} %>
Property Description Type Default

items

required

An array of items to create a an icon list.

      Array<{
        bullet: String,
        bullet_type: String,
        body: String
      }>

nil