Rating with count, a live Open now · closes 7 pm, and the street with Get directions, packed under the hero headline so the first phone screen answers "good? open? where?".
Every VISIT and BOOK business: salons, barbers, restaurants, cafes, med spa, shops
What it does
Three short rows (one dotted line on wide screens): Google rating with stars and count linking to the listing, live open/closed status computed from real hours in the business's time zone, and the street with a platform-aware Get directions link (Apple Maps on iPhone, Google elsewhere). The status slot is sized up front, so the live text replaces the static hours without moving anything.
When to use
Directly under the hero H1 on phones, above the fold (Mobbin top upgrade #1: Fresha venue page, DoorDash store info).
Hours come from the same data the page already has: the builder's window.WBLH works as is; or pass friendly JSON in data-hours.
Closed days and holidays: data-closed-dates='["2026-11-26"]'.
Don't
Show a rating under 4.3 or a count under 10: drop the rating row instead.
Invent the count or round 4.86 up to 4.9 (use the Google number as shown).
Add a red "Closed": closed reads calm ("Closed now · opens Tue 10 am"), per the skill rule.
Use it on service-area trades with no storefront: drop the address row (keep rating + hours).
Reduced motion, no JS, accessibility
No animation at all, so nothing to reduce.
No JS: the static hours line and plain Google Maps link show; nothing is hidden.
Stars are decorative (aria-hidden); the number and count are real text. Directions link is a 44 px tap target.
Status text updates every minute in the business's time zone (not the visitor's).
Notes
data-now="sat 16:20" fakes the clock for demos and tests.
Shares its hours core with Walk-in card and Visit block (copied in each, ~1 KB).
Copy-ready snippet
<!-- Business card strip (WBL Code Library) -->
<!-- in <head>: -->
<script>document.documentElement.classList.add('wbl-js')</script>
<link rel="stylesheet" href="/wbl/biz-card/module.css">
<script src="/wbl/biz-card/module.js" defer></script>
<!-- markup: -->
<div class="wbl-bc" data-wbl="biz-card"
data-address="2214 W Sunset Blvd, Los Angeles, CA 90026"
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 class="wbl-bc-in">
<a class="wbl-bc-row wbl-bc-rate" href="https://www.google.com/maps/search/?api=1&query=Juniper+Hair+Studio+Los+Angeles">
<span class="wbl-bc-stars" style="--r:4.9" aria-hidden="true"></span><b>4.9</b><span>212 Google reviews</span>
</a>
<p class="wbl-bc-row wbl-bc-oc" data-oc><span class="wbl-bc-dot" aria-hidden="true"></span><span data-oc-txt>Tue–Sun · from 9 am</span></p>
<p class="wbl-bc-row wbl-bc-where"><span>2214 W Sunset Blvd · Echo Park</span>
<a data-dir href="https://www.google.com/maps/dir/?api=1&destination=2214+W+Sunset+Blvd+Los+Angeles">Get directions</a></p>
</div>
</div>
