Stripe list

Stripe list

HTML


<ul class="orc-c-stripe-list ">

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

      <h4 class="orc-c-stripe__title">Slots</h3>
        <span class="orc-c-stripe__meta">Oct. 15, 2017: </span>
        <span class="orc-c-stripe__meta">$252.00</span>

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

          <div class="orc-c-stripe__left-container">
            <div class="orc-c-stripe__text">
              <span class='orc-u-color-success'><strong>+200</strong></span> Identity Points ($2.00)
              <div class="orc-c-badge orc-c-badge--small">


                <span class="orc-c-badge__text">2x</span>

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

              <div class="orc-c-badge orc-c-badge--small">

                <svg class="orc-c-icon orc-c-badge__icon">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#search"></use>
	</svg>

                <span class="orc-c-badge__text"></span>

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

            </div>
          </div>
          <!--end orc-c-stripe__left-container-->

          <div class="orc-c-stripe__right-container">
            <div class="orc-c-stripe__text">
              15,094 Identity Points
            </div>
          </div>
          <!--end orc-c-stripe__right-container-->

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


        <div class="orc-c-stripe__note">100 tier points earned toward your status</div>

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

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

      <h4 class="orc-c-stripe__title">Identity Play</h3>
        <span class="orc-c-stripe__meta">Oct. 14, 2017: </span>
        <span class="orc-c-stripe__meta"> Redeemed $25.00 in slots</span>

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

          <div class="orc-c-stripe__left-container">
            <div class="orc-c-stripe__text">
              <strong>-2,500</strong> Identity Points
              <div class="orc-c-badge orc-c-badge--small">

                <svg class="orc-c-icon orc-c-badge__icon">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#search"></use>
	</svg>

                <span class="orc-c-badge__text"></span>

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

            </div>
          </div>
          <!--end orc-c-stripe__left-container-->

          <div class="orc-c-stripe__right-container">
            <div class="orc-c-stripe__text">
              14,894 Identity Points
            </div>
          </div>
          <!--end orc-c-stripe__right-container-->

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



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

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

      <h4 class="orc-c-stripe__title">Jaleo</h3>
        <span class="orc-c-stripe__meta">Oct. 13, 2017: </span>
        <span class="orc-c-stripe__meta">$722.04</span>

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

          <div class="orc-c-stripe__left-container">
            <div class="orc-c-stripe__text">
              <span class='orc-u-color-success'><strong>+3,610</strong></span> Identity Points ($36.10)
            </div>
          </div>
          <!--end orc-c-stripe__left-container-->

          <div class="orc-c-stripe__right-container">
            <div class="orc-c-stripe__text">
              15,294 Identity Points
            </div>
          </div>
          <!--end orc-c-stripe__right-container-->

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


        <div class="orc-c-stripe__note">3610 tier points earned toward your status</div>

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

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

      <h4 class="orc-c-stripe__title">Va Bene</h3>
        <span class="orc-c-stripe__meta">Oct. 13, 2017 </span>

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

          <div class="orc-c-stripe__left-container">
            <div class="orc-c-stripe__text">
              <span><strong>-1,200</strong></span> Identity Points
            </div>
          </div>
          <!--end orc-c-stripe__left-container-->

          <div class="orc-c-stripe__right-container">
            <div class="orc-c-stripe__text">
              11,684 Identity Points
            </div>
          </div>
          <!--end orc-c-stripe__right-container-->

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



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

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

      <h4 class="orc-c-stripe__title">Clique</h3>
        <span class="orc-c-stripe__meta">Oct. 12, 2017: </span>
        <span class="orc-c-stripe__meta">Redeemed for $76.00 credit</span>

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

          <div class="orc-c-stripe__left-container">
            <div class="orc-c-stripe__text">
              <span><strong>-7,600</strong></span> Identity Points
            </div>
          </div>
          <!--end orc-c-stripe__left-container-->

          <div class="orc-c-stripe__right-container">
            <div class="orc-c-stripe__text">
              12,884 Identity Points
            </div>
          </div>
          <!--end orc-c-stripe__right-container-->

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



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

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

      <h4 class="orc-c-stripe__title">Chandelier Bar</h3>
        <span class="orc-c-stripe__meta">Oct. 11, 2017: </span>
        <span class="orc-c-stripe__meta">$127.00</span>

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

          <div class="orc-c-stripe__left-container">
            <div class="orc-c-stripe__text">
              <span class='orc-u-color-success'><strong>+635</strong></span> Identity Points ($6.35)
            </div>
          </div>
          <!--end orc-c-stripe__left-container-->

          <div class="orc-c-stripe__right-container">
            <div class="orc-c-stripe__text">
              20,484 Identity Points
            </div>
          </div>
          <!--end orc-c-stripe__right-container-->

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


        <div class="orc-c-stripe__note">635 tier points earned toward your status</div>

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

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

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

When to use

Stripes should often come in a pack, detailing actions or current balances by day or transaction.

When to consider an alternative

Stripes are best for account activity. For attraction details, consider a list list.

Class Name	Description
`orc-c-stripe-list` Required	Apply to the stripe list’s outer `ul` tag. This will help format the list items inside.
`orc-c-stripe-list__item` Required	Apply to the `li` tags within the stripe list. Each list item will contain a stripe component.
`orc-l-grid__item`	Apply in addition to the `orc-c-stripe-list__item` if the user wants to display stripe list in a grid format.
`orc-c-stripe`	Actual stripe component that is placed within each `orc-c-stripe-list__item`. See stripe for more information about classes used in this component.

Stripe list `orc-c-stripe-list`

Usage

When to use

When to consider an alternative