Sidebar Live

sa-sidebar-quick-easy v2026-05-29

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.

Source skill: sa-sidebar-option-a · Updated 2026-06-02 23:15:46

Edit

Live preview

Open ↗

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.

Rules & constraints

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

https://aguiarinjurylawyers.com/ (homepage full-bleed parent element)

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