Foehn Design System

Blockquote: Bubble Media 

<blockquote class="blockquote vd-blockquote-bubble vd-blockquote-bubble-media">
    <img class="rounded-circle img-fluid" src="https://source.unsplash.com/75x75" alt="Alternative text">

    <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>
 
{
  "class": "vd-blockquote-bubble vd-blockquote-bubble-media",
  "image": {
    "src": "https://source.unsplash.com/75x75",
    "alt": "Alternative text",
    "styleModifier": "img-fluid"
  }
}
  • 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