<div class="testimonial">
    <div class="testimonial__text">
        <p class="">
            This variant isn't actually possible in Drupal but I'm testing it here just in case.
        </p>
        <cite>Edgar Rice Burroughs, <em>Princess of Mars</em></cite>
        <a class="link--fancy" href="/admission-aid">Admission</a>
    </div>
</div>
<div class="testimonial">
  {% if testimonial.image is not empty %}
  <div class="testimonial__media">
    {% include '@image' with { image: testimonial.image } %}
  </div>
  {% endif %}
  <div class="testimonial__text">
    {% include testimonial.pattern with { p: testimonial.p }  %}
    {% include '@cite' with { cite: testimonial.cite } %}
    <a class="link--fancy" href="/admission-aid">Admission</a>
  </div>
</div>
{
  "testimonial": {
    "image": null,
    "pattern": "@p",
    "p": {
      "content": "This variant isn't actually possible in Drupal but I'm testing it here just in case."
    },
    "cite": {
      "citation": "Edgar Rice Burroughs, <em>Princess of Mars</em>"
    }
  }
}
  • Content:
    .testimonial {
      border: rr-gridbase(1) solid color(davidson-red);
      @include rr-break-directive(m) {
        display: flex;
        margin-left: rr-gridbase(4);
        margin-top: rr-gridbase(8);
      }
    }
    
    .testimonial__media {
      @include rr-break-directive(m) {
        flex: 0 1 25%;
        // add one for border width:
        margin-left: rr-gridbase(-5);
        margin-top: rr-gridbase(-5);
      }
    }
    
    .testimonial__text {
      @include rr-break-directive(m) {
        flex: 1 1 75%;
      }
      @include rr-font-compute(xl, medium);
      padding: rr-gridbase(4) rr-gridbase(5) rr-gridbase(5);
      background: transparent image-url('ghost-quote.svg') scroll no-repeat rr-gridbase(1) 0;
    
      p {
        @include rr-font-compute(xl, medium);
        font-style: italic;
    
        &:first-child {
          margin-top: 0;
        }
      }
    
      cite {
        display: block;
        margin-bottom: 2rem;
    
        &::before {
          content: '—';
        }
      }
    }
    
  • URL: /components/raw/testimonial/testimonial.scss
  • Filesystem Path: patterns/molecules/blocks/testimonial/testimonial.scss
  • Size: 873 Bytes

There are no notes for this item.