Avatar block list

Avatar block list

HTML


<ul class="orc-c-avatar-block-list orc-l-grid--3up">

  <li class="orc-c-avatar-block-list__item orc-l-grid__item">
    <div class="orc-c-avatar-block orc-l-grid--3up">

      <div class="orc-c-avatar-block__header">

        <img class="orc-c-avatar-block__img orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-600x600.png" alt="" />

        <p class="orc-c-avatar-block__meta">Your Host</p>

        <h3 class="orc-c-avatar-block__title">
          Desiree Mullen
        </h3>
        <p class="orc-c-avatar-block__position">Casino executive</p>

      </div>
      <!--end orc-c-avatar-block__header-->

      <div class="orc-c-avatar-block__body">
        <p class="orc-c-avatar-block__excerpt">How can I make your stay sensational? Get in touch.</p>

        <a href="tel:555:555-1212" class="orc-c-avatar-block__phone tel">555-555-1212</a>

        <a href="mailto:d.mullen@cosmopolitanlasvegas.com" class="orc-c-avatar-block__email email">d.mullen@cosmopolitanlasvegas.com</a>
      </div>
      <!--end orc-c-avatar-block__body-->

    </div>
    <!--end orc-c-avatar-block-->

  </li>
  <!--end orc-c-avatar-block-list__item-->
  <li class="orc-c-avatar-block-list__item orc-l-grid__item">
    <div class="orc-c-avatar-block orc-l-grid--3up">

      <div class="orc-c-avatar-block__header">

        <img class="orc-c-avatar-block__img orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-600x600.png" alt="" />

        <p class="orc-c-avatar-block__meta">Your Host</p>

        <h3 class="orc-c-avatar-block__title">
          Desiree Mullen
        </h3>
        <p class="orc-c-avatar-block__position">Casino executive</p>

      </div>
      <!--end orc-c-avatar-block__header-->

      <div class="orc-c-avatar-block__body">
        <p class="orc-c-avatar-block__excerpt">How can I make your stay sensational? Get in touch.</p>

        <a href="tel:555:555-1212" class="orc-c-avatar-block__phone tel">555-555-1212</a>

        <a href="mailto:d.mullen@cosmopolitanlasvegas.com" class="orc-c-avatar-block__email email">d.mullen@cosmopolitanlasvegas.com</a>
      </div>
      <!--end orc-c-avatar-block__body-->

    </div>
    <!--end orc-c-avatar-block-->

  </li>
  <!--end orc-c-avatar-block-list__item-->
  <li class="orc-c-avatar-block-list__item orc-l-grid__item">
    <div class="orc-c-avatar-block orc-l-grid--3up">

      <div class="orc-c-avatar-block__header">

        <img class="orc-c-avatar-block__img orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-600x600.png" alt="" />

        <p class="orc-c-avatar-block__meta">Your Host</p>

        <h3 class="orc-c-avatar-block__title">
          Desiree Mullen
        </h3>
        <p class="orc-c-avatar-block__position">Casino executive</p>

      </div>
      <!--end orc-c-avatar-block__header-->

      <div class="orc-c-avatar-block__body">
        <p class="orc-c-avatar-block__excerpt">How can I make your stay sensational? Get in touch.</p>

        <a href="tel:555:555-1212" class="orc-c-avatar-block__phone tel">555-555-1212</a>

        <a href="mailto:d.mullen@cosmopolitanlasvegas.com" class="orc-c-avatar-block__email email">d.mullen@cosmopolitanlasvegas.com</a>
      </div>
      <!--end orc-c-avatar-block__body-->

    </div>
    <!--end orc-c-avatar-block-->

  </li>
  <!--end orc-c-avatar-block-list__item-->

</ul>
<!--end orc-c-avatar-block-list-->

When to use

When there are multiple members of a team or points of contact.

When to consider an alternative

If there is a single point of contact, use an indiviudal avatar block instead.

Class Name	Description
`orc-c-avatar-block-list` Required	Apply to the avatar block list’s containing HTML element. Use with a layout grid class to layout the list items in various formats (i.e. 2up, 3up, etc.).
`orc-l-grid` Required	Apply in addition to `orc-c-avatar-block-list` to layout avatar block list items in a grid format. Apply `orc-l-grid--3up` in addition to this to layout items 3 across and wrap on large screens for example.
`orc-c-avatar-block-list__item` Required	Apply to each avatar block list item.
`orc-l-grid__item` Required	Apply in addition to `orc-c-avatar-block-list__item` to help layout these in a grid format. This way `orc-l-grid` can target the `orc-l-grid__item` and format these accordingly.
`orc-c-avatar-block` Required	Applied to the container of the actual avatar block. See the avatar block for more information about classes used in this component.

Avatar block list `orc-c-avatar-block-list orc-l-grid--3up`

Usage

When to use

When to consider an alternative