Components

Contact Info

The Contact page's label/value info list and its map-frame photo placeholder with overlaid location stamps.

Markup

<ul class="info-list">
  <li><span class="lbl">DISPATCH</span><a class="val" href="tel:+12165550181">(216) 555-0181</a></li>
  <li><span class="lbl">NIGHT LINE</span><span class="val">24/7, STAFFED</span></li>
  <li><span class="lbl">MAIL</span><a class="val" href="mailto:dispatch@ironhousemech.example">DISPATCH@IRONHOUSEMECH.EXAMPLE</a></li>
</ul>

Each row pairs a small mono .lbl caption with a .val value — either plain text or, where the value is actionable (a phone number, an email address), an <a class="val"> link.

Map frame

.map-frame is a fixed-aspect photo placeholder (the shopfront photo, in the demo content) with small location .stamp badges overlaid at the bottom — standing in for an embedded map without loading a real map provider's script. Replace the photo with an actual embedded map (Google Maps, OpenStreetMap) if you want an interactive map instead.

<div class="map-frame">
  <img src="img/contact-shopfront.jpg" width="1376" height="768" loading="lazy" alt="…">
  <div class="stamps">
    <span class="stamp">41.0308&deg; N, 81.5217&deg; W</span>
    <span class="stamp">INSIDE THE 60-MINUTE RING</span>
  </div>
</div>
<p class="map-cap">214 FOUNDRY ROW &middot; THE BAY DOOR&rsquo;S OPEN BY 6:40</p>

Inside .map-frame, the .stamp badge switches from its usual absolutely positioned corner placement (as used in Trades Rows) to sitting in normal flow inside the flex .stamps row, with a fluid font size and a hard single-line ellipsis truncation — both needed so a long custom label never wraps and gets clipped by the frame's fixed aspect ratio.