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