University of Leeds Design System v1.0.15

Blockquote: Default

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">
      <p>A successful design system liberates the team from reinventing the wheel. It allows you to focus on what really matters</p>

  </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;
        }
      }
    }
  }
}

blockquote p {
  margin-bottom: $spacing-2 !important;

  @include media(">=uol-media-m") {
    margin-bottom: $spacing-4 !important;
    font-size: 24px !important;
    line-height: 36px !important;
  }

  @include media(">=uol-media-l") {
    font-size: 28px !important;
    line-height: 38px !important;
  }
}
  • URL: /components/raw/uol-typography-blockquote/_blockquote.scss
  • Filesystem Path: src/library/01-foundations/01-typography/03-typography-components/04-blockquote/_blockquote.scss
  • Size: 1.3 KB 
{
  "content": "<p>A successful design system liberates the team from reinventing the wheel. It allows you to focus on what really matters</p>"
}