Legend
The gds-legend
component is used to display the name, color, and potentially the value of data sets. It is generally meant to be paired with a chart or graph although other use cases may arise. Color values for each data set should be assigned via data attributes that correspond to predefined DS colors - including 4 levels of tint and shade for each color Other modifiers change the positioning and orientation of items, sizing, and the shape of color swatches.
<div class="gds-legend">
<ul class="gds-legend__items">
<li class="gds-legend__item">
<span class="gds-legend__swatch" data-gds-color="red"></span>
<span class="gds-legend__label">Label</span>
</li>
<li class="gds-legend__item">
<span class="gds-legend__swatch" data-gds-color="green"></span>
<span class="gds-legend__label">Label</span>
</li>
<li class="gds-legend__item">
<span class="gds-legend__swatch" data-gds-color="blue"></span>
<span class="gds-legend__label">Label</span>
</li>
<li class="gds-legend__item">
<span class="gds-legend__swatch" data-gds-color="gold"></span>
<span class="gds-legend__label">Label</span>
</li>
</ul>
</div>
Optional classes:
gds-legend--overlay
gds-legend--overlay-center
gds-legend__items--stacked
gds-legend__item--stacked
gds-legend__value--md
gds-legend__value--xs
gds-legend__value--sm
gds-legend__value--lg
gds-legend__value--xl
gds-legend__swatch--tip
gds-legend__swatch--square
data-gds-color=red
data-gds-color=red-dk-1
data-gds-color=red-dk-2
data-gds-color=red-dk-3
data-gds-color=red-dk-4
data-gds-color=red-lt-1
data-gds-color=red-lt-2
data-gds-color=red-lt-3
data-gds-color=red-lt-4
data-gds-color=green
data-gds-color=green-dk-1
data-gds-color=green-dk-2
data-gds-color=green-dk-3
data-gds-color=green-dk-4
data-gds-color=green-lt-1
data-gds-color=green-lt-2
data-gds-color=green-lt-3
data-gds-color=green-lt-4
data-gds-color=blue
data-gds-color=blue-dk-1
data-gds-color=blue-dk-2
data-gds-color=blue-dk-3
data-gds-color=blue-dk-4
data-gds-color=blue-lt-1
data-gds-color=blue-lt-2
data-gds-color=blue-lt-3
data-gds-color=blue-lt-4
data-gds-color=gold
data-gds-color=gold-dk-1
data-gds-color=gold-dk-2
data-gds-color=gold-dk-3
data-gds-color=gold-dk-4
data-gds-color=gold-lt-1
data-gds-color=gold-lt-2
data-gds-color=gold-lt-3
data-gds-color=gold-lt-4
data-gds-color=purple
data-gds-color=purple-dk-1
data-gds-color=purple-dk-2
data-gds-color=purple-dk-3
data-gds-color=purple-dk-4
data-gds-color=purple-lt-1
data-gds-color=purple-lt-2
data-gds-color=purple-lt-3
data-gds-color=purple-lt-4
data-gds-color=dkgreen
data-gds-color=dkgreen-dk-1
data-gds-color=dkgreen-dk-2
data-gds-color=dkgreen-dk-3
data-gds-color=dkgreen-dk-4
data-gds-color=dkgreen-lt-1
data-gds-color=dkgreen-lt-2
data-gds-color=dkgreen-lt-3
data-gds-color=dkgreen-lt-4
data-gds-color=orange
data-gds-color=orange-dk-1
data-gds-color=orange-dk-2
data-gds-color=orange-dk-3
data-gds-color=orange-dk-4
data-gds-color=orange-lt-1
data-gds-color=orange-lt-2
data-gds-color=orange-lt-3
data-gds-color=orange-lt-4