Davidson Styleguide

Testimonial: Verbose 

<div class="testimonial">
    <div class="testimonial__media">
        <img src="https://magicyeti.us/300/300" alt="" class="" /> </div>
    <div class="testimonial__text">
        <p class="">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tellus elit, consectetur nec efficitur non, ullamcorper eu velit. Suspendisse non volutpat felis. Etiam at tincidunt dui, sed auctor sapien. Quisque interdum iaculis efficitur. Ut sit amet
            laoreet massa. Nulla facilisi. Nulla egestas, neque quis varius vestibulum, diam eros eleifend velit, nec commodo ipsum nunc ac ex. Aenean vestibulum dui vitae ullamcorper dictum. Vestibulum vitae felis faucibus ex molestie accumsan non a
            augue. Proin sodales eget neque ut cursus. Vivamus convallis viverra commodo. Nullam cursus ornare nulla, in tempus dui facilisis eu.
        </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": {
      "ratio": "1:1",
      "width": 300
    },
    "pattern": "@p",
    "p": {
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tellus elit, consectetur nec efficitur non, ullamcorper eu velit. Suspendisse non volutpat felis. Etiam at tincidunt dui, sed auctor sapien. Quisque interdum iaculis efficitur. Ut sit amet laoreet massa. Nulla facilisi. Nulla egestas, neque quis varius vestibulum, diam eros eleifend velit, nec commodo ipsum nunc ac ex. Aenean vestibulum dui vitae ullamcorper dictum. Vestibulum vitae felis faucibus ex molestie accumsan non a augue. Proin sodales eget neque ut cursus. Vivamus convallis viverra commodo. Nullam cursus ornare nulla, in tempus dui facilisis eu."
    },
    "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.