1. Components
  2. Messaging

Badge

A small label, usually indicating tier status.

Default badge orc-c-badge

A small label, usually indicating tier status.

Small badge orc-c-badge--small

Shrinks the size of the default badge.

Yellow badge orc-c-badge--yellow

Applies a yellow background to the badge.

Velvet badge orc-c-badge--velvet

Changes the badgestyling to present the Velvet tier.

Sterling badge orc-c-badge--sterling

Changes the badge styling to represent the Sterling tier.

Gold badge orc-c-badge--gold

Changes the badge styling to represent the Gold tier.

Platinum badge orc-c-badge--platinum

Changes the badge styling to represent the Platinum tier.

  • 

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


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

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

  • 

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


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

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

  • 

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


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

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

  • 

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


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

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

  • 

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


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

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

  • 

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


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

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

  • 

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


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

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

Usage

When to use

Use within Identity to denote a user’s tier status. The backend logic will automatically select the appropriate badge for the member or tier being described. It could also be used in other Cosmopolitan experiences to label experiences or offers.

When to consider an alternative

Since this component is integral to the Identity experience, use good judgment in applying it elsewhere.

Class Name Description 
orc-c-badge
Required

Apply to the badge’s containing HTML element. This provides the general layout of the badge component and uses modifiers to change styles like the background and text color. This is set to display: flex to place icon and text side-by-side.

 
orc-c-badge--small
Modifier

Apply in addition to the orc-c-badge class to shrink the size of the default badge.

 
orc-c-badge--yellow
Modifier

Apply in addition to the orc-c-badge class to change the styling of the badge to a yellow background.

 
orc-c-badge--velvet
Modifier

Apply in addition to the orc-c-badge class to change the styling of the badge to represent the velvet tier.

 
orc-c-badge--sterling
Modifier

Apply in addition to the orc-c-badge class to change the styling of the badge to represent the sterling tier.

 
orc-c-badge--gold
Modifier

Apply in addition to the orc-c-badge class to change the styling of the badge to represent the gold tier..

 
orc-c-badge--platinum
Modifier

Apply in addition to the orc-c-badge class to change the styling of the badge to represent the platinum tier.

 
orc-c-icon
Required

Class used for icons within the design system to set the base styles.

 
orc-c-badge__icon
Required

Apply in addition to orc-c-icon to style the icon specifically for the badge.

 
orc-c-badge__text
Required

Apply to a span tag to represent the actual text of the badge.