# Business card strip (`biz-card`)
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?".
| | |
|---|---|
| Tag | Showcase |
| Size | 3.1 KB gzipped own code (JS 2.2 KB + CSS 0.9 KB; 6.8 KB raw) |
| Dependency | none (vanilla + native APIs) |
| Best for | Every VISIT and BOOK business: salons, barbers, restaurants, cafes, med spa, shops |
| Demo | `index.html` in this folder (live: https://wbl-code-lib.pages.dev/modules/biz-card/) |
## 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).
## Relation to the effects libraries
New: batch 2's star-fill animates a rating; this is the static, info-dense strip that holds rating + status + address together.
## Use it
Copy this folder to the site as `/wbl/biz-card/` (keep `vendor/` if there is one), then:
```html
```
Colours come from CSS variables with safe defaults: `--wbl-accent`, `--wbl-on-accent`, `--wbl-ink`, `--wbl-paper`,
`--wbl-card`, `--wbl-line`, `--wbl-muted`, `--wbl-band`, `--wbl-radius`, `--wbl-head` (see the library README for the
one-line bridge to the preview builder's `--a / --ink / --bg …`).
## License
Our code: WBL-owned, original. No third-party code.