Media block list

Media block list

HTML


<ul class="orc-c-media-block-list orc-l-grid ">

  <li class="orc-c-media-block-list__item orc-l-grid__item">
    <div class="orc-c-media-block ">
      <div class="orc-c-media-block__media">

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


      </div>
      <!-- end orc-c-media-block__media -->

      <div class="orc-c-media-block__body">


        <h2 class="orc-c-media-block__heading">
          Heading ipsum dolor sit (39 characters)
        </h2>


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

      </div>
      <!-- end orc-c-media-block__body -->

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

  </li>
  <!-- end orc-c-media-block-list__item-->
  <li class="orc-c-media-block-list__item orc-l-grid__item">
    <div class="orc-c-media-block ">
      <div class="orc-c-media-block__media">

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


      </div>
      <!-- end orc-c-media-block__media -->

      <div class="orc-c-media-block__body">


        <h2 class="orc-c-media-block__heading">
          Heading ipsum dolor sit (39 characters)
        </h2>


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

      </div>
      <!-- end orc-c-media-block__body -->

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

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

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

When to use

It’s most often the case that you’ll use a media block list, instead of a single media block, to group related content.

When to consider an alternative

For calendar events, a date block list provides the same information and utility, but without an image.

Class Name	Description
`orc-c-media-block-list` Required	Apply to the hero block’s containing HTML element. This class sets up the background-image handling and text color for the unit. The `orc-c-hero` element should have just one immediate child, the `orc-c-hero__body` element. Note, too, that the unit’s hero image should be applied as a background image to this `orc-c-hero` element.
`orc-l-grid` Required	Apply in addition to the `orc-c-media-block-list` for the ability to layout the media block 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-media-block-list__item` Required	Apply to each `li` tag within the `orc-c-media-block-list`. This allows
`orc-l-grid__item` Required	Apply in addition to the `orc-c-media-block-list__item` to allow the items to be formatted when used in a grid.
`orc-c-media-block` Required	Actual media block that is placed within each `orc-c-media-block-list__item`. See media-block for more information about classes used in this component.

Media block list `orc-c-media-block-list`

Usage

When to use

When to consider an alternative