Text block list

Text block list
Striped text block list

HTML


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

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

      <h4 class="orc-c-text-block__kicker">Kicker</h4>

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

      <div class="orc-c-text-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
      </div>


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

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

      <h4 class="orc-c-text-block__kicker">Kicker</h4>

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

      <div class="orc-c-text-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
      </div>


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

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

      <h4 class="orc-c-text-block__kicker">Kicker</h4>

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

      <div class="orc-c-text-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
      </div>


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

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

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

HTML


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

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

      <h4 class="orc-c-text-block__kicker">Kicker</h4>

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

      <div class="orc-c-text-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
      </div>


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

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

      <h4 class="orc-c-text-block__kicker">Kicker</h4>

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

      <div class="orc-c-text-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
      </div>


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

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

      <h4 class="orc-c-text-block__kicker">Kicker</h4>

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

      <div class="orc-c-text-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
      </div>


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

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

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

When to use

Use to display quick bites of text. With a list of three text blocks, you can quickly summarize three aspects of an experience.

When to consider an alternative

A split text list allows for longer text, though the reading experience is vertical instead of left to right.

Class Name	Description
`orc-c-text-block-list` Required	Apply to the text block list’s containing `ul` tag. This will help format the list items inside this list.
`orc-c-text-block-list--striped` Modifier	Apply in addition to `orc-c-text-block-list` to give a striped appearance to the list items.
`orc-l-grid` Required	Apply in addition to the `orc-c-text-block-list` for the ability to layout the text 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-text-block-list__item` Required	Apply to each `li` tag within the `orc-c-text-block-list`. This allows
`orc-l-grid__item` Required	Apply in addition to the `orc-c-text-block-list__item` to allow the items to be formatted when used in a grid.
`orc-c-text-block` Required	Actual text block that is placed within each `orc-c-text-block-list__item`. See text block for more information about classes used in this component.

Text block list `orc-c-text-block-list`

Striped text block list `orc-c-text-block-list--striped`

Usage

When to use

When to consider an alternative