Split text list

Split text list
Lined split text list

HTML


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

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

      <h3 class="orc-c-split-text__heading">Split Text Heading</h3>
      <div class="orc-c-split-text__body 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-split-text-->

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

      <h3 class="orc-c-split-text__heading">Split Text Heading</h3>
      <div class="orc-c-split-text__body 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-split-text-->

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

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

HTML


<ul class="orc-c-split-text-list orc-c-split-text-list--lined">

  <li class="orc-c-split-text-list__item orc-l-grid__item">
    <div class="orc-c-split-text orc-c-split-text-list--lined">

      <h3 class="orc-c-split-text__heading">Split Text Heading</h3>
      <div class="orc-c-split-text__body 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-split-text-->

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

      <h3 class="orc-c-split-text__heading">Split Text Heading</h3>
      <div class="orc-c-split-text__body 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-split-text-->

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

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

When to use

Use this to break long-form content into chunks, broken out by headers and correlating text.

When to consider an alternative

A text block is a good alternative for shorter text, and makes the content a horizontal experience rather than a vertical one.

Class Name	Description
`orc-c-split-text-list` Required	Apply to the split text list’s containing `ul` tag. This will contain list items of the split text component.
`orc-c-split-text-list--lined` Modifier	Apply in addition to the `orc-c-split-text-list` class to add bottom borders to each split text list item.
`orc-c-split-text` Required	Actual split text component that is placed within each `orc-c-split-text-list__item`. See split text for more information about classes used in this component.

Split text list `orc-c-split-text-list`

Lined split text list `orc-c-split-text-list--lined`

Usage

When to use

When to consider an alternative