Edit element

sa-get-started-pagebreak

Name (slug) Version

Category Status

Description When to use Source skill Rules (one per line, leading dash optional)

Visible Depth gradient background only, never an orange fill. Centered uppercase white title, Poppins 700, 40px desktop / 30px mobile, no eyebrow. Full-opacity white body copy, Poppins 500, 22px desktop / 18px mobile, max-width 760px. Single centered GET STARTED pill: 2px solid #D97706 border, Visible Depth fill, orange text, hover inverts to orange fill + navy text. Non-call button to /contact/ (no tel: href, no phone). Foundry #D97706 only (never legacy #F89C22). Mobile breakpoint 768px. Wrap in wp:html markers in WordPress.
Duplicate UVP guard (2026-06-15): Use only one primary UVP/payoff block with this same message on a page or post. Do not pair this element with another Get More, You Focus, BSG always-get-more, sa-fcta-blk, generic white CTA, or sa-bottom-get-more-fw block that repeats the same primary message. During QA, keep the strongest single block and replace any other same-message break with a different visual element or a different UVP angle.
UVP casing standard: use exactly "$0 Out-Of-Pocket Forever" for this benefit label, including title case and hyphens.

Live reference URL Deployment notes HTML CSS

.sa-gsb {
  width: 100%;
  background: linear-gradient(0deg, #000000 0%, #0B212D 100%);
  border-radius: 14px;
  padding: 64px 40px;
  text-align: center;
  box-sizing: border-box;
}
.sa-gsb * { font-family: Poppins, sans-serif; box-sizing: border-box; }
.sa-gsb h2 {
  margin: 0 0 20px;
  color: #FFFFFF;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}
.sa-gsb p {
  margin: 0 auto 36px;
  max-width: 760px;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.sa-gsb .sa-gsb-btn {
  display: inline-block;
  padding: 18px 48px;
  border: 2px solid #D97706;
  border-radius: 999px;
  background: linear-gradient(0deg, #000000 0%, #0B212D 100%);
  color: #D97706 !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.sa-gsb .sa-gsb-btn:hover {
  background: #D97706;
  color: #0B212D !important;
}
@media (max-width: 768px) {
  .sa-gsb { padding: 48px 24px; }
  .sa-gsb h2 { font-size: 30px; }
  .sa-gsb p { font-size: 18px; }
  .sa-gsb .sa-gsb-btn { padding: 16px 38px; font-size: 16px; }
}

Cancel