MODULE — M04

Availability

A strip of months, each one booked, holding or open, with a legend underneath.

Six months

JULBooked

AUGBooked

SEPHolding

OCTOpen

NOVOpen

DECHolding

BOOKED HOLDING OPEN

HTML

<div class="availability" style="width:100%">
  <div class="hairline-grid" style="--cell:104px">
    <div class="hairline-cell month"><span class="month-name">JUL</span><span class="month-state">Booked</span></div>
    <div class="hairline-cell month"><span class="month-name">AUG</span><span class="month-state">Booked</span></div>
    <div class="hairline-cell month month-holding"><span class="month-name">SEP</span><span class="month-state">Holding</span></div>
    <div class="hairline-cell month month-open"><span class="month-name">OCT</span><span class="month-state">Open</span></div>
    <div class="hairline-cell month month-open"><span class="month-name">NOV</span><span class="month-state">Open</span></div>
    <div class="hairline-cell month month-holding"><span class="month-name">DEC</span><span class="month-state">Holding</span></div>
  </div>
  <div class="legend">
    <span class="legend-item"><span class="legend-swatch"></span>BOOKED</span>
    <span class="legend-item"><span class="legend-swatch legend-swatch-holding"></span>HOLDING</span>
    <span class="legend-item"><span class="legend-swatch legend-swatch-open"></span>OPEN</span>
  </div>
</div>

Reference

Read from modules/availability.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.availability.month.month-name.month-state.month-holding.month-open.legend.legend-item.legend-swatch.legend-swatch-holding.legend-swatch-open

READS--ds-cream--ds-font-body--ds-font-display--ds-gap--ds-gap-block--ds-gap-inline--ds-gap-loose--ds-ground--ds-hairline--ds-ink--ds-ink-faint--ds-ink-on-cream--ds-legend-gap--ds-month-h--ds-muted-on-cream--ds-rule-strong--ds-sunk--ds-swatch--ds-text-chip--ds-text-label--ds-text-ui--ds-track-key--ds-track-meta

Notes

STATE IS NEVER CARRIED BY COLOUR ALONE

Every month says its state in words underneath the name, and the legend maps the swatches. A reader who cannot tell the two dark fills apart still gets every fact — and so does anyone printing it, or reading in a high-contrast mode where the fills drop out entirely.

The open month takes the cream surface, which is the same emphasis the primary button uses. That is deliberate: on this page the open month is the call to action.