<blockquote class="blockquote">

    <p>La démocratie ne se découpe pas en morceaux dont on ne choisirait que les meilleurs.</p>
    <cite class="blockquote-footer">Pascal Broulis, Conseil d&#39;État de Vaud</cite>

</blockquote>
<blockquote class="blockquote{% if class %} {{ class }}{% endif %}">
  {% if image %}{% render '@image--rounded', image, true %}{% endif %}
  <p>La démocratie ne se découpe pas en morceaux dont on ne choisirait que les meilleurs.</p>
  {% render '@citation', {styleModifier: 'blockquote-footer', text:'Pascal Broulis, Conseil d\'État de Vaud'}, true %}
</blockquote>
/* No context defined. */
  • Content:
    @charset 'UTF-8';
    
    .blockquote-footer {
      margin-top: 0;
    }
    
    blockquote cite,
    .blockquote-footer {
      &:before {
        content: none;
      }
    }
    
    .vd-blockquote-bubble {
      position: relative;
      margin: ($spacer * 1.5) 0;
      padding: ($spacer * 1.45) ($spacer * 1.8);
      background: $dark;
      border-radius: 10px;
      font-size: $font-size-base;
      line-height: 1.3;
    
      &:before {
        content: none;
      }
    
      &:after {
        content: "";
        display: block;
        position: absolute;
        top: 100%;
        right: 40px;
        width: 41px;
        height: 18px;
    
        @include media-breakpoint-up(sm) {
          right: 80px;
        }
    
        @include vd-background-image-icon($vd-blockquote-pointer, $dark, 41, 18);
      }
    
      p {
        font-style: italic;
        font-family: $headings-font-family;
        color: $vd-primary-light;
      }
    
      img {
        position: absolute;
        right: -50px;
        bottom: $spacer * 0.8;
        width: 80px;
        height: auto;
    
        @include media-breakpoint-up(sm) {
          right: -75px;
          width: 120px;
        }
      }
    
      .blockquote-footer {
        font-size: $font-size-base;
        color: $white;
      }
    }
    
    blockquote,
    .blockquote {
      position: relative;
      padding-left: $spacer * 4;
      font-size: $font-size-lg;
      color: $gray-500;
    
      &:before {
        content: "“";
        position: absolute;
        top: 0;
        left: 0;
        font-family: $font-family-serif;
        font-size: 3rem;
        line-height: 1.3;
        font-weight: 700;
        color: $link-color;
      }
    
      p:last-of-type {
        margin-bottom: $spacer * 0.4;
      }
    }
    
    /**
     * Apply the bootstrap style on native tags
     */
    blockquote cite {
      display: block;
      font-size: 80%; // back to default font-size
      color: $gray-500;
    }
    
    .blockquote-reverse {
      &:after {
        right: auto;
        left: 40px;
      }
    }
    
    .vd-blockquote-bubble-media {
      margin-right: $spacer * 2.8;
      padding-right: $spacer * 2;
    
      @include media-breakpoint-up(sm) {
        margin-right: $spacer * 5;
        margin-left: $spacer;
        padding-right: $spacer * 4.5;
      }
    }
    
  • URL: /components/raw/blockquote/_blockquote.scss
  • Filesystem Path: src/components/02-molecules/text/blockquote/_blockquote.scss
  • Size: 1.9 KB

There are 3 different blockquotes:

  • .blockquote: Regular blockquote
  • .vd-blockquote-bubble: Bubble styled blockquote, with a dark background
  • .vd-blockquote-bubble-media: The same as the bubble, but with a circle portrait image