SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-mobile-truck-page-composition-notes
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
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.
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.
Source skill
Rules (one per line, leading dash optional)
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 URL
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;}
Save changes
Cancel