Tile list

Tile list

HTML


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

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

      <div class="orc-c-tile__media">

        <img class="orc-c-tile__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-tile-image.png" alt="" />



      </div>
      <!--end orc-c-tile__media-->

      <div class="orc-c-tile__body">

        <div class="orc-c-tile__excerpt orc-c-text-passage">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>


      </div>
      <!--end orc-c-tile__body-->

    </div>
    <!--end orc-c-tile-->

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

      <div class="orc-c-tile__media">

        <img class="orc-c-tile__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-tile-image.png" alt="" />



      </div>
      <!--end orc-c-tile__media-->

      <div class="orc-c-tile__body">

        <div class="orc-c-tile__excerpt orc-c-text-passage">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>


      </div>
      <!--end orc-c-tile__body-->

    </div>
    <!--end orc-c-tile-->

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

      <div class="orc-c-tile__media">

        <img class="orc-c-tile__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-tile-image.png" alt="" />



      </div>
      <!--end orc-c-tile__media-->

      <div class="orc-c-tile__body">

        <div class="orc-c-tile__excerpt orc-c-text-passage">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>


      </div>
      <!--end orc-c-tile__body-->

    </div>
    <!--end orc-c-tile-->

  </li>
  <!-- end orc-c-tile-list__item-->

</ul>
<!--end orc-c-tile-list-->

When to use

Use to visually promote different aspects of an experience, such as the four Identity tiers.

When to consider an alternative

A text block achieves the same effect but without an image.

Class Name	Description
`orc-c-tile-list` Required	Apply to the tile list’s containing `ul` tag. This will help format the list items within the list.
`orc-l-grid` Required	Apply in addition to the `orc-c-tile-list` for the ability to layout the tile list items in a grid format. Add `orc-l-grid--3up` in addition to this class to layout the items 3 across for example.
`orc-c-tile-list__item` Required	Apply to each `li` tag within the `orc-c-tile-list`. This allows
`orc-l-grid__item` Required	Apply in addition to the `orc-c-tile-list__item` to allow the items to be formatted when used in a grid.
`orc-c-tile` Required	Actual tile that is placed within each `orc-c-tile-list__item`. See tile for more information about classes used in this component.

Tile list `orc-c-tile-list l-grid--3up`

Usage

When to use

When to consider an alternative