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 1h 30m ago CSS: /assets/weather-card.css
Weather data provided by Open-Meteo.
This page and component are dedicated to the public domain under CC0.
Preview

This is the live component for today.
Temperature
9° to 15°C
Rain
Dry today
Wind
Gusts 25 mph
Sunset
18:11
Ride details Good to ride
Recommended gear
Jacket
Light layers
Lights
Best times to ride
Windy today
06 10°
09 11°
12 14°
15 15°
18 13°
21 10°
HTML block

This output is markup only. Load the stylesheet separately from this service.
Today's weather block is 13,867 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">
        Tue 17 Mar
      </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">9&deg; to 15&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">Dry today</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 12h12"></path>
          <path d="m10 7 5 5-5 5"></path>
          <path d="M4 6h7"></path>
          <path d="M4 18h10"></path>
        </svg>
      </span>
      <div>
        <p class="rw-stat__label">Wind</p>
        <p class="rw-stat__value">Gusts 25 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">18:11</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="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="M12 3v4"></path>
                  <path d="M5.6 5.6 8.4 8.4"></path>
                  <path d="M3 12h4"></path>
                  <path d="m5.6 18.4 2.8-2.8"></path>
                  <path d="M12 17v4"></path>
                  <path d="m18.4 18.4-2.8-2.8"></path>
                  <path d="M17 12h4"></path>
                  <path d="m18.4 5.6-2.8 2.8"></path>
                  <circle cx="12" cy="12" r="3"></circle>
                </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="M7 15V9a5 5 0 1 1 10 0v6"></path>
                  <path d="M9 15h6"></path>
                  <path d="M12 15v5"></path>
                </svg>
                
              </span>
              <span class="rw-gear-item__label">Lights</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">Windy 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">10&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">14&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">15&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--safe">
              <span class="rw-timeline-point__hour">21</span>
              <span class="rw-timeline-point__dot" aria-hidden="true"></span>
              <span class="rw-timeline-point__temp">10&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">Dry all day</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.0 millimetres per hour"
                data-tooltip="15:00 · 0.0 mm/hr"
                title="15: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="18:00 rain 0.0 millimetres per hour"
                data-tooltip="18:00 · 0.0 mm/hr"
                title="18: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="21:00 rain 0.0 millimetres per hour"
                data-tooltip="21:00 · 0.0 mm/hr"
                title="21:00 rain 0.0 mm/hr"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 0;"></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">Windy through the day</span>
            </div>
            <div class="rw-bar rw-bar--wind">
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="06:00 wind gusts 24 miles per hour"
                data-tooltip="06:00 · 24 mph gusts"
                title="06:00 wind gusts 24 mph"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 0.96;"></span>
              </span>
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="09:00 wind gusts 24 miles per hour"
                data-tooltip="09:00 · 24 mph gusts"
                title="09:00 wind gusts 24 mph"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 0.96;"></span>
              </span>
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="12:00 wind gusts 24 miles per hour"
                data-tooltip="12:00 · 24 mph gusts"
                title="12:00 wind gusts 24 mph"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 0.96;"></span>
              </span>
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="15:00 wind gusts 25 miles per hour"
                data-tooltip="15:00 · 25 mph gusts"
                title="15:00 wind gusts 25 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 25 miles per hour"
                data-tooltip="18:00 · 25 mph gusts"
                title="18:00 wind gusts 25 mph"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 1;"></span>
              </span>
              
              <span
                class="rw-bar__segment"
                tabindex="0"
                role="img"
                aria-label="21:00 wind gusts 15 miles per hour"
                data-tooltip="21:00 · 15 mph gusts"
                title="21:00 wind gusts 15 mph"
              >
                <span class="rw-bar__fill" style="--rw-bar-value: 0.6;"></span>
              </span>
              
            </div>
          </div>
        </section>
      </div>
    </div>
  </details>
</section>