SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-sigquote-hairline
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Minimal signature-quote hairline. Foundry-orange left rule, no background, payoff on its own line, lowercase '- sam aguiar' sized to the quote. Default Poppins; add .sq-georgia for the serif version.
When to use
Low-footprint inline use: a sidebar, an email-signature block, or just above the footer on a page that already has a heavy hero.
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 Poppins; add 'sq-georgia' to .sq-hair for the Georgia/Times serif version. Run pre-publish-qa + playwright-visual-qa after deploy.
HTML
<div class="sq-hair"> <blockquote>Our job isn’t done until clients say,<br><em>‘Wow, that was an amazing experience.’</em></blockquote> <div class="sq-hair__by">- Sam Aguiar</div> </div>
CSS
.sq-hair{--nv:#0B212D;--or:#D97706;--ord:#B45309;font-family:'Poppins',system-ui,sans-serif;max-width:760px;border-left:3px solid var(--or);padding:6px 0 6px 26px;} .sq-hair.sq-georgia{font-family:Georgia,'Times New Roman',serif;} .sq-hair 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-hair em{font-style:italic;color:var(--ord);} .sq-hair__by{margin-top:14px;font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.1;color:var(--nv);}
Save changes
Cancel