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