SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-sigquote-band
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Signature founder-quote band. Full-width Visible Depth navy gradient with a centered Foundry-orange glow, a small top-left quotation mark, the first clause held on one line, the payoff broken beneath it, a short centered orange rule, and a lowercase '- sam aguiar' signature sized to match the quote. Ships with a white modifier (.sq-white) and a Poppins modifier (.sq-poppins).
When to use
A premium brand 'moment' band between content sections or above the footer. Dark by default; add class sq-white for a light-section context. Max one per page.
Source skill
Rules (one per line, leading dash optional)
Tokens only: Foundry orange #D97706, Foundry Deep #B45309, Navy #0B212D. Orange is text/rule/glyph only, never a fill. Quote wording is fixed: Our job isn't done until clients leave saying, 'Wow, that was an amazing experience.' Do not paraphrase. The payoff phrase 'Wow, that was an amazing experience.' always breaks onto its own line. Author line is intentionally lowercase '- sam aguiar' (founder signature, NOT a Google reviewer, so the ALL-CAPS reviewer-name rule does not apply here). Author line is set to the same font-size as the quote. One font family per instance. Default shown; swap with the .sq-poppins or .sq-georgia modifier. Never mix two families in one element.
Live reference URL
Deployment notes
Drop-in block. Dark by default. Add 'sq-white' to .sq-band for the light version; add 'sq-poppins' to render in Poppins instead of Georgia/Times. First line uses white-space:nowrap so it stays one line on desktop; allow it to wrap on narrow mobile if needed. Run pre-publish-qa + playwright-visual-qa (1280/390) after deploy.
HTML
<div class="sq-band"> <blockquote><span class="sq-band__l1">Our job isn’t done until clients say,</span><em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="sq-band__rule"></div> <div class="sq-band__by">- Sam Aguiar</div> </div>
CSS
.sq-band{--nv:#0B212D;--or:#D97706;--ord:#B45309;font-family:Georgia,'Times New Roman',serif;max-width:980px;margin:0 auto;background:linear-gradient(0deg,#000 0%,var(--nv) 100%);border-radius:28px;padding:60px 50px;text-align:center;position:relative;overflow:hidden;} .sq-band.sq-poppins{font-family:'Poppins',system-ui,sans-serif;} .sq-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 32%,rgba(217,119,6,.22),transparent 58%);pointer-events:none;} .sq-band__g{position:relative;font-size:74px;line-height:.5;color:var(--or);display:block;height:38px;margin-bottom:10px;text-align:center;} .sq-band blockquote{position:relative;font-weight:500;font-size:clamp(20px,2.6vw,32px);line-height:1.3;letter-spacing:-.01em;color:#fff;border:0;margin:0;} .sq-band__l1{display:block;white-space:nowrap;} .sq-band em{font-style:italic;color:var(--or);} .sq-band__rule{position:relative;width:54px;height:2px;background:var(--or);margin:24px auto 16px;} .sq-band__by{position:relative;font-weight:500;font-size:clamp(20px,2.6vw,32px);line-height:1.1;color:#fff;} .sq-band.sq-white{background:#fff;border:1px solid #e7eaed;} .sq-band.sq-white::before{background:radial-gradient(circle at 50% 32%,rgba(217,119,6,.08),transparent 60%);} .sq-band.sq-white blockquote,.sq-band.sq-white .sq-band__by{color:var(--nv);} .sq-band.sq-white em{color:var(--ord);}
Save changes
Cancel