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.

Fallback card Weather data unavailable CSS: /assets/weather-card.css Icon review

Preview

This is the live component for today.

Weather data unavailable

The forecast service is unavailable right now. Try refreshing in a few minutes.

HTML block

This output is markup only. Load the stylesheet separately from this service.

Today's weather block is 653 characters.

<section class="rw-weather-card rw-weather-card--fallback" aria-labelledby="rw-weather-title">
  <header class="rw-weather-card__header">
    <div>
      <p class="rw-weather-card__eyebrow">Morning briefing</p>
      <h2 id="rw-weather-title" class="rw-weather-card__title">Today's cycling weather</h2>
      <p class="rw-weather-card__location">Nottingham</p>
    </div>
  </header>

  <div class="rw-weather-card__fallback">
    <p class="rw-weather-card__fallback-title">Weather data unavailable</p>
    <p class="rw-weather-card__fallback-copy">The forecast service is unavailable right now. Try refreshing in a few minutes.</p>
  </div>
</section>