Split block list

Split block list

HTML


<ul class="orc-c-split-block-list ">

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

      <h3 class="orc-c-split-block__title">Heading ipsum dolor sit (39 characters)</h3>

      <div class="orc-c-split-block__inner">

        <div class="orc-c-split-block__left">
          <span class="orc-c-split-block__number">20</span>
          <span class="orc-c-split-block__label">Label</span>
        </div>

        <div class="orc-c-divider orc-c-divider--vertical">
          <div class="orc-c-divider__text">Label</div>
        </div>
        <!--end orc-c-divider-->


        <div class="orc-c-split-block__right">
          <span class="orc-c-split-block__number">5</span>
          <span class="orc-c-split-block__label">Label</span>
        </div>

      </div>
      <!--end orc-c-split-block__inner-->


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

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

      <h3 class="orc-c-split-block__title">Heading ipsum dolor sit (39 characters)</h3>

      <div class="orc-c-split-block__inner">

        <div class="orc-c-split-block__left">
          <span class="orc-c-split-block__number">20</span>
          <span class="orc-c-split-block__label">Label</span>
        </div>

        <div class="orc-c-divider orc-c-divider--vertical">
          <div class="orc-c-divider__text">Label</div>
        </div>
        <!--end orc-c-divider-->


        <div class="orc-c-split-block__right">
          <span class="orc-c-split-block__number">5</span>
          <span class="orc-c-split-block__label">Label</span>
        </div>

      </div>
      <!--end orc-c-split-block__inner-->


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

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

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

When to use

This could be handy when detailing the attributes of a tier or offer.

When to consider an alternative

Consider only displaying one split block at a time for maxium effect.

Class Name	Description
`orc-c-split-block-list` Required	Apply to the hero block’s containing `ul` tag. This helps to format the `orc-c-split-block` component within each split block list item.
`orc-c-split-block-list__item` Required	Apply to `li` within the `orc-c-split-block-list` to represent the split block list item.
`orc-c-split-block` Required	Actual split block that is placed within each `orc-c-split-block-list__item`. See the split block for more information about classes used in this component.

Split block list `orc-c-split-block-list`

Usage

When to use

When to consider an alternative