Radio Weather
Nottingham cycling weather

This is the component that powers the weather on www.morningbriefing.org. Preview it here, then copy the generated HTML when you need it.
Serving cached forecast Updated 52 minutes ago CSS: /assets/weather-card.css Icon review
Preview

This is the live component for today.
Temperature
6° to 13°C
Rain
Rain this evening
Wind
Gusts 18 mph
Sunset
20:57
Ride details Good to ride
Recommended gear
Waterproof
Jacket
Light layers
Hi-vis
Best times to ride
Breezy today
06 6°
09 11°
12 13°
15 13°
18 13°
21 12°
HTML block

This output is markup only. Load the stylesheet separately from this service.
Today's weather block is 13,737 characters.
<section class="rw-weather-card" aria-label="Weather card">
  <header class="rw-weather-card__header">
    <p class="rw-weather-card__eyebrow">
      <a class="rw-weather-card__eyebrow-link" href="https://www.morningbriefing.org/" target="_blank" rel="noreferrer">Morning briefing</a>
      <span aria-hidden="true">&middot;</span> Nottingham
    </p>
    <div class="rw-weather-card__date-wrap">
      <button class="rw-weather-card__date" type="button" aria-describedby="rw-weather-credit">
        Sat 16 May
      </button>
      <div id="rw-weather-credit" class="rw-weather-card__date-popover" role="note">
        Weather data by <a href="https://open-meteo.com/" target="_blank" rel="noreferrer">Open-Meteo</a>.
      </div>
    </div>
  </header>

  <div class="rw-weather-card__stats">
    <div class="rw-stat">
      <span class="rw-stat__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14.5V5.5a2 2 0 1 1 4 0v9"></path><circle cx="12" cy="17" r="4"></circle><path d="M12 7v8"></path></svg>
      </span>
      <div>
        <p class="rw-stat__label">Temperature</p>
        <p class="rw-stat__value">6&deg; to 13&deg;C</p>
      </div>
    </div>

    <div class="rw-stat">
      <span class="rw-stat__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18a4 4 0 1 1 .8-7.9A5 5 0 0 1 17 9a4 4 0 0 1 0 8H7Z"></path><path d="M8.5 20.5 7 23"></path><path d="M12.5 20.5 11 23"></path><path d="M16.5 20.5 15 23"></path></svg>
      </span>
      <div>
        <p class="rw-stat__label">Rain</p>
        <p class="rw-stat__value">Rain this evening</p>
      </div>
    </div>

    <div class="rw-stat">
      <span class="rw-stat__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9h10c2 0 3-1 3-2.5S14.8 4 13 4"></path><path d="M3 12.5h14c2 0 4 1.2 4 3s-1.4 3-3.2 3"></path><path d="M3 16h8c1.6 0 2.8.8 2.8 2s-1 2-2.3 2"></path></svg>
      </span>
      <div>
        <p class="rw-stat__label">Wind</p>
        <p class="rw-stat__value">Gusts 18 mph</p>
      </div>
    </div>

    <div class="rw-stat">
      <span class="rw-stat__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17h16"></path><path d="M6 17a6 6 0 0 1 12 0"></path><path d="M12 5v3"></path><path d="m8.5 8.5 1.5 1.5"></path><path d="m15.5 8.5-1.5 1.5"></path></svg>
      </span>
      <div>
        <p class="rw-stat__label">Sunset</p>
        <p class="rw-stat__value">20:57</p>
      </div>
    </div>
  </div>

  <details class="rw-weather-card__disclosure rw-weather-card__disclosure--good">
    <summary class="rw-weather-card__toggle">
      <span>Ride details</span>
      <span class="rw-weather-card__toggle-summary">Good to ride</span>
      <span class="rw-weather-card__toggle-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
      </span>
    </summary>

    <div class="rw-weather-card__details">
      <div class="rw-weather-card__details-inner">
        
        <section class="rw-weather-card__gear" aria-labelledby="rw-gear-heading">
          <p id="rw-gear-heading" class="rw-section-heading rw-weather-card__gear-heading">Recommended gear</p>
          <ul class="rw-gear-list">
            
            <li class="rw-gear-item">
              <span class="rw-gear-item__icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 15a4 4 0 1 1 .8-7.9A5 5 0 0 1 17 6a4 4 0 0 1 0 8H7Z"></path><path d="M12 16v5"></path><path d="m12 21-2-2"></path><path d="m12 21 2-2"></path></svg>
              </span>
              <span class="rw-gear-item__label">Waterproof</span>
            </li>
            
            <li class="rw-gear-item">
              <span class="rw-gear-item__icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 4 6 7l-2 5 3 2 2-4v10h6V10l2 4 3-2-2-5-3-3H9Z"></path></svg>
              </span>
              <span class="rw-gear-item__label">Jacket</span>
            </li>
            
            <li class="rw-gear-item">
              <span class="rw-gear-item__icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 6.5 6 9l-1.5 3.5 2.5 1.5L8.5 11v7h7V11l1.5 3 2.5-1.5L18 9l-2.5-2.5h-2l-1.5 1.5-1.5-1.5h-2Z"></path><path d="M10 8.5h4"></path><path d="M10 11.5h4"></path><path d="M10 14.5h4"></path></svg>
              </span>
              <span class="rw-gear-item__label">Light layers</span>
            </li>
            
            <li class="rw-gear-item">
              <span class="rw-gear-item__icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4h4l4 16H6l4-16Z"></path><path d="M8 12h8"></path></svg>
              </span>
              <span class="rw-gear-item__label">Hi-vis</span>
            </li>
            
          </ul>
        </section>
        

        <section class="rw-weather-card__timeline" aria-labelledby="rw-timeline-heading">
          <div class="rw-weather-card__timeline-header">
            <p id="rw-timeline-heading" class="rw-section-heading">Best times to ride</p>
            <p class="rw-weather-card__timeline-note">Breezy today</p>
          </div>
          <ol class="rw-timeline-list">
            
            <li class="rw-timeline-point rw-timeline-point--safe">
              <span class="rw-timeline-point__hour">06</span>
              <span class="rw-timeline-point__dot" aria-hidden="true"></span>
              <span class="rw-timeline-point__temp">6&deg;</span>
            </li>
            
            <li class="rw-timeline-point rw-timeline-point--safe">
              <span class="rw-timeline-point__hour">09</span>
              <span class="rw-timeline-point__dot" aria-hidden="true"></span>
              <span class="rw-timeline-point__temp">11&deg;</span>
            </li>
            
            <li class="rw-timeline-point rw-timeline-point--safe">
              <span class="rw-timeline-point__hour">12</span>
              <span class="rw-timeline-point__dot" aria-hidden="true"></span>
              <span class="rw-timeline-point__temp">13&deg;</span>
            </li>
            
            <li class="rw-timeline-point rw-timeline-point--safe">
              <span class="rw-timeline-point__hour">15</span>
              <span class="rw-timeline-point__dot" aria-hidden="true"></span>
              <span class="rw-timeline-point__temp">13&deg;</span>
            </li>
            
            <li class="rw-timeline-point rw-timeline-point--safe">
              <span class="rw-timeline-point__hour">18</span>
              <span class="rw-timeline-point__dot" aria-hidden="true"></span>
              <span class="rw-timeline-point__temp">13&deg;</span>
            </li>
            
            <li class="rw-timeline-point rw-timeline-point--caution">
              <span class="rw-timeline-point__hour">21</span>
              <span class="rw-timeline-point__dot" aria-hidden="true"></span>
              <span class="rw-timeline-point__temp">12&deg;</span>
            </li>
            
          </ol>
        </section>

        <section class="rw-weather-card__bars" aria-label="Rain and wind intensity">
          <div class="rw-bar-group">
            <div class="rw-bar-group__header">
              <span class="rw-bar-group__label">Rain</span>
              <span class="rw-bar-group__summary">Wet later</span>
            </div>
            <div class="rw-bar rw-bar--rain">
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="06:00 rain 0.0 millimetres per hour"
                data-tooltip="06:00 · 0.0 mm/hr"
                title="06:00 rain 0.0 mm/hr"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 0;"></span>
              </span>
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="09:00 rain 0.0 millimetres per hour"
                data-tooltip="09:00 · 0.0 mm/hr"
                title="09:00 rain 0.0 mm/hr"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 0;"></span>
              </span>
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="12:00 rain 0.0 millimetres per hour"
                data-tooltip="12:00 · 0.0 mm/hr"
                title="12:00 rain 0.0 mm/hr"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 0;"></span>
              </span>
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="15:00 rain 0.1 millimetres per hour"
                data-tooltip="15:00 · 0.1 mm/hr"
                title="15:00 rain 0.1 mm/hr"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 0.09090909;"></span>
              </span>
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="18:00 rain 0.1 millimetres per hour"
                data-tooltip="18:00 · 0.1 mm/hr"
                title="18:00 rain 0.1 mm/hr"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 0.09090909;"></span>
              </span>
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="21:00 rain 1.1 millimetres per hour"
                data-tooltip="21:00 · 1.1 mm/hr"
                title="21:00 rain 1.1 mm/hr"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 1;"></span>
              </span>
              
            </div>
          </div>

          <div class="rw-bar-group">
            <div class="rw-bar-group__header">
              <span class="rw-bar-group__label">Wind</span>
              <span class="rw-bar-group__summary">Light gusts</span>
            </div>
            <div class="rw-bar rw-bar--wind">
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="06:00 wind gusts 10 miles per hour"
                data-tooltip="06:00 · 10 mph gusts"
                title="06:00 wind gusts 10 mph"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 0.5555556;"></span>
              </span>
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="09:00 wind gusts 14 miles per hour"
                data-tooltip="09:00 · 14 mph gusts"
                title="09:00 wind gusts 14 mph"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 0.7777778;"></span>
              </span>
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="12:00 wind gusts 18 miles per hour"
                data-tooltip="12:00 · 18 mph gusts"
                title="12:00 wind gusts 18 mph"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 1;"></span>
              </span>
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="15:00 wind gusts 18 miles per hour"
                data-tooltip="15:00 · 18 mph gusts"
                title="15:00 wind gusts 18 mph"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 1;"></span>
              </span>
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="18:00 wind gusts 13 miles per hour"
                data-tooltip="18:00 · 13 mph gusts"
                title="18:00 wind gusts 13 mph"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 0.7222222;"></span>
              </span>
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="21:00 wind gusts 14 miles per hour"
                data-tooltip="21:00 · 14 mph gusts"
                title="21:00 wind gusts 14 mph"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 0.7777778;"></span>
              </span>
              
            </div>
          </div>
        </section>
      </div>
    </div>
  </details>
</section>