Content Blocks Live

sa-process-steps v2026-06-10

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.

Source skill: sa-template-reference · Updated 2026-06-10 16:47:51

Edit

Live preview

Open ↗

When to use

How-it-works sections on practice-area and location pages.

Rules & constraints

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

https://aguiarinjurylawyers.com/

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;}