Ranker
The ranker component is used to display a set of objects in a ranker order. The value of the rank, the type object, and the number of rankings, are all customizable. At smaller sizes, the module switches from a horizontal orientation to a vertical one.
<div class="gds-ranker">
<ul class="gds-ranker__list">
<li class="gds-ranker__item">
<div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
<img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" />
</div>
<div class="gds-ranker__item-number">1</div>
</li><!--
--><li class="gds-ranker__item">
<div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
<img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" />
</div>
<div class="gds-ranker__item-number">2</div>
</li><!--
--><li class="gds-ranker__item">
<div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
<img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" />
</div>
<div class="gds-ranker__item-number">3</div>
</li><!--
--><li class="gds-ranker__item">
<div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
<img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" />
</div>
<div class="gds-ranker__item-number">4</div>
</li><!--
--><li class="gds-ranker__item">
<div class="gds-ranker__item-icon" data-tooltip="Brand Name goes here">
<img class="gds-ranker__image" src="https://c.gumgum.com/ads/com/gumgum/vi/images/no_image.png" />
</div>
<div class="gds-ranker__item-number">5</div>
</li>
</ul>
<div class="gds-ranker__connector"></div>
</div>
Optional classes:
gds-ranker--no-line
gds-ranker--vertical
gds-ranker--lg
gds-ranker--xl
gds-ranker__image--secondary
gds-ranker__image--tertiary
gds-ranker__image--lg
gds-ranker__image--xl
gds-ranker__item-number--secondary
gds-ranker__item-number--tertiary
gds-ranker__list--vertical
gds-ranker__list--vertical-inverted
gds-ranker__connector--inverted
gds-ranker__connector--lg
gds-ranker__connector--xl
gds-ranker__connector--vertical
gds-ranker__connector--vertical-lg
gds-ranker__connector--vertical-xl
gds-ranker__connector--vertical-inverted
gds-ranker__item-label--secondary
gds-ranker__item-label--tertiary
gds-ranker__item-label--lg
gds-ranker__item-label--xl
gds-ranker__item-label--inverted
gds-ranker__item-label--vertical
gds-ranker__item-label--vertical-inverted
gds-ranker__item--lg
gds-ranker__item--xl
gds-ranker__item--inverted
gds-ranker__item--vertical
gds-ranker__item--vertical-lg
gds-ranker__item--vertical-xl
gds-ranker__item--vertical-inverted
gds-ranker__item-icon--lg
gds-ranker__item-icon--xl
gds-ranker__item-icon--vertical-lg
gds-ranker__item-icon--vertical-xl
gds-ranker__item-number--lg
gds-ranker__item-number--xl
gds-ranker__item-number--vertical
gds-ranker__item-number--vertical-lg
gds-ranker__item-number--vertical-xl