SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-sigquote-rule-glyph
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Signature-quote hairline with a small top-left quotation mark above an orange left rule, payoff on its own line, lowercase '- sam aguiar' sized to the quote. Default Georgia/Times; add .sq-poppins for the sans version.
When to use
Inline brand beat where a touch more presence than the plain hairline is wanted, without a full band.
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-rg for Poppins. Run pre-publish-qa + playwright-visual-qa after deploy.
HTML
<div class="sq-rg"> <span class="sq-rg__g">“</span> <blockquote>Our job isn’t done until clients say,<br><em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="sq-rg__by">- Sam Aguiar</div> </div>
CSS
.sq-rg{--nv:#0B212D;--or:#D97706;--ord:#B45309;font-family:Georgia,'Times New Roman',serif;max-width:760px;border-left:3px solid var(--or);padding:6px 0 6px 26px;} .sq-rg.sq-poppins{font-family:'Poppins',system-ui,sans-serif;} .sq-rg__g{font-size:56px;line-height:.5;color:var(--or);height:28px;display:block;margin-bottom:10px;} .sq-rg 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-rg em{font-style:italic;color:var(--ord);} .sq-rg__by{margin-top:14px;font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.1;color:var(--nv);}
Save changes
Cancel