Show more

HTML


<div class="orc-c-show-more">

  <div class="orc-c-show-more__header">

    <div class="orc-l-container">
      <h3 class="orc-c-show-more__title">Pending Points</h3>
      <span class="orc-c-show-more__status"><span class='orc-u-color-success'>+4,680 Identity Points</span></span>
      <p class="orc-c-show-more__description"> Points for items charged to your room will be added once we’ve received checkout payment.</p>
    </div>

  </div>
  <!--end orc-c-show-more__header-->

  <div class=" orc-c-show-more__extension orc-l-container">
    <ul class="orc-c-stripe-list orc-u-margin-bottom-large">

      <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 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-->
      <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 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-->
      <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 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-->
      <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-->

  </div>
  <!--end orc-c-show-more__extension-->

  <button class="orc-c-btn orc-c-btn--bare orc-u-display-block orc-u-margin-center orc-js-show-more-btn">

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


            <span class="orc-c-btn__text orc-js-btn-text">More more more</span>

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



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

</button>
  <!-- end orc-c-btn -->


</div>
<!--end orc-c-show-more-->

When to use

This is best for hiding administrative content or fine print that users don’t necessarily want to read, while giving them the option to.

When to consider an alternative

Tabs are similar in function to accordions, though accordions are likely better for longer content.

Class Name	Description
`orc-c-show-more` Required	Apply to the show more containing HTML element. This class sets up the basic layout of the show more component.
`orc-c-show-more__header` Required	Added to `div` within `orc-c-show-more` component to act as a container for the title, status, and description of the component.
`orc-l-container` Required	Added to `div` within `orc-c-show-more__header` to help cap the width of content within the show more component on larger screens.
`orc-c-show-more__title`	Added to `h3` as a heading for the show more component.
`orc-c-show-more__status`	Added to a `span` to represent a short excerpt of additonal text for the user.
`orc-c-show-more__description`	Added to a `p` tag to represent a short description of the content within the show more component.
`orc-c-show-more__extension.` Required	Added to container of content that is hidden by default until the button is selected to expand the content.
`orc-c-stripe-list`	Added to the unordered list of stripes. See the stripe list for more information about classes used in this component.
`orc-c-stripe-list`	Added to the unordered list of stripes that is hidden by default within `orc-c-show-more__extension`. See the stripe list for more information about classes used in this component.
`orc-c-btn` Required	Added to the button that expands the hidden content within the show more component. Classes `orc-c-btn--bare`, `orc-u-display-block`, and `orc-u-margin-center` are applied to center the button and remove default background from button. See the button for more information about classes used in this component.
`orc-js-show-more-btn` JS	Added to the button that expands the hidden content so that JS can trigger this functionality.

Show more `orc-c-show-more`

Usage

When to use

When to consider an alternative