Edit element

sa-related-resources-card

Name (slug) Version

Category Status

Description When to use Source skill Rules (one per line, leading dash optional)

- Light gray #f7f9fa surface only, no white card background for this element.
- Border is only the 4px Foundry orange #D97706 left rail. No navy top, right, or bottom border.
- Heading and every link label render in Title Case. Do not ship lowercase labels.
- Links default to Aguiar Navy #0B212D and hover/focus to Foundry orange #D97706.
- Keep the heading text: Related Resources From Sam Aguiar Injury Lawyers unless a page-specific heading is approved.
- Replace links per page, but use descriptive internal anchor text and clean URLs.
- Placement rule, 2026-06-15d: Related Resources is a sidebar-bottom element by default whenever a sidebar exists. Place it at the bottom of aside.sa-sidebar or the approved sidebar variant, after CTA/form/trust/video/founder blocks. Use the below-FAQ constrained endcap only when no sidebar exists or a specialty page cannot safely host it in the sidebar. Never place resources above FAQ, mid-body, or between substantive body sections and FAQ.
- Use .sa-main-content only for legacy cleanup before migrating into the sidebar, the sidebar for the default right-rail variant, or a constrained page-wrapper endcap after the content/sidebar grid only as the no-sidebar fallback.
- Typography rule, 2026-06-15d: keep the block full-width within its placement container. Main/endcap heading stays clamp(20px,2vw,26px) and links stay clamp(15px,1.05vw,17px). Sidebar heading is 16px and sidebar links are 14px so the element reads as a utility card, not a body section.

Live reference URL Deployment notes

Before inserting, title-case the link labels and select links that are genuinely related to the current page. Use high-specificity overrides only when older .sa-callout-light or legacy sitewide styles force orange default links or navy full borders. Verify desktop and 390px mobile rendering.
2026-06-15: Placement tightened after truck accident page QA. Resources must sit below FAQs or in the sidebar, and should be the final utility block before any footer-adjacent full-width CTA/proof element.
2026-06-15 follow-up: final truck accident fix used the footer-adjacent endcap pattern after the content/sidebar grid because no bottom full-width CTA was present.
2026-06-15c: Reduced oversized heading and link typography after live Truck Talk QA. Updated affected embedded page/post CSS and removed the Truck Talk BSG ribbon strip from /truck-talk/trucking-insurance/.
2026-06-15d: Sam approved sidebar-bottom as the default placement when Related Resources is used. Added sidebar-specific typography and spacing. Below-FAQ endcap remains fallback only when no sidebar exists or a specialty template cannot safely host the block in the sidebar.

HTML

<section class="sa-related-resources-card" aria-labelledby="sa-related-resources-title">
  <h2 id="sa-related-resources-title">Related Resources From Sam Aguiar Injury Lawyers</h2>
  <ul>
    <li><a href="https://aguiarinjurylawyers.com/practice-areas/truck-accident/">Truck Accident Representation</a></li>
    <li><a href="https://aguiarinjurylawyers.com/practice-areas/delivery-vehicle-accidents/amazon-delivery-accidents/">Amazon Delivery Accident Cases</a></li>
    <li><a href="https://aguiarinjurylawyers.com/practice-areas/rideshare-accident-lawyer/">Uber And Lyft Rideshare Accidents</a></li>
    <li><a href="https://aguiarinjurylawyers.com/about-us/bigger-share-guarantee/">Bigger Share Guarantee</a></li>
    <li><a href="https://aguiarinjurylawyers.com/about-us/our-results/">Client Case Results</a></li>
    <li><a href="https://aguiarinjurylawyers.com/practice-areas/delivery-vehicle-accidents/">Delivery Vehicle Accident Resource</a></li>
    <li><a href="https://aguiarinjurylawyers.com/locations/louisville/">Louisville Car Accident Team</a></li>
    <li><a href="https://aguiarinjurylawyers.com/locations/lexington/">Lexington Car Accident Lawyers</a></li>
  </ul>
</section>

CSS

.sa-related-resources-card{background:#f7f9fa;color:#0B212D;border-left:4px solid #D97706;border-top:0;border-right:0;border-bottom:0;border-radius:0 8px 8px 0;padding:clamp(22px,3vw,34px) clamp(22px,3vw,36px);margin:32px 0;font-family:Poppins,sans-serif;box-sizing:border-box;}
.sa-related-resources-card h2{color:#0B212D;font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(20px,2vw,26px);line-height:1.25;text-align:center;text-transform:none;margin:0 0 18px;letter-spacing:0;}
.sa-related-resources-card ul{max-width:760px;margin:0 auto;padding-left:22px;}
.sa-related-resources-card li{color:#0B212D;font-family:Poppins,sans-serif;font-weight:500;font-size:clamp(15px,1.05vw,17px);line-height:1.55;margin:0 0 10px;}
.sa-related-resources-card li:last-child{margin-bottom:0;}
.sa-related-resources-card a{color:#0B212D;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:600;}
.sa-related-resources-card a:hover,.sa-related-resources-card a:focus{color:#D97706;text-decoration-color:#D97706;}
.sa-sidebar .sa-related-resources-card,.sa-sidebar-optb-poppins .sa-related-resources-card{padding:22px 18px;margin:20px 0 0;}
.sa-sidebar .sa-related-resources-card h2,.sa-sidebar-optb-poppins .sa-related-resources-card h2{font-size:16px;line-height:1.3;margin-bottom:12px;}
.sa-sidebar .sa-related-resources-card ul,.sa-sidebar-optb-poppins .sa-related-resources-card ul{max-width:none;padding-left:18px;}
.sa-sidebar .sa-related-resources-card li,.sa-sidebar-optb-poppins .sa-related-resources-card li{font-size:14px;line-height:1.45;margin-bottom:8px;}
@media (max-width:768px){.sa-related-resources-card{padding:24px 18px;margin:28px 0}.sa-related-resources-card h2{font-size:20px;margin-bottom:14px}.sa-related-resources-card ul{padding-left:20px}.sa-related-resources-card li{font-size:15.5px;margin-bottom:9px}}

Cancel