SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-cva-sidebar-stack
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Modular sidebar stack: navy CTA card, partner attorney headshot card with orange top border, and a checkmark trust list.
When to use
Sidebar content for practice-area/location pages needing CTA + partner + trust list.
Source skill
Rules (one per line, leading dash optional)
- Foundry orange `#D97706` is for text, borders (up to 4px), dividers, and icon strokes only -- never a background fill. The 4px top border on `.sa-partner-inner` and 4px left border on `.sa-sidebar-trust` are approved structural border usages per SAIL v1 spec. - No em dashes in body copy. Production copy should follow the firm's em-dash style guide. - Phone number lives in `tel:` href only. Button label is text ("Call Now"), never the phone number itself. - Fonts: Poppins (UI) + Georgia/Times New Roman (not used in this block). The host page must load the Google Fonts link below. - Text always full opacity per sa-brand-decisions §3. - This is the VISUAL TRUTH SOURCE for SAIL Design Foundation v1 -- do not redesign or recolor. **Google Fonts (host page must load):** `https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap` 2026-06-15c: Sidebar trust-list rows must use a fixed grid marker column; do not absolute-position .ck or li::before markers.
Live reference URL
Deployment notes
Packaged from the commercial-vehicle-accidents page. Host page must load the Poppins Google Fonts link. VISUAL TRUTH SOURCE for SAIL Design Foundation v1 — do not redesign or recolor. 2026-06-15c: Repaired sidebar trust-list marker overlap guardrails in the registry source.
HTML
<!-- ==================== SIDEBAR STACK ==================== --> <aside class="sa-sidebar" role="complementary"> <div class="sa-sidebar-cta"> <h3>Free Case Review</h3> <p>Talk to our team 24/7. Most commercial vehicle cases can be qualified in under 10 minutes.</p> <!-- Firm main line 502-933-6545; swap a DNI tracking number on deploy if needed --> <a class="sa-sidebar-btn" href="tel:+15029336545"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>Call Now</a> <a class="sa-sidebar-btn" href="https://aguiarinjurylawyers.com/contact-us/">Start Online</a> </div> <div class="sa-partner-inner"> <div class="sa-partner-headshot"><img src="https://aguiarinjurylawyers.com/wp-content/uploads/2026/03/sam-aguiar-headshot-current.webp" alt="Sam Aguiar, Founder"></div> <p class="sa-partner-name">Sam Aguiar</p> <p class="sa-partner-role">Founder</p> <p class="sa-partner-area">Serving Louisville, Lexington, and<br>all of Kentucky.</p> </div> <aside class="sa-sidebar-trust"> <h4>Why Clients Choose<br>Sam Aguiar Injury Lawyers</h4> <ul> <li><span style="color:#D97706;font-weight:700;margin-right:8px;">✓</span>Forbes Best-In-State Top Lawyer</li> <li><span style="color:#D97706;font-weight:700;margin-right:8px;">✓</span>Super Lawyers 2017–2026</li> <li><span style="color:#D97706;font-weight:700;margin-right:8px;">✓</span>Bigger Share Guarantee®</li> <li><span style="color:#D97706;font-weight:700;margin-right:8px;">✓</span>1,000+ Five-Star Reviews</li> <li><span style="color:#D97706;font-weight:700;margin-right:8px;">✓</span>$0 Out-Of-Pocket Forever</li> </ul> </aside> </aside>
CSS
:root{ --sail-navy:#0B212D; --sail-navy-deep:#0a1520; --sail-orange:#D97706; --sail-orange-deep:#B45309; --sail-white:#fff; --sail-ink-light:#f7f9fa; --sail-mute:#5a6770; --sail-rule:rgba(11,33,45,.12); --card-border:#E5E9EC; --font-display:Georgia,'Times New Roman',serif; --font-ui:'Poppins',system-ui,sans-serif; --container:1180px; } /* ---------- Sidebar stack (block) ---------- */ .sa-sidebar{display:flex;flex-direction:column;gap:20px;} .sa-sidebar-cta{background:linear-gradient(0deg,#000 0%,var(--sail-navy) 100%);padding:28px 22px;border-radius:8px;text-align:center;} .sa-sidebar-cta h3{font-weight:700;font-size:22px;line-height:1.25;color:var(--sail-orange);margin:0 0 6px;} .sa-sidebar-cta p{font-weight:500;font-size:14px;line-height:1.45;color:#fff;margin:0 0 16px;} .sa-sidebar-btn{display:block;width:100%;padding:12px 16px;border:1.5px solid #fff;border-radius:6px;background:transparent;color:#fff;font-weight:700;font-size:16px;text-align:center;text-decoration:none;transition:color .15s,border-color .15s;margin-bottom:10px;} .sa-sidebar-btn:last-child{margin-bottom:0;} .sa-sidebar-btn:hover{color:var(--sail-orange);border-color:var(--sail-orange);} .sa-sidebar-btn svg{vertical-align:-3px;margin-right:8px;} .sa-partner-inner{background:#fff;border-top:4px solid var(--sail-orange);box-shadow:0 4px 14px rgba(0,0,0,.06);border-radius:0 0 10px 10px;padding:28px 22px;text-align:center;} .sa-partner-headshot{width:90px;height:90px;border-radius:50%;overflow:hidden;margin:0 auto 14px;border:3px solid var(--sail-orange);} .sa-partner-headshot img{width:100%;height:100%;object-fit:cover;} .sa-partner-name{font-size:18px;font-weight:700;margin:0 0 2px;} .sa-partner-role{font-size:12px;font-weight:600;color:var(--sail-orange-deep);text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px;} .sa-partner-area{font-size:13px;font-weight:500;opacity:1;margin:0 0 16px;} .sa-sidebar-trust{background:var(--sail-ink-light);border-left:4px solid var(--sail-orange);border-radius:0 8px 8px 0;padding:22px;} .sa-sidebar-trust h4{font-weight:700;font-size:18px;line-height:1.3;margin:0 0 14px;text-align:center;text-transform:uppercase;letter-spacing:.02em;} .sa-sidebar-trust ul{list-style:none;margin:0;padding:0;} .sa-sidebar-trust li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:10px;align-items:start;font-weight:500;font-size:15px;line-height:1.4;padding:10px 0;border-bottom:1px solid rgba(11,33,45,.08);} .sa-sidebar-trust li:last-child{border-bottom:0;} .sa-sidebar-trust li::before{position:static;color:var(--sail-orange);font-weight:700;line-height:1.4;} /* === ALL-CAPS + CENTERED (sa-copywriting §2, SCOPED 2026-06-10) === */ .sa-sidebar h1,.sa-sidebar h2,.sa-sidebar h3{text-transform:uppercase !important;text-align:center !important;} .sa-sidebar .cva-btn,.sa-sidebar .cva-btn--primary,.sa-sidebar .cva-btn--ghost,.sa-sidebar .sa-cta-banner-btn,.sa-sidebar .sa-sidebar-btn,.sa-sidebar .sa-side-btn,.sa-sidebar .sa-submit-btn,.sa-sidebar .sa-bsg-cta,.sa-sidebar .sa-hero-cta,.sa-sidebar .sa-partner-btn,.sa-sidebar .sa-btn,.sa-sidebar .sa-cta,.sa-sidebar .sa-cta-btn,.sa-sidebar .btn{text-transform:uppercase !important;text-align:center !important;}
Save changes
Cancel