Skip to content
STYLESCAPE

Legend

Examples for the ss-c-legend module: series keys for charts and maps. Set each swatch's colour with --ss-legend-color. Swatches are decorative; the label carries the meaning.

Swatch shapes

  • Bar
  • Line
  • Forecast
  • Point
  • Area
HTML 
<ul class="ss-c-legend" aria-label="Legend">
            <li class="ss-c-legend__item"><span class="ss-c-legend__swatch" style="--ss-legend-color: var(--ss-color-accent)" aria-hidden="true"></span>Bar</li>
            <li class="ss-c-legend__item"><span class="ss-c-legend__swatch ss-c-legend__swatch--line" style="--ss-legend-color: var(--ss-color-success)" aria-hidden="true"></span>Line</li>
            <li class="ss-c-legend__item"><span class="ss-c-legend__swatch ss-c-legend__swatch--dashed" style="--ss-legend-color: var(--ss-color-warning)" aria-hidden="true"></span>Forecast</li>
            <li class="ss-c-legend__item"><span class="ss-c-legend__swatch ss-c-legend__swatch--point" style="--ss-legend-color: var(--ss-color-error)" aria-hidden="true"></span>Point</li>
            <li class="ss-c-legend__item"><span class="ss-c-legend__swatch ss-c-legend__swatch--area" style="--ss-legend-color: var(--ss-color-info)" aria-hidden="true"></span>Area</li>
        </ul>

Vertical with values

Land use

  • Green space38%
  • Residential27%
  • Water21%
  • Other14%
HTML 
<div style="max-width: 16rem">
            <p class="ss-c-legend__title" id="land-use">Land use</p>
            <ul class="ss-c-legend ss-c-legend--vertical" aria-labelledby="land-use">
                <li class="ss-c-legend__item"><span class="ss-c-legend__swatch ss-c-legend__swatch--area" style="--ss-legend-color: var(--ss-color-success)" aria-hidden="true"></span>Green space<span class="ss-c-legend__value">38%</span></li>
                <li class="ss-c-legend__item"><span class="ss-c-legend__swatch ss-c-legend__swatch--area" style="--ss-legend-color: var(--ss-color-warning)" aria-hidden="true"></span>Residential<span class="ss-c-legend__value">27%</span></li>
                <li class="ss-c-legend__item"><span class="ss-c-legend__swatch ss-c-legend__swatch--area" style="--ss-legend-color: var(--ss-color-info)" aria-hidden="true"></span>Water<span class="ss-c-legend__value">21%</span></li>
                <li class="ss-c-legend__item"><span class="ss-c-legend__swatch ss-c-legend__swatch--area" style="--ss-legend-color: var(--ss-color-muted)" aria-hidden="true"></span>Other<span class="ss-c-legend__value">14%</span></li>
            </ul>
        </div>

Interactive toggles

HTML 
<ul class="ss-c-legend" aria-label="Series">
            <li><button type="button" class="ss-c-legend__toggle" aria-pressed="true"><span class="ss-c-legend__swatch ss-c-legend__swatch--line" style="--ss-legend-color: var(--ss-color-accent)" aria-hidden="true"></span>Temperature</button></li>
            <li><button type="button" class="ss-c-legend__toggle" aria-pressed="false"><span class="ss-c-legend__swatch ss-c-legend__swatch--line" style="--ss-legend-color: var(--ss-color-success)" aria-hidden="true"></span>Humidity</button></li>
            <li><button type="button" class="ss-c-legend__toggle" aria-pressed="true"><span class="ss-c-legend__swatch ss-c-legend__swatch--point" style="--ss-legend-color: var(--ss-color-error)" aria-hidden="true"></span>Alerts</button></li>
        </ul>