Primary list item

Lists are one of the main ways we display content in our digital products. We have a number of variations that include icons, images and buttons.

  • H5/DarkBlue: List title here
    TinyText/Grey: Metadata

    SmallText/DarkGrey: Description text mauris id gravida risus, aliquet semper massa. Fusce molestie quam et commodo imperdiet. Sed sed gravida odio.

    Inline link
<ul class="inm-list ">
  <li class="inm-list__item inm-list-item">
    <div class="inm-list-item__image-wrapper">
      <img src="/assets/d198774a078da73180a51e3fcf96923f.png" alt="" class="inm-list-item__image" />
    </div>
    <div class="inm-list-item__content">
      <h5 class="inm-list-item__title">H5/DarkBlue: List title here </h5>
      <div class="inm-list-item__meta">TinyText/Grey: Metadata </div>
      <p class="inm-list-item__copy">SmallText/DarkGrey: Description text mauris id gravida risus, aliquet semper massa. Fusce molestie quam et commodo imperdiet. Sed sed gravida odio.</p>
      <a href="#" class="inm-link inm-list-item__cta">Inline link</a>
    </div>
  </li>
</ul>
Variations
  • Item title
    Tinytext grey metadata

    Cillum amet ipsum tempor laboris reprehenderit elit cillum nostrud veniam tempor excepteur excepteur consequat ullamco. Laboris sit ipsum culpa anim amet.

  • Item title
    Tinytext grey metadata

    Cillum amet ipsum tempor laboris reprehenderit elit cillum nostrud veniam tempor excepteur excepteur consequat ullamco. Laboris sit ipsum culpa anim amet.

    Inline linkAnother link
  • Item title
    Tinytext grey metadata

    Cillum amet ipsum tempor laboris reprehenderit elit cillum nostrud veniam tempor excepteur excepteur consequat ullamco. Laboris sit ipsum culpa anim amet.

    Link with chevron
<ul class="inm-list ">
  <li class="inm-list__item inm-list-item">
    <div class="inm-list-item__image-wrapper">
      <img src="/assets/7174068092090e8f9d907f4c94463c07.svg" alt="" class="inm-list-item__image" />
    </div>
    <div class="inm-list-item__content">
      <h5 class="inm-list-item__title">Item title</h5>
      <div class="inm-list-item__meta">Tinytext grey metadata</div>
      <p class="inm-list-item__copy">Cillum amet ipsum tempor laboris reprehenderit elit cillum nostrud veniam tempor excepteur excepteur consequat ullamco. Laboris sit ipsum culpa anim amet.</p>
      <button type="button" class="inm-button inm-list-item__cta inm-button--small">Primary Button</button>
    </div>
  </li>
  <li class="inm-list__item inm-list-item">
    <div class="inm-list-item__image-wrapper">
      <img src="/assets/7174068092090e8f9d907f4c94463c07.svg" alt="" class="inm-list-item__image" />
    </div>
    <div class="inm-list-item__content">
      <h5 class="inm-list-item__title">Item title</h5>
      <div class="inm-list-item__meta">Tinytext grey metadata</div>
      <p class="inm-list-item__copy">Cillum amet ipsum tempor laboris reprehenderit elit cillum nostrud veniam tempor excepteur excepteur consequat ullamco. Laboris sit ipsum culpa anim amet.</p>
      <a href="#" class="inm-link inm-list-item__cta">Inline link</a>
      <a href="#" class="inm-link inm-list-item__cta">Another link</a>
    </div>
  </li>
  <li class="inm-list__item inm-list-item">
    <div class="inm-list-item__image-wrapper">
      <img src="/assets/7174068092090e8f9d907f4c94463c07.svg" alt="" class="inm-list-item__image" />
    </div>
    <div class="inm-list-item__content">
      <h5 class="inm-list-item__title">Item title</h5>
      <div class="inm-list-item__meta">Tinytext grey metadata</div>
      <p class="inm-list-item__copy">Cillum amet ipsum tempor laboris reprehenderit elit cillum nostrud veniam tempor excepteur excepteur consequat ullamco. Laboris sit ipsum culpa anim amet.</p>
      <a href="#" class="inm-link inm-link--chevron inm-list-item__cta">Link with chevron</a>
    </div>
  </li>
</ul>
Style and spacing
Field corners
4px radius
Rollover style
Drop shadow, 7px blur, 15% opacity
Desktop
4px radius
Mobile
4px radius