Ranker Ensign

The ranker ensign component, prefixed by gds-ranker-ensign, is used to represent a brand, team, person, etc that holds a specific rank. It will generally be used in conjunction with a ranker grid and or a leaderboard component to show how a specific set of items ranks against one another.

Prototypes Page

<div class="gds-ranker-ensign">
    <img class="gds-ranker-ensign__thumbnail" src="https://assets.ggops.com/images/ken.png" />
    <div class="gds-ranker-ensign__content">
        <span class="gds-ranker-ensign__label">Golden State</span>
        <span class="gds-ranker-ensign__title">Warriors</span>
    </div>
    <span class="gds-ranker-ensign__number">15 <sup class="gds-ranker-ensign__number--sup">th</sup></span>
</div>

Optional classes:

• gds-ranker-ensign--secondary
• gds-ranker-ensign--tertiary
• gds-ranker-ensign--xs
• gds-ranker-ensign--sm
• gds-ranker-ensign--lg
• gds-ranker-ensign--xl
• gds-ranker-ensign__thumbnail--secondary
• gds-ranker-ensign__thumbnail--tertiary
• gds-ranker-ensign__thumbnail--xs
• gds-ranker-ensign__thumbnail--sm
• gds-ranker-ensign__thumbnail--lg
• gds-ranker-ensign__thumbnail--xl
• gds-ranker-ensign__label--xs
• gds-ranker-ensign__label--sm
• gds-ranker-ensign__label--lg
• gds-ranker-ensign__label--xl
• gds-ranker-ensign__title--secondary
• gds-ranker-ensign__title--tertiary
• gds-ranker-ensign__title--xs
• gds-ranker-ensign__title--sm
• gds-ranker-ensign__title--lg
• gds-ranker-ensign__title--xl
• gds-ranker-ensign__number--sup