V6 Clearleft Patterns

Testimonials: Double 

<div class="Testimonials">
    <figure class="Quote">
        <blockquote class="Quote__quote body">
            <p>UX Lon­don is spe­cial to me because the pro­gramme that the team puts togeth­er always tells a great sto­ry, and I learn so much when I come here.</p>
        </blockquote>

        <footer class="Quote__footer">
            <img class="Quote__image" src="https://www.fillmurray.com/400/400" alt="" />
            <div class="Quote__cite small">
                <cite class="Quote__author">Josh Seiden</cite>
                <cite class="Quote__company">seiden consulting</cite>
            </div>
        </footer>
    </figure>
    <figure class="Quote">
        <blockquote class="Quote__quote body">
            <p>Clearleft are one of only a few agencies in the world who consistently and predictably deliver successful projects. This shouldn’t be a rare skill amongst agencies, but in my experience it is.”</p>
        </blockquote>

        <footer class="Quote__footer">
            <img class="Quote__image" src="https://www.fillmurray.com/400/400" alt="" />
            <div class="Quote__cite small">
                <cite class="Quote__author">Josh Seiden</cite>
                <cite class="Quote__company">seiden consulting</cite>
            </div>
        </footer>
    </figure>
</div>
 
<div class="Testimonials">
  {% for quote in quotes %}
    {% include '@quote' with quote %}
  {% endfor %}
</div>
 
{
  "quotes": [
    {
      "quote": "<p>UX Lon­don is spe­cial to me because the pro­gramme that the team puts togeth­er always tells a great sto­ry, and I learn so much when I come here.</p>",
      "citation": "Josh Seiden",
      "qualifier": "seiden consulting",
      "image": {
        "src": "https://www.fillmurray.com/400/400",
        "alt": ""
      }
    },
    {
      "quote": "<p>Clearleft are one of only a few agencies in the world who consistently and predictably deliver successful projects. This shouldn’t be a rare skill amongst agencies, but in my experience it is.”</p>",
      "citation": "Josh Seiden",
      "qualifier": "seiden consulting",
      "image": {
        "src": "https://www.fillmurray.com/400/400",
        "alt": ""
      }
    }
  ]
}
  • Content: 
    .Testimonials {
  & > * + * {
    margin-top: var(--space-2xl);
  }
}

@media screen and (min-width: 50rem) {
  .Testimonials {
    display: flex;
    justify-content: center;
    align-items: center;

    & > * {
      flex: 1;
    }

    & > * + * {
      margin-left: var(--gutter);
      margin-top: 0;
    }

    & > :only-child blockquote {
      font-size: var(--step-1);
    }
  }
}
  • URL: /components/raw/testimonials/testimonials.css
  • Filesystem Path: src/templates/components/testimonials/testimonials.css
  • Size: 391 Bytes

No notes defined.