Sidebar Beta

sa-sidebar-guidepost-card v2026-06-15

Exact 336px Sidebar Guidepost Card from Sam screenshot: compact related-pages utility card with Foundry-orange top border, centered "Related Pages" heading, divider rows, orange chevrons, and navy Title Case link labels. Designed for sticky right rails on practice-area and location pages.

Source skill: sa-design-elements; source screenshot from current Codex thread; added via registry screenshot intake 2026-06-15 · Updated 2026-06-15 19:35:05

Edit

Live preview

Open ↗

When to use

Use in a 336px sticky sidebar when the page needs a short, high-relevance guidepost list to adjacent practice-area, trucking, insurance, or location pages. Place below primary CTA/form/trust blocks, not above the main conversion stack.

Rules & constraints

1. Width target is 336px. It may fill its container but should not exceed the sidebar rail width.
2. Use a 4px Foundry-orange top border only. Do not add an orange background fill.
3. Heading is centered, all caps, and exactly "Related Pages" unless a page-specific label is approved.
4. Links are navy, Title Case, and separated by light dividers. Chevrons are Foundry orange.
5. Keep to 4-7 links. If the list is longer, use sa-related-resources-card instead.
6. This is the compact guidepost card. Do not confuse it with the larger bottom Related Resources card.

Deployment notes

This row captures the exact mockup card that was missing from the registry. If promoted to Live, reconcile with sa-related-resources-card placement rules so agents know when to use compact sidebar guideposts versus bottom-sidebar related resources.

HTML

<nav class="sa-sidebar-guidepost" aria-label="Related pages">
  <h2>Related Pages</h2>
  <ul>
    <li><a href="/practice-areas/truck-accident/">Kentucky Truck Accident Lawyer</a></li>
    <li><a href="/practice-areas/wrongful-death/">Trucking Wrongful Death</a></li>
    <li><a href="/truck-talk/trucking-insurance/">Trucking Insurance Coverage</a></li>
    <li><a href="/resources/causes-of-truck-crashes/">Causes Of Truck Crashes</a></li>
    <li><a href="/practice-areas/delivery-vehicle-accidents/">Delivery Vehicle Crashes</a></li>
  </ul>
</nav>

CSS

.sa-sidebar-guidepost{width:100%;max-width:336px;margin:0 auto;background:#f7f9fa;border:1px solid #dde5ea;border-top:4px solid #D97706;border-radius:10px;padding:30px 24px 24px;font-family:Poppins,system-ui,sans-serif;color:#0B212D;box-sizing:border-box;}.sa-sidebar-guidepost h2{margin:0 0 18px;color:#0B212D!important;text-align:center;text-transform:uppercase;font-size:15px;line-height:1.25;font-weight:800;letter-spacing:.08em;}.sa-sidebar-guidepost ul{list-style:none;margin:0;padding:0;}.sa-sidebar-guidepost li{border-bottom:1px solid rgba(11,33,45,.12);}.sa-sidebar-guidepost li:last-child{border-bottom:0;}.sa-sidebar-guidepost a{display:grid;grid-template-columns:14px 1fr;gap:8px;align-items:center;padding:13px 0;text-decoration:none;color:#0B212D!important;font-size:14px;font-weight:800;line-height:1.35;}.sa-sidebar-guidepost a::before{content:"›";color:#D97706;font-weight:900;font-size:16px;line-height:1;}.sa-sidebar-guidepost a:hover,.sa-sidebar-guidepost a:focus{color:#D97706!important;}@media(max-width:960px){.sa-sidebar-guidepost{max-width:none;}}