Book a callGitHub10

Bergen

Thu 23 Oct · 14:05

Now 14°

Partly cloudy

H 16° · L 9° · Feels 12°

Next hours

Rain from about 18:00, easing by 20:00.

  1. Now14°partly cloudy
  2. 1515°partly cloudy
  3. 1616°sunny
  4. 1710%15°cloudy, 10% chance of rain
  5. 1860%13°rain, 60% chance of rain
  6. 1970%12°rain, 70% chance of rain
  7. 2030%11°cloudy, 30% chance of rain
  8. 2110°clear
  9. 2210°clear

7 days

  1. Today9°16°partly cloudy, low 9°, high 16°
  2. Fri80%8°12°rain, 80% chance of rain, low 8°, high 12°
  3. Sat60%7°11°rain, 60% chance of rain, low 7°, high 11°
  4. Sun20%6°12°cloudy, 20% chance of rain, low 6°, high 12°
  5. Mon5°13°sunny, low 5°, high 13°
  6. Tue7°14°partly cloudy, low 7°, high 14°
  7. Wed10%8°15°cloudy, 10% chance of rain, low 8°, high 15°

It is live: hover, focus and its own controls respond. Actions that would change data (approve, send, delete) are for your app to wire. The width is a real 390 px, 768 px or 1280 px box, shrunk to fit your screen.

Source
<!-- Icons: Lucide (lucide.dev), ISC licence -->
<style>
.odl-weather-now { box-sizing: border-box; inline-size: 100%; max-inline-size: 24rem; margin-inline: auto; container-type: inline-size; color: var(--ds-color-text-primary); font: var(--ds-text-body-md); }
.odl-weather-now *, .odl-weather-now *::before, .odl-weather-now *::after { box-sizing: border-box; }
.odl-weather-now .odl-card { overflow: hidden; background: var(--ds-color-surface-raised); border: var(--ds-border-width-default) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-container); box-shadow: var(--ds-elevation-raised); }
.odl-weather-now .odl-sky { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-inline-md); padding: var(--ds-space-inset-xl);
  color: var(--ds-color-white); background: radial-gradient(90% 80% at 85% 20%, var(--ds-color-info-light-8), transparent 70%), linear-gradient(170deg, var(--ds-color-info-light-10), var(--ds-color-info-light-12)); }
.odl-weather-now .odl-place { display: flex; align-items: center; gap: var(--ds-space-inline-xs); margin: 0; font: var(--ds-text-label-lg); }
.odl-weather-now .odl-place svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); fill: currentColor; stroke-width: var(--ds-icon-stroke-md); }
.odl-weather-now .odl-when { margin: var(--ds-space-stack-xs) 0 0; font: var(--ds-text-label-md); opacity: 0.85; }
.odl-weather-now .odl-temp { margin: var(--ds-space-stack-sm) 0 0; font: var(--ds-text-headline-sm); font-size: calc(var(--ds-text-headline-sm-size) * 2.6); font-weight: var(--ds-font-weight-body); line-height: 1; letter-spacing: var(--ds-text-headline-sm-tracking); font-variant-numeric: tabular-nums; }
.odl-weather-now .odl-cond { margin: var(--ds-space-stack-xs) 0 0; font: var(--ds-text-title-sm); }
.odl-weather-now .odl-range { margin: var(--ds-space-stack-xs) 0 0; font: var(--ds-text-label-md); opacity: 0.9; font-variant-numeric: tabular-nums; }
.odl-weather-now .odl-big { inline-size: calc(var(--ds-size-control-lg) * 2.2); block-size: auto; aspect-ratio: 1; stroke-width: var(--ds-icon-stroke-sm); }
.odl-weather-now .odl-sec { padding: var(--ds-space-inset-lg); }
.odl-weather-now .odl-sec + .odl-sec { border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
.odl-weather-now h4 { display: flex; align-items: center; gap: var(--ds-space-inline-xs); margin: 0 0 var(--ds-space-stack-sm); color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); }
.odl-weather-now h4 svg { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); stroke-width: var(--ds-icon-stroke-md); }
.odl-weather-now .odl-note { margin: 0 0 var(--ds-space-stack-md); font: var(--ds-text-body-md); }
.odl-weather-now .odl-hours { display: flex; gap: var(--ds-space-inline-xs); margin: 0 calc(-1 * var(--ds-space-inset-lg)); padding: 0 var(--ds-space-inset-lg) var(--ds-space-inset-xs); list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--ds-space-inset-lg); -webkit-mask-image: linear-gradient(to right, var(--ds-color-black) calc(100% - var(--ds-space-48)), transparent); mask-image: linear-gradient(to right, var(--ds-color-black) calc(100% - var(--ds-space-48)), transparent); scrollbar-width: thin; }
.odl-weather-now .odl-hours li { position: relative; flex: none; display: grid; justify-items: center; gap: var(--ds-space-stack-xs); min-inline-size: var(--ds-size-control-lg); padding: var(--ds-space-inset-sm) var(--ds-space-inset-xs); scroll-snap-align: start; border-radius: var(--ds-radius-nested); }
.odl-weather-now .odl-hours li:first-child { background: var(--ds-color-bg-neutral-subtle); }
.odl-weather-now .odl-hours li:first-child .odl-hr { color: var(--ds-color-text-primary); font-weight: var(--ds-font-weight-heading); }
.odl-weather-now .odl-hr { color: var(--ds-color-text-secondary); font: var(--ds-text-label-md); font-variant-numeric: tabular-nums; }
.odl-weather-now .odl-ic { inline-size: var(--ds-size-icon-md); block-size: var(--ds-size-icon-md); color: var(--ds-color-icon-default); stroke-width: var(--ds-icon-stroke-md); }
.odl-weather-now .odl-pop { min-block-size: 1lh; color: var(--ds-color-text-info); font: var(--ds-text-label-sm); font-variant-numeric: tabular-nums; }
.odl-weather-now .odl-hours b { font: var(--ds-text-label-lg); font-variant-numeric: tabular-nums; }
.odl-weather-now .odl-days { display: grid; margin: 0; padding: 0; list-style: none; }
.odl-weather-now .odl-days li { position: relative; display: grid; grid-template-columns: 3.5rem 3.75rem 2.25rem minmax(0, 1fr) 2.25rem; align-items: center; column-gap: var(--ds-space-inline-md); min-block-size: max(var(--ds-size-control-lg), var(--ds-size-target-min)); }
.odl-weather-now .odl-days li + li { border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
.odl-weather-now .odl-day { font: var(--ds-text-label-lg); }
.odl-weather-now .odl-days .odl-cond { display: flex; align-items: center; gap: var(--ds-space-inline-xs); margin: 0; }
.odl-weather-now .odl-days .odl-ic { inline-size: var(--ds-size-icon-sm); block-size: var(--ds-size-icon-sm); }
.odl-weather-now .odl-days .odl-pop { min-block-size: 0; }
.odl-weather-now .odl-lo, .odl-weather-now .odl-hi { font: var(--ds-text-label-lg); font-variant-numeric: tabular-nums; text-align: end; }
.odl-weather-now .odl-lo { color: var(--ds-color-text-secondary); }
.odl-weather-now .odl-bar { position: relative; block-size: var(--ds-space-6); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-neutral-subtle); }
.odl-weather-now .odl-bar i { position: absolute; inset: 0; border-radius: var(--ds-radius-full); clip-path: inset(0 calc(100% - var(--e)) 0 var(--s) round var(--ds-radius-full));
  background: linear-gradient(to right, var(--ds-color-info-light-8), var(--ds-color-success-light-8), var(--ds-color-warning-light-8)); }
.odl-weather-now .odl-bar .odl-now { clip-path: none; inset-inline: auto; inset-inline-start: var(--n); inset-block: 50% auto; inline-size: var(--ds-space-8); block-size: var(--ds-space-8); transform: translate(-50%, -50%);
  background: var(--ds-color-surface-raised); border: var(--ds-border-width-emphasis) solid var(--ds-color-text-primary); }
.odl-weather-now .odl-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.odl-weather-now .odl-hours:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: calc(-1 * var(--ds-focus-ring-width)); }
@container (max-width: 21rem) {
  .odl-weather-now .odl-days li { grid-template-columns: 2.75rem 3.25rem 2rem minmax(0, 1fr) 2rem; column-gap: var(--ds-space-inline-xs); }
}
</style>
<section class="odl-weather-now" aria-label="Weather in Bergen">
  <div class="odl-card">
    <div class="odl-sky">
      <div>
        <p class="odl-place"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>Bergen</p>
        <p class="odl-when">Thu 23 Oct · 14:05</p>
        <p class="odl-temp"><span class="odl-sr">Now </span>14°</p>
        <p class="odl-cond">Partly cloudy</p>
        <p class="odl-range">H 16° · L 9° · Feels 12°</p>
      </div>
      <svg class="odl-big" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m19.07 4.93-1.41 1.41"/><path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"/><path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z"/></svg>
    </div>
    <div class="odl-sec">
      <h4><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Next hours</h4>
      <p class="odl-note">Rain from about 18:00, easing by 20:00.</p>
      <ol class="odl-hours" tabindex="0" aria-label="Hourly forecast"><li><span class="odl-hr">Now</span><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m19.07 4.93-1.41 1.41"/><path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"/><path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z"/></svg><span class="odl-pop"></span><b>14°</b><span class="odl-sr">partly cloudy</span></li><li><span class="odl-hr">15</span><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m19.07 4.93-1.41 1.41"/><path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"/><path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z"/></svg><span class="odl-pop"></span><b>15°</b><span class="odl-sr">partly cloudy</span></li><li><span class="odl-hr">16</span><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg><span class="odl-pop"></span><b>16°</b><span class="odl-sr">sunny</span></li><li><span class="odl-hr">17</span><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg><span class="odl-pop">10%</span><b>15°</b><span class="odl-sr">cloudy, 10% chance of rain</span></li><li><span class="odl-hr">18</span><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 14v6"/><path d="M8 14v6"/><path d="M12 16v6"/></svg><span class="odl-pop">60%</span><b>13°</b><span class="odl-sr">rain, 60% chance of rain</span></li><li><span class="odl-hr">19</span><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 14v6"/><path d="M8 14v6"/><path d="M12 16v6"/></svg><span class="odl-pop">70%</span><b>12°</b><span class="odl-sr">rain, 70% chance of rain</span></li><li><span class="odl-hr">20</span><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg><span class="odl-pop">30%</span><b>11°</b><span class="odl-sr">cloudy, 30% chance of rain</span></li><li><span class="odl-hr">21</span><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg><span class="odl-pop"></span><b>10°</b><span class="odl-sr">clear</span></li><li><span class="odl-hr">22</span><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg><span class="odl-pop"></span><b>10°</b><span class="odl-sr">clear</span></li></ol>
    </div>
    <div class="odl-sec">
      <h4><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>7 days</h4>
      <ol class="odl-days" aria-label="Seven-day forecast"><li><span class="odl-day">Today</span><span class="odl-cond"><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m19.07 4.93-1.41 1.41"/><path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"/><path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z"/></svg><span class="odl-pop"></span></span><span class="odl-lo">9°</span><span class="odl-bar" style="--s: 36.4%; --e: 100.0%" aria-hidden="true"><i></i><i class="odl-now" style="--n: 81.8%"></i></span><span class="odl-hi">16°</span><span class="odl-sr">partly cloudy, low 9°, high 16°</span></li><li><span class="odl-day">Fri</span><span class="odl-cond"><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 14v6"/><path d="M8 14v6"/><path d="M12 16v6"/></svg><span class="odl-pop">80%</span></span><span class="odl-lo">8°</span><span class="odl-bar" style="--s: 27.3%; --e: 63.6%" aria-hidden="true"><i></i></span><span class="odl-hi">12°</span><span class="odl-sr">rain, 80% chance of rain, low 8°, high 12°</span></li><li><span class="odl-day">Sat</span><span class="odl-cond"><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="M16 14v6"/><path d="M8 14v6"/><path d="M12 16v6"/></svg><span class="odl-pop">60%</span></span><span class="odl-lo">7°</span><span class="odl-bar" style="--s: 18.2%; --e: 54.5%" aria-hidden="true"><i></i></span><span class="odl-hi">11°</span><span class="odl-sr">rain, 60% chance of rain, low 7°, high 11°</span></li><li><span class="odl-day">Sun</span><span class="odl-cond"><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg><span class="odl-pop">20%</span></span><span class="odl-lo">6°</span><span class="odl-bar" style="--s: 9.1%; --e: 63.6%" aria-hidden="true"><i></i></span><span class="odl-hi">12°</span><span class="odl-sr">cloudy, 20% chance of rain, low 6°, high 12°</span></li><li><span class="odl-day">Mon</span><span class="odl-cond"><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg><span class="odl-pop"></span></span><span class="odl-lo">5°</span><span class="odl-bar" style="--s: 0.0%; --e: 72.7%" aria-hidden="true"><i></i></span><span class="odl-hi">13°</span><span class="odl-sr">sunny, low 5°, high 13°</span></li><li><span class="odl-day">Tue</span><span class="odl-cond"><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m19.07 4.93-1.41 1.41"/><path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"/><path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z"/></svg><span class="odl-pop"></span></span><span class="odl-lo">7°</span><span class="odl-bar" style="--s: 18.2%; --e: 81.8%" aria-hidden="true"><i></i></span><span class="odl-hi">14°</span><span class="odl-sr">partly cloudy, low 7°, high 14°</span></li><li><span class="odl-day">Wed</span><span class="odl-cond"><svg class="odl-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg><span class="odl-pop">10%</span></span><span class="odl-lo">8°</span><span class="odl-bar" style="--s: 27.3%; --e: 90.9%" aria-hidden="true"><i></i></span><span class="odl-hi">15°</span><span class="odl-sr">cloudy, 10% chance of rain, low 8°, high 15°</span></li></ol>
    </div>
  </div>
</section>

More like this

ConsumerFriendly · Games

Leaderboard

A game or challenge leaderboard: a calm podium of the top three with photos and a crown for first, ranked rows with photos and how far each moved up or down, your own row pinned and highlighted, and a this week or all time switch.

B2BDense · Finance

Selectable table

A dense table with row checkboxes, status pills and a bar of bulk actions that appears, with a live count, as soon as a row is picked.

B2BQuiet · Finance

Approval panel

One bill waiting for approval: the amount, the policy that applies, who has approved so far, and what the balance will be after paying.

Your kit

Nothing here yet. Add parts with Add to kit, and a look if you want the whole system.

    Parts
    0
    Files to fetch
    0 KB
    Licence
    MIT
    Total
    Free, now and later

    How do you want it?

    Your prompt

    


    No sign-up. Nothing leaves your browser until you paste it.
    



    

    Free