Pull Quote

<blockquote class="nuda-pull-quote">
  <span class="nuda-pull-quote__mark" aria-hidden="true">&ldquo;</span>
  <p class="nuda-pull-quote__body">
    Design is not just what it looks like. Design is how it works.
  </p>
  <footer class="nuda-pull-quote__cite">&mdash; Steve Jobs</footer>
</blockquote>

/* Pull Quote
   Oversized opening glyph + italic body with accent bar.
   Customize: --quote-accent, --quote-surface */

.nuda-pull-quote {
  --quote-accent: #e4ff54;
  --quote-surface: #0c0c10;
  position: relative;
  max-width: 420px;
  margin: 0;
  padding: 1.75rem 1.5rem 1.5rem 3.5rem;
  background: var(--quote-surface);
  border-left: 2px solid var(--quote-accent);
  border-radius: 0 12px 12px 0;
  color: #fafafa;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.nuda-pull-quote__mark {
  position: absolute;
  top: -0.25rem;
  left: 0.5rem;
  font-size: 5rem;
  line-height: 1;
  color: var(--quote-accent);
  font-family: Georgia, serif;
  font-weight: 700;
  opacity: 0.85;
}

.nuda-pull-quote__body {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  line-height: 1.55;
  font-style: italic;
  color: #fafafa;
}

.nuda-pull-quote__cite {
  font-size: 0.8125rem;
  color: #a0a0a8;
  font-style: normal;
  letter-spacing: 0.02em;
}