Style sampler: Quote slider

To create a quote slider

1. Prepare the container you'd like to place the quotes in.
   • If it's going to be in a grid, build that first
   • If the quote will be full-width, just add a <div> to contain it: <div><!-- quotes will be here --></div>
2. Place all of the quotes in the container you prepared in step 1. Do this as if they'll appear in sequence, one after the other.
3. Add the "quote-slider" class to the <div> they're in, like this: <div class="grid-item width-4/12 quote-slider">

Note: the quotes have to be direct children of the quote-slider container, and only quotes can be in it. Odd things will happen otherwise!

Here's the markup for the example below:

<div class="grid grid-equal-height-cols mt-2">
  <div class="grid-item width-4/12 quote-slider">

    <!-- quote 1 -->
    <div class="bg-blue border-radius-10 p-2">
      <blockquote class="quote quote-reversed mt-0 mb-0">
        <p class="large">The payment processing is incredibly easy to implement.</p>
        <p class="attribution">Michelle, Education Management&nbsp;CEO</p>
      </blockquote>
    </div>

    <!-- quote 2 -->
    <div class="bg-light-gray border-radius-10 p-2">
      <blockquote class="quote mt-0 mb-0">
        <h5>I can't believe I didn't update sooner.</h5>
        <p>I am saving so much more time and my parents are thrilled with the updates they received on the mobile app!</p>
        <p class="attribution">Paige</p>
      </blockquote>
    </div>

    <!-- quote 3 -->
    <div class="bg-purple border-radius-10 p-2">
      <blockquote class="quote quote-reversed mt-0 mb-0">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
          laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p class="attribution">Tracy P, Director at a child care center</p>
      </blockquote>
    </div>

  </div>
</div>