SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-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
Full-bleed 'Quick & Easy to Get Started' stat block. Two-up dark cards on the Visible Depth gradient showing how few rings and minutes it takes to engage the firm. No icons, no animation, no counter script. Numbers are orange, all text is full-opacity white.
When to use
Homepage and high-traffic landing pages where a fast, low-friction proof point belongs above the BSG/UVP block. One per page. Pair with the sidebar Mini 2-up variant only on different pages.
Source skill
Rules (one per line, leading dash optional)
1. Two-up grid only. No 3-up, no single-card. 2. Visible Depth gradient background (#000000 -> #0B212D). No flat navy. 3. Numbers are #F89C22 orange. All text is solid #FFFFFF. NO rgba on text, NO opacity property, NO filter:opacity (per sa-brand-decisions v1.1). 4. Card bg rgba(255,255,255,0.04) and border rgba(248,156,34,0.25) are allowed - rule covers text only. 5. Locked copy: '3 Rings - Average to reach a live person' / '10 Minutes - Average to qualify your case.' Do not invent new pairs. 6. Sizing: H2 clamp(28,3.2vw,41), Number clamp(34,3.8vw,48), Unit clamp(22,2.1vw,26), Descriptor clamp(16,1.7vw,20). 7. Mobile (<=600px): 1-col stack. 8. No icons. No counter animation. No SVGs.
Live reference URL
Deployment notes
Lives inside a WordPress HTML block. WP Rocket strips raw <style> blocks - use inline styles with !important for everything except the @media rule (which gets its own <style> tag). Replaced the prior Easy & Fast block on the homepage 2026-05-28.
HTML
<div id="sa-proof-wrap" style="background:linear-gradient(0deg,#000000 0%,#0B212D 100%) !important;padding:48px 4% 56px !important;font-family:'Poppins',sans-serif !important;overflow:hidden !important;"> <div id="sa-proof-inner" style="max-width:840px !important;margin:0 auto !important;text-align:center !important;"> <h2 style="font-family:'Poppins',sans-serif !important;font-size:clamp(28px,3.2vw,41px) !important;font-weight:600 !important;color:#FFFFFF !important;margin:0 0 32px !important;line-height:1.2 !important;text-align:center !important;">Quick & Easy to Get Started</h2> <div id="sa-quick-cards" style="display:grid !important;grid-template-columns:1fr 1fr !important;gap:20px !important;"> <div style="background:rgba(255,255,255,0.04) !important;border:1px solid rgba(248,156,34,0.25) !important;border-radius:12px !important;padding:32px 20px 28px !important;text-align:center !important;"> <div style="font-family:'Poppins',sans-serif !important;font-size:clamp(34px,3.8vw,48px) !important;font-weight:700 !important;color:#D97706 !important;line-height:1 !important;margin:0 0 10px !important;">3</div> <div style="font-family:'Poppins',sans-serif !important;font-size:clamp(22px,2.1vw,26px) !important;font-weight:700 !important;color:#FFFFFF !important;text-transform:uppercase !important;letter-spacing:1px !important;line-height:1.1 !important;margin:0 0 12px !important;">Rings</div> <div style="font-family:'Poppins',sans-serif !important;font-size:clamp(16px,1.7vw,20px) !important;font-weight:500 !important;color:#FFFFFF !important;line-height:1.4 !important;margin:0 !important;">Average to reach a live person</div> </div> <div style="background:rgba(255,255,255,0.04) !important;border:1px solid rgba(248,156,34,0.25) !important;border-radius:12px !important;padding:32px 20px 28px !important;text-align:center !important;"> <div style="font-family:'Poppins',sans-serif !important;font-size:clamp(34px,3.8vw,48px) !important;font-weight:700 !important;color:#D97706 !important;line-height:1 !important;margin:0 0 10px !important;">10</div> <div style="font-family:'Poppins',sans-serif !important;font-size:clamp(22px,2.1vw,26px) !important;font-weight:700 !important;color:#FFFFFF !important;text-transform:uppercase !important;letter-spacing:1px !important;line-height:1.1 !important;margin:0 0 12px !important;">Minutes</div> <div style="font-family:'Poppins',sans-serif !important;font-size:clamp(16px,1.7vw,20px) !important;font-weight:500 !important;color:#FFFFFF !important;line-height:1.4 !important;margin:0 !important;">Average to qualify your case</div> </div> </div> </div> </div> <style> @media (max-width: 600px) { #sa-quick-cards { grid-template-columns: 1fr !important; gap: 16px !important; } #sa-proof-wrap { padding: 40px 4% 44px !important; } } </style>
CSS
/* All styles are inline on the elements above. Only the @media rule lives in a <style> tag. */ @media (max-width: 600px) { #sa-quick-cards { grid-template-columns: 1fr !important; gap: 16px !important; } #sa-proof-wrap { padding: 40px 4% 44px !important; } } /* === ALL-CAPS + CENTERED (sa-copywriting §2, SCOPED 2026-06-10) === */ #sa-proof-wrap h1,#sa-proof-wrap h2,#sa-proof-wrap h3{text-transform:uppercase !important;text-align:center !important;} #sa-proof-wrap .cva-btn,#sa-proof-wrap .cva-btn--primary,#sa-proof-wrap .cva-btn--ghost,#sa-proof-wrap .sa-cta-banner-btn,#sa-proof-wrap .sa-sidebar-btn,#sa-proof-wrap .sa-side-btn,#sa-proof-wrap .sa-submit-btn,#sa-proof-wrap .sa-bsg-cta,#sa-proof-wrap .sa-hero-cta,#sa-proof-wrap .sa-partner-btn,#sa-proof-wrap .sa-btn,#sa-proof-wrap .sa-cta,#sa-proof-wrap .sa-cta-btn,#sa-proof-wrap .btn{text-transform:uppercase !important;text-align:center !important;}
Save changes
Cancel