SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-process-steps
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Four-step numbered process block. Each step has a large numeral, short title, one-sentence description. Light background, navy text. Replaces stock 'Our Process' blocks.
When to use
How-it-works sections on practice-area and location pages.
Source skill
Rules (one per line, leading dash optional)
1. Four steps, numbered, top-to-bottom flow. 2. Each step: large numeral, short title, one-sentence description. 3. Light background, navy text — never dark variant. 4. Replaces stock 'Our Process' blocks.
Live reference URL
Deployment notes
Copy verbatim. Replace bracketed placeholders. Run pre-publish-qa, playwright-visual-qa (desktop 1280 / mobile 390), sa-content-rot-detector, and sa-css-leak-guard after deploy. Log via content-publish-logger and notify search engines via batch-indexnow. See the source skill for full rules.
HTML
<section class="sa-steps"> <div class="sa-steps-inner"> <h2 class="sa-steps-h2">[SECTION TITLE - e.g., How the Bigger Share Guarantee® Works]</h2> <ol class="sa-steps-list"> <li> <h3>[Step 1 Title]</h3> <p>[1-2 sentence description of what happens at this step.]</p> </li> <li> <h3>[Step 2 Title]</h3> <p>[1-2 sentence description.]</p> </li> <li> <h3>[Step 3 Title]</h3> <p>[1-2 sentence description.]</p> </li> <li> <h3>[Step 4 Title]</h3> <p>[1-2 sentence description.]</p> </li> </ol> </div> </section>
CSS
.sa-steps{background:#f7f9fa;padding:64px 20px} .sa-steps-inner{max-width:1100px;margin:0 auto} .sa-steps-h2{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(26px,3.5vw,34px);color:#0B212D;text-align:center;margin:0 0 40px} .sa-steps-list{list-style:none;counter-reset:step;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px} .sa-steps-list li{counter-increment:step;background:#fff;border-radius:8px;padding:60px 22px 22px;position:relative;box-shadow:0 4px 12px rgba(11,33,45,.06)} .sa-steps-list li::before{content:counter(step);position:absolute;left:50%;top:-22px;transform:translateX(-50%);width:44px;height:44px;background:#0B212D;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Poppins,sans-serif;font-weight:700;font-size:20px;border:4px solid #f7f9fa} .sa-steps-list h3{font-family:Poppins,sans-serif;font-weight:600;font-size:17px;color:#0B212D;text-align:center;margin:0 0 10px} .sa-steps-list p{font-family:Poppins,sans-serif;font-weight:500;font-size:14px;line-height:1.55;color:#0B212D;text-align:center;margin:0} /* === ALL-CAPS + CENTERED (sa-copywriting §2, SCOPED 2026-06-10) === */ .sa-steps h1,.sa-steps h2,.sa-steps h3{text-transform:uppercase !important;text-align:center !important;} .sa-steps .cva-btn,.sa-steps .cva-btn--primary,.sa-steps .cva-btn--ghost,.sa-steps .sa-cta-banner-btn,.sa-steps .sa-sidebar-btn,.sa-steps .sa-side-btn,.sa-steps .sa-submit-btn,.sa-steps .sa-bsg-cta,.sa-steps .sa-hero-cta,.sa-steps .sa-partner-btn,.sa-steps .sa-btn,.sa-steps .sa-cta,.sa-steps .sa-cta-btn,.sa-steps .btn{text-transform:uppercase !important;text-align:center !important;}
Save changes
Cancel