Heroes & Top-of-Page Beta

sa-mobile-truck-page-composition-notes v2026-06-15

Mobile truck-page composition reference from Sam screenshot. Documents the exact mobile stack: navy mobile header with logo, centered phone number and hamburger; full-width truck crash image; dark navy centered H1 panel; white body copy; compliant Call Now pill; closed On This Page dropdown; then a white body/snippet block with orange left rail.

Source skill: mobile-page-composition; source screenshot from current Codex thread; added via registry screenshot intake 2026-06-15 · Updated 2026-06-15 19:35:06

Edit

Live preview

Open ↗

When to use

Use as implementation notes when rebuilding or QAing mobile practice-area pages, especially truck accident pages. This is a composition contract, not a standalone hero to drop into desktop pages.

Rules & constraints

1. Mobile header must keep logo left, phone centered, menu icon right, all on Visible Depth navy.
2. Hero image sits directly under the mobile header and above the navy copy panel.
3. H1 is centered, all caps, white with one Foundry-orange phrase.
4. Button uses approved depth treatment. Avoid orange-fill buttons on final production unless a page-specific exception is approved.
5. On This Page dropdown starts closed on mobile.
6. The first content/snippet block below the TOC uses a white/light surface and a Foundry-orange left rail.
7. Treat this as a QA composition note. Reuse actual component rows for the individual pieces where available.

Live reference

https://aguiarinjurylawyers.com/practice-areas/truck-accident/

Deployment notes

Use this row during mobile screenshot QA to compare page order, spacing, and component selection. It intentionally references existing component families instead of replacing them: mobile header/site chrome, hero image, sa-depth-button, sa-toc, and sa-snippet-box.

HTML

<section class="sa-mobile-truck-comp" aria-label="Mobile truck page composition reference">
  <header class="sa-mobile-truck-comp__top"><span class="logo">A</span><a href="tel:2705131285">(270) 513-1285</a><button aria-label="Menu">☰</button></header>
  <img class="sa-mobile-truck-comp__image" src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/02/semi-trucks-row-parked.webp" alt="Truck accident scene" loading="lazy">
  <div class="sa-mobile-truck-comp__hero-copy"><h1>Are You Familiar With The Many Causes Of <span>Truck Accidents?</span></h1><p>Underrides, tire blowouts, defective brakes, unsecured loads, and many other preventable variables cause accidents nationwide daily.</p><a class="sa-mobile-truck-comp__call" href="tel:2705131285">Call Now</a></div>
  <details class="sa-mobile-truck-comp__toc"><summary>On This Page</summary></details>
  <div class="sa-mobile-truck-comp__snippet"><p>The most common causes of truck accidents in Kentucky include driver fatigue, distracted driving, unsafe loading, equipment failure, and preventable company safety violations.</p></div>
</section>

CSS

.sa-mobile-truck-comp{max-width:430px;margin:0 auto;background:#fff;font-family:Poppins,system-ui,sans-serif;color:#0B212D;box-shadow:0 0 0 1px rgba(11,33,45,.08);}.sa-mobile-truck-comp__top{height:96px;background:#0B212D;color:#fff;display:grid;grid-template-columns:64px 1fr 64px;align-items:center;padding:0 20px;gap:10px;}.sa-mobile-truck-comp__top .logo{width:42px;height:42px;border-radius:50%;border:3px solid #D97706;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:26px;color:#fff;}.sa-mobile-truck-comp__top a{color:#fff!important;text-decoration:none;text-align:center;font-size:22px;font-weight:800;}.sa-mobile-truck-comp__top button{justify-self:end;width:40px;height:40px;border:2px solid #fff;border-radius:4px;background:transparent;color:#fff;font-size:24px;line-height:1;}.sa-mobile-truck-comp__image{display:block;width:100%;height:190px;object-fit:cover;}.sa-mobile-truck-comp__hero-copy{background:#0B212D;color:#fff;text-align:center;padding:48px 28px 40px;}.sa-mobile-truck-comp__hero-copy h1{margin:0 0 20px;color:#fff!important;text-transform:uppercase;font-size:28px;line-height:1.18;font-weight:900;letter-spacing:0;}.sa-mobile-truck-comp__hero-copy h1 span{color:#D97706;display:inline;}.sa-mobile-truck-comp__hero-copy p{margin:0 auto 28px;color:#fff!important;font-size:18px;line-height:1.55;font-weight:600;}.sa-mobile-truck-comp__call{display:inline-flex;align-items:center;justify-content:center;min-width:174px;padding:15px 28px;border-radius:999px;background:linear-gradient(0deg,#000 0%,#0B212D 100%);border:2px solid #D97706;color:#fff!important;text-decoration:none;text-transform:uppercase;font-size:16px;font-weight:900;}.sa-mobile-truck-comp__toc{margin:36px 22px 30px;border-radius:6px;background:#0B212D;color:#fff;}.sa-mobile-truck-comp__toc summary{list-style:none;padding:20px 22px;font-size:16px;font-weight:800;display:flex;justify-content:space-between;align-items:center;}.sa-mobile-truck-comp__toc summary::after{content:"⌄";color:#D97706;font-size:18px;}.sa-mobile-truck-comp__snippet{margin:0 22px 42px;background:#f7f9fa;border-left:4px solid #D97706;padding:24px 24px 28px;}.sa-mobile-truck-comp__snippet p{margin:0;font-size:20px;line-height:1.55;font-weight:500;color:#0B212D;}