SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-sigquote-centered
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Centered signature quote between two full-width hairlines, with a short centered Foundry-orange rule and a lowercase '- sam aguiar' sized to the quote. Default Georgia/Times; add .sq-poppins for the sans version.
When to use
A centered, quiet brand beat mid-article or between sections where a full dark band would be too loud.
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. Default Georgia/Times; add 'sq-poppins' to .sq-cent for the Poppins version. Run pre-publish-qa + playwright-visual-qa after deploy.
HTML
<div class="sq-cent"> <blockquote>Our job isn’t done until clients say,<br><em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="sq-cent__rule"></div> <div class="sq-cent__by">- Sam Aguiar</div> </div>
CSS
.sq-cent{--nv:#0B212D;--or:#D97706;--ord:#B45309;font-family:Georgia,'Times New Roman',serif;max-width:760px;margin:0 auto;text-align:center;border-top:1px solid #e1e5e8;border-bottom:1px solid #e1e5e8;padding:32px 12px;} .sq-cent.sq-poppins{font-family:'Poppins',system-ui,sans-serif;} .sq-cent blockquote{font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.35;letter-spacing:-.01em;color:var(--nv);border:0;margin:0;} .sq-cent em{font-style:italic;color:var(--ord);} .sq-cent__rule{width:46px;height:2px;background:var(--or);margin:18px auto 0;} .sq-cent__by{margin-top:16px;font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.1;color:var(--nv);}
Save changes
Cancel