1. Components
  2. Blocks and cards

Stripe In Progress

A unit of text, typically used to display account activity.

Default stripe orc-c-stripe

A unit of text, typically used to display account activity.

Large stripe orc-c-stripe--large

This version increases the padding and text size within the stripe.

Subtle stripe orc-c-stripe--subtle

This lightens the text color to show an inactive state.

Velvet stripe orc-c-stripe--velvet

Adds a background color and styling to represent the Velvet Identity tier.

Sterling stripe orc-c-stripe--sterling

Adds a background color and styling to represent the Sterling Identity tier.

Gold stripe orc-c-stripe--gold

Adds a background color and styling to represent the Gold Identity tier.

Platinum stripe orc-c-stripe--platinum

Adds a background color and styling to represent the Platinum Identity tier.

  • 

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

  • 

    <div class="orc-c-stripe orc-c-stripe--large">

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

  • 

    <div class="orc-c-stripe orc-c-stripe--subtle">

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

  • 

    <div class="orc-c-stripe orc-c-stripe--large orc-c-stripe--velvet" style="background-image: url(..&#x2F;..&#x2F;images&#x2F;fpo-tile-image.png);">

  <h4 class="orc-c-stripe__title">Velvet status unlocked</h3>
    <span class="orc-c-stripe__meta">Oct. 14, 2017 </span>

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

      <div class="orc-c-stripe__left-container">
      </div>
      <!--end orc-c-stripe__left-container-->


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

    <button class="orc-c-btn orc-c-btn--text orc-c-btn--small">

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


            <span class="orc-c-btn__text orc-js-btn-text">Review your new Velvet benefits</span>

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



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

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


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

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

  • 

    <div class="orc-c-stripe orc-c-stripe--large orc-c-stripe--sterling" style="background-image: url(..&#x2F;..&#x2F;images&#x2F;fpo-tile-image.png);">

  <h4 class="orc-c-stripe__title">Sterling status unlocked</h3>
    <span class="orc-c-stripe__meta">Oct. 14, 2017 </span>

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

      <div class="orc-c-stripe__left-container">
      </div>
      <!--end orc-c-stripe__left-container-->


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

    <button class="orc-c-btn orc-c-btn--text orc-c-btn--small">

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


            <span class="orc-c-btn__text orc-js-btn-text">Review your new Sterling benefits</span>

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



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

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


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

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

  • 

    <div class="orc-c-stripe orc-c-stripe--large orc-c-stripe--gold" style="background-image: url(..&#x2F;..&#x2F;images&#x2F;fpo-tile-image.png);">

  <h4 class="orc-c-stripe__title">Gold status unlocked</h3>
    <span class="orc-c-stripe__meta">Oct. 14, 2017 </span>

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

      <div class="orc-c-stripe__left-container">
      </div>
      <!--end orc-c-stripe__left-container-->


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

    <button class="orc-c-btn orc-c-btn--text orc-c-btn--small">

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


            <span class="orc-c-btn__text orc-js-btn-text">Review your new Gold benefits</span>

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



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

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


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

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

  • 

    <div class="orc-c-stripe orc-c-stripe--large orc-c-stripe--platinum" style="background-image: url(..&#x2F;..&#x2F;images&#x2F;fpo-tile-image.png);">

  <h4 class="orc-c-stripe__title">Platinum status unlocked</h3>
    <span class="orc-c-stripe__meta">Oct. 14, 2017 </span>

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

      <div class="orc-c-stripe__left-container">
      </div>
      <!--end orc-c-stripe__left-container-->


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

    <button class="orc-c-btn orc-c-btn--text orc-c-btn--small">

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


            <span class="orc-c-btn__text orc-js-btn-text">Review your new Platinum benefits</span>

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



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

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


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

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

Usage

When to use

This is the best component for the display of text-only, administrative information. This content is usually data-based, not prose.

When to consider an alternative

If the content is prose written in The Cosmopolitan voice, use a text block instead.

Class Name Description 
orc-c-stripe
Required

Apply to the stripe’s containing HTML element. This class houses a title, metadata, and some text to create a block that looks like a strip across. This is usually used with other stripes in a orc-c-stripe-list.

 
orc-c-stripe--large
Modifier

Add to orc-c-stripe to increase the padding and text size within the stripe.

 
orc-c-stripe--subtle
Modifier

Add to orc-c-stripe to lighten the text color to show an inactive state

 
orc-c-stripe--velvet
Modifier

Add to orc-c-stripe to add a background color and styling that represents the velvet Identity tier.

 
orc-c-stripe--sterling
Modifier

Add to orc-c-stripe to add a background color and styling that represents the sterling Identity tier

 
orc-c-stripe--gold
Modifier

Add to orc-c-stripe to add a background color and styling that represents the gold Identity tier

 
orc-c-stripe--platinum
Modifier

Add to orc-c-stripe to add a background color and styling that represents the platinum Identity tier

 
orc-c-stripe__title
Recommended

Added to <h4> to create a headline for the stripe.

 
orc-c-stripe__meta
Recommended

Added to a <span> to add short metadata within the stripe

 
orc-c-stripe__inner
Recommended

Inner container of orc-c-stripe that is set to display: flex to position orc-c-stripe__left-container and orc-c-stripe__right-container side by side.

 
orc-c-stripe__left-container
Recommended

Apply to the card’s description text inside the card body. The recommended element for this class is <p>.

 
orc-c-stripe__text

A passage of text than can be applied to orc-c-stripe__left-container or orc-c-stripe__right-container

 
orc-c-badge

Optional badge that can be added to provide context to the stripe’s information

 
orc-c-stripe__right-container
Recommended

Right container of the stripe that positions the text along the right side of the stripe

 
orc-c-btn

Button component that can be added to the stripe if action needs to be taken with it

 
orc-c-stripe__note

Optional passage of information about the content of the stripe