Edit element

sa-signature-quote-poppins

Name (slug) Version

Category Status

Description When to use Source skill Rules (one per line, leading dash optional) Live reference URL Deployment notes HTML

<section class="spec">
    <div class="spec__bar"><h2>V1 &middot; Editorial pull-quote</h2><span class="tag tag--web">Web &middot; inline</span></div>
    <p class="spec__note">For About, story, and case-result pages. Drops into a content column between sections. Oversized orange quote glyph, Poppins, signature attribution.</p>
    <div class="spec__stage">
      <figure class="q1">
        <span class="q1__glyph">&ldquo;</span>
        <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote>
        <figcaption class="q1__by"><span class="q1__sig">- Sam Aguiar</span></figcaption>
      </figure>
    </div>
  </section>

<section class="spec">
    <div class="spec__bar"><h2>V2 &middot; Full-width dark section</h2><span class="tag tag--web">Web &middot; section band</span></div>
    <p class="spec__note">Full-bleed band between page sections or above the footer. Visible Depth gradient with a centered radial orange glow. The firm's premium "moment" treatment.</p>
    <div class="spec__stage">
      <figure class="q2">
        <span class="q2__glyph">&ldquo;</span>
        <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote>
        <div class="q2__rule"></div>
        <div class="q2__by">- SAM AGUIAR</div>
      </figure>
    </div>
  </section>

<section class="spec">
    <div class="spec__bar"><h2>V3 &middot; Square &nbsp;|&nbsp; V4 &middot; Story</h2><span class="tag tag--social">Social &middot; 1:1 + 9:16</span></div>
    <p class="spec__note">Ready-to-post sizes. V3 is the 1080&times;1080 feed card (Instagram, Facebook, LinkedIn). V4 is the 1080&times;1920 vertical for Stories and Reels covers. Same gradient and glow as the web band so feed and site feel like one system.</p>
    <div class="spec__stage" style="gap:34px;flex-wrap:wrap;">
      <figure class="q3">
        <span class="q3__glyph">&ldquo;</span>
        <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote>
        <figcaption class="q3__by"><span class="bar"></span><span class="name">- SAM AGUIAR</span></figcaption>
      </figure>
      <figure class="q4">
        <span class="q4__glyph">&ldquo;</span>
        <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote>
        <div class="q4__rule"></div>
        <div class="q4__name">- SAM AGUIAR</div>
      </figure>
    </div>
  </section>

<section class="spec">
    <div class="spec__bar"><h2>V5 &middot; Light square, highlight word</h2><span class="tag tag--social">Social &middot; 1:1 light</span></div>
    <p class="spec__note">Light alternate for feeds that skew bright. Pulls "Wow, that was amazing." onto its own line in orange italic so the payoff reads first in the scroll.</p>
    <div class="spec__stage">
      <figure class="q5">
        <blockquote>Our job isn’t done until clients leave saying,<span class="pop">‘Wow, that was an amazing experience.’</span></blockquote>
        <figcaption class="q5__by"><span class="bar"></span><span class="name">- SAM AGUIAR</span></figcaption>
      </figure>
    </div>
  </section>

<section class="spec">
    <div class="spec__bar"><h2>V6 &middot; Minimal hairline</h2><span class="tag tag--web">Web &middot; sidebar / footer</span></div>
    <p class="spec__note">Low-footprint version for a sidebar, email signature block, or above the footer. Orange rule on the left, no background. Use when the page already has a heavy hero.</p>
    <div class="spec__stage" style="justify-content:flex-start;">
      <figure class="q6">
        <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote>
        <div class="q6__by">- SAM AGUIAR</div>
      </figure>
    </div>
  </section>

<section class="spec">
    <div class="spec__bar"><h2>More like V6 &middot; minimal hairline family</h2><span class="tag tag--web">Web &middot; inline / sidebar</span></div>
    <p class="spec__note">Four restrained takes on the V6 look for inline body, a sidebar, or an email signature. Low footprint, the quote carries it. M1 serif signature, M2 stacked hairlines centered, M3 inverted navy, M4 quote-glyph only.</p>
    <div class="spec__stage" style="flex-direction:column;gap:36px;align-items:stretch;">
      <figure class="m m1">
        <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote>
        <div class="by">- Sam Aguiar</div>
      </figure>
      <figure class="m m2">
        <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote>
        <div class="rule"></div>
        <div class="by">- SAM AGUIAR</div>
      </figure>
      <figure class="m m3">
        <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote>
        <div class="by">- SAM AGUIAR</div>
      </figure>
      <figure class="m m4">
        <span class="glyph">&ldquo;</span>
        <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote>
        <div class="by">- SAM AGUIAR</div>
      </figure>
    </div>
  </section>

<section class="spec">
    <div class="spec__bar"><h2>V7 &middot; Dark &nbsp;|&nbsp; V8 &middot; Light</h2><span class="tag tag--web">Web &middot; trust-strip page break</span></div>
    <p class="spec__note">Slim full-width band that sits between two content sections as a divider. Hairlines run out to both edges so the quote reads as a page break. Dark version (Visible Depth) for a strong beat; light version for a quiet one. Collapses to a centered stack on mobile.</p>
    <div class="spec__stage" style="flex-direction:column;gap:26px;">
      <figure class="q7">
        <span class="q7__line"></span>
        <div class="q7__mid">
          <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote>
          <div class="q7__by">- SAM AGUIAR</div>
        </div>
        <span class="q7__line"></span>
      </figure>
      <figure class="q8">
        <span class="q8__line"></span>
        <div class="q8__mid">
          <blockquote>Our job isn’t done until clients leave saying, <em>‘Wow, that was an amazing experience.’</em></blockquote>
          <div class="q8__by">- SAM AGUIAR</div>
        </div>
        <span class="q8__line"></span>
      </figure>
    </div>
  </section>

</div>

CSS

:root{
  --sail-navy:#0B212D; --sail-navy-deep:#0a1520; --sail-navy-mid:#0B212D;
  --sail-orange:#D97706; --sail-orange-deep:#B45309; --sail-white:#FFFFFF;
  --sail-ink-light:#f7f9fa; --sail-ink-soft:#fafafa;
  --font-display:'Poppins',system-ui,sans-serif; --font-ui:'Poppins',system-ui,sans-serif;
  --r-md:12px; --r-lg:14px; --r-xl:20px; --r-2xl:28px; --r-pill:999px;
}
.sa-quote-grid,.sa-quote-grid *{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-ui);background:#eceef0;color:var(--sail-navy);line-height:1.6;-webkit-font-smoothing:antialiased;}

/* ---- page chrome ---- */
.page-head{max-width:1180px;margin:0 auto;padding:56px 32px 8px;}
.page-head .kicker{font-family:var(--font-ui);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--sail-orange-deep);}
.page-head h1{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,4.4vw,50px);letter-spacing:-.01em;margin:10px 0 14px;}
.page-head p{max-width:680px;font-weight:400;color:#3a4a55;font-size:16px;}
.grid{max-width:1180px;margin:0 auto;padding:24px 32px 80px;display:grid;gap:40px;}
.spec{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(11,33,45,.10);}
.spec__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid #e7eaed;}
.spec__bar h2{font-family:var(--font-ui);font-size:15px;font-weight:600;letter-spacing:-.01em;}
.spec__bar .tag{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);}
.tag--web{background:rgba(11,33,45,.08);color:var(--sail-navy);}
.tag--social{background:rgba(217,119,6,.16);color:var(--sail-orange-deep);}
.spec__note{padding:12px 20px 0;font-size:13px;color:#5a6770;}
.spec__stage{padding:28px;display:flex;justify-content:center;}

/* ============ V1 - Web inline editorial pull-quote ============ */
.q1{max-width:820px;background:var(--sail-white);padding:8px 8px 8px 0;position:relative;}
.q1__glyph{font-family:var(--font-display);font-weight:400;font-size:120px;line-height:.7;color:var(--sail-orange);height:64px;display:block;}
.q1 blockquote{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3.4vw,40px);line-height:1.22;letter-spacing:-.01em;color:var(--sail-navy);margin:8px 0 22px;}
.q1 blockquote em{font-style:italic;color:var(--sail-orange-deep);}
.q1__by{display:flex;align-items:center;gap:14px;border-top:1px solid #e1e5e8;padding-top:18px;}
.q1__sig{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:26px;color:var(--sail-navy);}
.q1__role{font-size:13px;font-weight:500;letter-spacing:.04em;color:#5a6770;text-transform:uppercase;}

/* ============ V2 - Web dark full-width section (Visible Depth + glow) ============ */
.q2{width:100%;max-width:980px;background:linear-gradient(0deg,#000 0%,var(--sail-navy) 100%);border-radius:var(--r-2xl);padding:72px 56px;text-align:center;position:relative;overflow:hidden;}
.q2::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 32%,rgba(217,119,6,.22),transparent 58%);pointer-events:none;}
.q2__eye{position:relative;font-weight:600;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--sail-orange);margin-bottom:22px;}
.q2__glyph{position:relative;font-family:var(--font-display);font-weight:400;font-size:80px;line-height:.5;color:var(--sail-orange);display:block;height:40px;margin-bottom:12px;text-align:left;}
.q2 blockquote{position:relative;font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.8vw,46px);line-height:1.22;letter-spacing:-.01em;color:#fff;max-width:760px;margin:0 auto;}
.q2 blockquote em{font-style:italic;color:var(--sail-orange);}
.q2__rule{position:relative;width:54px;height:2px;background:var(--sail-orange);margin:30px auto 18px;}
.q2__by{position:relative;font-family:var(--font-display);font-weight:500;font-size:18px;letter-spacing:.02em;color:#fff;}
.q2__role{position:relative;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF;margin-top:4px;}

/* ============ V3 - Social square 1:1 ============ */
.q3{width:420px;height:420px;background:linear-gradient(0deg,#000 0%,var(--sail-navy) 100%);border-radius:var(--r-xl);padding:38px 36px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;}
.q3::before{content:"";position:absolute;top:-40px;right:-40px;width:240px;height:240px;background:radial-gradient(circle,rgba(217,119,6,.30),transparent 62%);}
.q3__glyph{position:relative;font-family:var(--font-display);font-size:80px;line-height:.6;color:var(--sail-orange);height:38px;}
.q3 blockquote{position:relative;font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.28;letter-spacing:-.01em;color:#fff;}
.q3 blockquote em{font-style:italic;color:var(--sail-orange);}
.q3__by{position:relative;display:flex;align-items:center;gap:12px;margin-top:22px;}
.q3__by .bar{width:30px;height:2px;background:var(--sail-orange);}
.q3__by .name{font-weight:600;font-size:15px;color:#fff;}
.q3__by .role{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#FFFFFF;}

/* ============ V4 - Social story 9:16 ============ */
.q4{width:260px;height:462px;background:linear-gradient(0deg,#000 0%,var(--sail-navy) 100%);border-radius:var(--r-xl);padding:40px 30px;display:flex;flex-direction:column;justify-content:center;text-align:left;position:relative;overflow:hidden;}
.q4::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(217,119,6,.22),transparent 60%);}
.q4__eye{position:relative;font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sail-orange);margin-bottom:18px;}
.q4__glyph{position:relative;font-family:var(--font-display);font-weight:400;font-size:96px;line-height:.5;color:var(--sail-orange);display:block;height:46px;margin-bottom:6px;}
.q4 blockquote{position:relative;font-family:var(--font-display);font-weight:500;font-size:25px;line-height:1.25;letter-spacing:-.01em;color:#fff;}
.q4 blockquote em{font-style:italic;color:var(--sail-orange);}
.q4__rule{position:relative;width:40px;height:2px;background:var(--sail-orange);margin:22px 0 14px;}
.q4__name{position:relative;font-family:var(--font-display);font-weight:500;font-size:16px;color:#fff;}
.q4__role{position:relative;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#FFFFFF;margin-top:3px;}

/* ============ V5 - Light social square, big highlight word ============ */
.q5{width:420px;height:420px;background:var(--sail-ink-light);border-radius:var(--r-xl);padding:46px 42px;display:flex;flex-direction:column;justify-content:center;position:relative;border:1px solid #e7eaed;}
.q5__eye{font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sail-orange-deep);margin-bottom:18px;}
.q5 blockquote{font-family:var(--font-display);font-weight:500;font-size:30px;line-height:1.22;letter-spacing:-.01em;color:var(--sail-navy);}
.q5 .pop{display:block;font-style:italic;font-weight:500;color:var(--sail-orange-deep);font-size:40px;margin-top:6px;}
.q5__by{margin-top:26px;display:flex;align-items:center;gap:12px;}
.q5__by .bar{width:30px;height:2px;background:var(--sail-orange);}
.q5__by .name{font-weight:600;font-size:15px;color:var(--sail-navy);}
.q5__by .role{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#5a6770;}

/* ============ V6 - Minimal hairline (sidebar / footer / inline) ============ */
.q6{max-width:760px;border-left:3px solid var(--sail-orange);padding:6px 0 6px 26px;}
.q6 blockquote{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.3;letter-spacing:-.01em;color:var(--sail-navy);}
.q6 blockquote em{font-style:italic;color:var(--sail-orange-deep);}
.q6__by{margin-top:14px;font-size:13px;font-weight:600;letter-spacing:.04em;color:#5a6770;text-transform:uppercase;}
.q6__by span{color:var(--sail-orange-deep);}

/* ============ V6 family - minimal hairline variations ============ */
.m{max-width:760px;}
.m blockquote{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.3;letter-spacing:-.01em;color:var(--sail-navy);}
.m blockquote em{font-style:italic;color:var(--sail-orange-deep);}
/* M1 left rule + serif signature */
.m1{border-left:3px solid var(--sail-orange);padding:6px 0 6px 26px;}
.m1 .by{margin-top:14px;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:20px;color:var(--sail-navy);}
/* M2 stacked hairlines, centered */
.m2{text-align:center;border-top:1px solid #e1e5e8;border-bottom:1px solid #e1e5e8;padding:32px 12px;}
.m2 .rule{width:46px;height:2px;background:var(--sail-orange);margin:18px auto 0;}
.m2 .by{margin-top:16px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#5a6770;}
/* M3 inverted navy minimal */
.m3{background:var(--sail-navy);border-left:3px solid var(--sail-orange);border-radius:0 var(--r-md) var(--r-md) 0;padding:26px 32px;}
.m3 blockquote{color:#fff;}
.m3 blockquote em{color:var(--sail-orange);}
.m3 .by{margin-top:14px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF;}
/* M4 quote-glyph, no rule */
.m4{padding:6px 0;}
.m4 .glyph{font-family:var(--font-display);font-weight:400;font-size:88px;line-height:.4;color:var(--sail-orange);height:44px;display:block;}
.m4 .by{margin-top:14px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#5a6770;}

/* ============ V7 - Trust strip / page-break band ============ */
.q7{width:100%;max-width:1100px;background:linear-gradient(0deg,#000 0%,var(--sail-navy) 100%);border-radius:var(--r-md);padding:30px 44px;display:flex;align-items:center;gap:26px;position:relative;overflow:hidden;}
.q7::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(217,119,6,.16),transparent 60%);pointer-events:none;}
.q7__line{position:relative;flex:1;height:1px;background:rgba(255,255,255,.18);}
.q7__mid{position:relative;text-align:center;flex:0 1 auto;}
.q7 blockquote{font-family:var(--font-display);font-weight:500;font-size:clamp(18px,2vw,25px);line-height:1.3;letter-spacing:-.01em;color:#fff;}
.q7 blockquote em{font-style:italic;color:var(--sail-orange);}
.q7__by{margin-top:9px;font-weight:600;font-size:13px;letter-spacing:.06em;color:#fff;}

/* ============ V8 - Trust strip / page-break band, light ============ */
.q8{width:100%;max-width:1100px;background:var(--sail-ink-soft);border-top:1px solid #e7eaed;border-bottom:1px solid #e7eaed;padding:30px 44px;display:flex;align-items:center;gap:26px;}
.q8__line{flex:1;height:1px;background:#e1e5e8;}
.q8__mid{text-align:center;flex:0 1 auto;}
.q8 blockquote{font-family:var(--font-display);font-weight:500;font-size:clamp(18px,2vw,25px);line-height:1.3;letter-spacing:-.01em;color:var(--sail-navy);}
.q8 blockquote em{font-style:italic;color:var(--sail-orange-deep);}
.q8__by{margin-top:9px;font-weight:600;font-size:13px;letter-spacing:.06em;color:#5a6770;}

@media(max-width:680px){
  .q7__line,.q8__line{display:none;}
  .q7,.q8{flex-direction:column;gap:0;text-align:center;}
}
@media(max-width:520px){
  .q3,.q5{width:100%;height:auto;aspect-ratio:1/1;}
  .q4{width:100%;max-width:300px;aspect-ratio:9/16;height:auto;margin:0 auto;}
}

Cancel