SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-sidebar-quick-easy
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Sidebar-scoped Mini 2-up variant of the homepage Quick & Easy block. Lives as the after-trust closer in sa-sidebar-option-a optional block #7. Same shape and tokens as the homepage element, scaled down for the 340px sidebar column.
When to use
Practice-area and location-page sidebars where 'how easy this is' reinforces the CTA. Goes in the after-trust slot. Mutually exclusive with ticker, review-break, snippet, mini-bio in that same slot. DO NOT use on the homepage - the body already has the full-bleed version.
Source skill
Rules (one per line, leading dash optional)
1. Only ONE after-trust block per sidebar - never combine with ticker/review/snippet/mini-bio. 2. Numbers are #F89C22, all text is solid #FFFFFF (full opacity per sa-brand-decisions v1.1). 3. Locked copy: '3 Rings - Reach a live person' / '10 Min - Qualify your case.' 4. No icons, no animation. 5. H4 reads 'Quick & Easy' (ampersand entity) in 16px uppercase white centered. 6. Banned on the homepage. 7. Sits AFTER the trust list, not before.
Live reference URL
Deployment notes
Packaged in sa-sidebar-option-a v3.3 (2026-05-28) as the 7th optional add-on block. Reference doc: references/optional-quick-easy.md. Not yet deployed to a live sidebar - first deploy will set the canonical live URL.
HTML
<aside class="sa-sidebar-quick"> <h4>Quick & Easy</h4> <div class="sa-sidebar-quick-stats"> <div class="sa-sidebar-quick-card"> <div class="sa-sidebar-quick-num">3</div> <div class="sa-sidebar-quick-unit">Rings</div> <p class="sa-sidebar-quick-desc">Reach a live person</p> </div> <div class="sa-sidebar-quick-card"> <div class="sa-sidebar-quick-num">10</div> <div class="sa-sidebar-quick-unit">Min</div> <p class="sa-sidebar-quick-desc">Qualify your case</p> </div> </div> </aside>
CSS
.sa-sidebar-quick { background: linear-gradient(0deg, #000000 0%, #0B212D 100%); border-radius: 8px; padding: 22px 18px; text-align: center; } .sa-sidebar-quick h4 { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 700; color: #FFFFFF; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 16px; line-height: 1.2; text-align: center; } .sa-sidebar-quick-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .sa-sidebar-quick-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(217,119,6,0.25); border-radius: 8px; padding: 18px 8px 16px; text-align: center; } .sa-sidebar-quick-num { font-family: 'Poppins', sans-serif; font-size: 32px; font-weight: 700; color: #D97706; line-height: 1; margin: 0 0 6px; } .sa-sidebar-quick-unit { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 700; color: #FFFFFF; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.1; margin: 0 0 8px; } .sa-sidebar-quick-desc { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: #FFFFFF; line-height: 1.35; margin: 0; }
Save changes
Cancel