No notes defined.

<blockquote class="uol-typography-blockquote" {% if cite.url %} cite="{{ cite.url }}" {% endif %}>
      {{ content | safe }}
      {% if cite.content %}
        <footer>
          <cite>
            {% if cite.url %} <a href="{{ cite.url }}"> {% endif %}
            {{ cite.content }}
            {% if cite.url %} </a> {% endif %}
          </cite>
        </footer>
      {% endif %}
  </blockquote>
<blockquote class="uol-typography-blockquote" cite="https://designsystemfoundations.com/">
      <p>A successful design system liberates the team from reinventing the wheel. It allows you to focus on what really matters</p>

      <footer>
          <cite>
              <a href="https://designsystemfoundations.com/">
                  Andrew Couldwell, Laying the Foundations
              </a>
          </cite>
      </footer>

  </blockquote>
  • Content:
    .uol-typography-blockquote {
      @extend %text-size-blockquote;
      @extend %uol-font-serif;
    
      font-weight: $font-weight-bold--serif;
      position: relative;
      margin: 2em 0 1em;
      padding: 0 1.75em;
    
      @include media(">=uol-media-m") {
        padding: 0 1.7em;
      }
    
      @include media(">=uol-media-l") {
        padding: 0 1.5em;
      }
    
      &::before {
        content: "\201C";
        @extend %uol-font-serif--bold;
    
        font-size: 400%;
        height: 1ex;
        display: block;
        position: absolute;
        top: -0.125em;
        left: 0;
        color: $color-brand;
        line-height: 0.3 !important;
      }
    
      p {
        @extend %text-size-blockquote;
    
        margin-bottom: 0.5em;
      }
    
      footer {
        @extend %text-size-caption;
    
        cite {
          @extend %uol-font-sans-serif--italic;
    
          color: $color-font--x-light;
    
          a {
            color: inherit;
    
            &:hover,
            &:focus {
              color: $color-font;
              text-decoration-color: $color-brand;
            }
          }
        }
      }
    }
    
  • URL: /components/raw/uol-typography-blockquote/_blockquote.scss
  • Filesystem Path: src/library/01-foundations/01-typography/03-typography-components/04-blockquote/_blockquote.scss
  • Size: 957 Bytes
  • Handle: @uol-typography-blockquote--cite
  • Variants (2): Default , Cite
  • Preview:
  • Filesystem Path: src/library/01-foundations/01-typography/03-typography-components/04-blockquote/blockquote.njk
{
  "content": "<p>A successful design system liberates the team from reinventing the wheel. It allows you to focus on what really matters</p>",
  "cite": {
    "content": "Andrew Couldwell, Laying the Foundations",
    "url": "https://designsystemfoundations.com/"
  }
}