Visit block

The last screen done right: Apple-style hours with today in bold and a live status, holiday closures, the address with a landmark, Get directions, Copy address, and a map that loads only when tapped.

Visit the studio

Tue–Sun

Closed Thanksgiving (Nov 26) and Christmas Day.

2214 W Sunset Blvd
Los Angeles, CA 90026

Echo Park, two doors from the laundromat · street parking on Lemoyne

Get directions

Sample address and hours (fictional business). Without JS, write the hours rows into the table on the server; the script then only marks today.

How to use it

Size

4.2 KB gzipped own code (JS 2.9 KB + CSS 1.3 KB; 10.2 KB raw)

Dependency

none (vanilla + native APIs)

Tag

Showcase

Best for

Every VISIT business (restaurants, cafes, salons, shops) and any storefront

What it does

Builds the hours table from JSON (or marks today in a server-rendered table), shows "Open now · closes 7 pm" in the business's time zone, honours data-closed-dates. Get directions opens Apple Maps on iPhone/iPad and Google Maps elsewhere. Copy address uses the Clipboard API with a small status toast. The map is a facade: a sized box with a "Show the map" button that injects the Google Maps embed (no API key) on tap, so the page doesn't pay ~500 KB of map scripts up front and nothing shifts.

When to use

Mobbin upgrade #10 (stronger last screen).

Replace the always-on iframe map in the builder's Visit section (also fixes the headless blank-map screenshots).

Don't

Show the map without the street as text.

Precise addresses for home-based businesses: use the service-area towns instead.

Repeat hours elsewhere on the page more than once (skill: say each fact once or twice).

Reduced motion, no JS, accessibility

Reduced motion: the toast appears without sliding.

No JS: the address, Directions link and any server-written hours show; the map button is hidden (link instead).

Real <table> with row headers; today has aria-current=date; status and toast are live regions.

Notes

data-map-q overrides the map query (e.g. the business name + city, which pins the listing).

Copy-ready snippet

<!-- Visit block (WBL Code Library) -->
<!-- in <head>: -->
<script>document.documentElement.classList.add('wbl-js')</script>
<link rel="stylesheet" href="/wbl/visit-block/module.css">
<script src="/wbl/visit-block/module.js" defer></script>

<!-- markup: -->
<section class="wbl-vb" data-wbl="visit-block" aria-labelledby="vb-h"
  data-address="2214 W Sunset Blvd, Los Angeles, CA 90026" data-closed-dates='["2026-11-26","2026-12-25"]'
  data-hours='{"tz":"America/Los_Angeles","mon":"closed","tue":"10:00-19:00","wed":"10:00-19:00","thu":"10:00-20:00","fri":"10:00-20:00","sat":"9:00-17:00","sun":"10:00-15:00"}'>
  <div>
    <h3 id="vb-h">Visit the studio</h3>
    <p class="wbl-vb-status" data-vb-status aria-live="polite">Tue–Sun</p>
    <table><caption class="wbl-vb-vh">Opening hours</caption><tbody data-vb-hours></tbody></table>
    <p class="wbl-vb-note">Closed Thanksgiving (Nov 26) and Christmas Day.</p>
  </div>
  <div>
    <address>2214 W Sunset Blvd<br>Los Angeles, CA 90026</address>
    <p class="wbl-vb-land">Echo Park, two doors from the laundromat · street parking on Lemoyne</p>
    <div class="wbl-vb-act">
      <a data-vb-dir href="https://www.google.com/maps/dir/?api=1&amp;destination=2214+W+Sunset+Blvd+Los+Angeles+CA">Get directions</a>
      <button type="button" data-vb-copy>Copy address</button>
      <span class="wbl-vb-toast" data-vb-toast role="status"></span>
    </div>
    <div class="wbl-vb-map" style="margin-top:24px"><button type="button" data-vb-map><span>Show the map</span><small>Loads Google Maps</small></button></div>
  </div>
</section>