Cards: Testimonial

Ready

Notes
HTML
View
Assets
Info

There are no notes for this item.


        
        <div class="card  card--testimonial">
    <div class="card__content">
        <blockquote>
            <figure class="blockquote__figure  align-right  align-size-md">
                <img src="https://placeimg.com/480/480/people" alt="" />
            </figure>

            <q class="blockquote__title">Great relationships with leading institutions</q>

            <div class="blockquote__prose">
                <p>I really enjoy the broad range of psycholoy content, the tutors are supportive and really helpful!</p>
                <p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance.</p>
                <p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. </p>
            </div>

            <footer class="blockquote__footer">
                <p class="cite">Christie Scanion, Graduate </p>
                <p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
            </footer>
        </blockquote>
    </div>
</div>

<hr />

<div class="grid  grid-2-cols@tablet">
    <div>
        <div class="card  card--testimonial">
            <div class="card__content">
                <blockquote class="blockquote--large">
                    <figure class="blockquote__figure  align-right  align-size-md">
                        <img src="https://placeimg.com/480/480/people" alt="" />
                    </figure>

                    <q class="blockquote__title">Great relationships with leading institutions</q>

                    <div class="blockquote__prose">
                        <p>Thanks to Staffordshire University, I felt I could connect, converse and engage with professionals. Thanks to Staffordshire University, I felt I could connect, converse and engage with professionals.</p>
                    </div>

                    <footer class="blockquote__footer">
                        <p class="cite">Sarah Jones</p>
                        <p>Digital Design</p>
                    </footer>
                </blockquote>
            </div>
        </div>
    </div>

    <div>
        <div class="card  card--testimonial  card--maroon">
            <div class="card__content">
                <blockquote>
                    <figure class="blockquote__figure  align-right  align-size-md">
                        <img src="https://placeimg.com/480/480/people" alt="" />
                    </figure>

                    <q class="blockquote__title">Great relationships with leading institutions</q>

                    <div class="blockquote__prose">
                        <p>I really enjoy the broad range of psycholoy content, the tutors are supportive and really helpful!</p>
                        <p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance.</p>
                        <p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. </p>
                    </div>

                    <footer class="blockquote__footer">
                        <p class="cite">Christie Scanion, Graduate </p>
                        <p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
                    </footer>
                </blockquote>
            </div>
        </div>
    </div>

    <div>
        <div class="card  card--testimonial  card--pink">
            <div class="card__content">
                <blockquote class="blockquote--large">
                    <figure class="blockquote__figure  align-right  align-size-md">
                        <img src="https://placeimg.com/480/480/people" alt="" />
                    </figure>

                    <q class="blockquote__title">Tutors are supportive and really helpful!</q>

                    <div class="blockquote__prose">
                        <p>Thanks to Staffordshire University, I felt I could connect, converse and engage with professionals. Thanks to Staffordshire University, I felt I could connect, converse and engage with professionals.</p>
                    </div>

                    <footer class="blockquote__footer">
                        <p class="cite">Christie Scanion, Graduate </p>
                        <p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
                    </footer>
                </blockquote>
            </div>
        </div>
    </div>

    <div>
        <div class="card  card--testimonial  card--slate">
            <div class="card__content">
                <blockquote>
                    <figure class="blockquote__figure  align-right  align-size-md">
                        <img src="https://placeimg.com/480/480/people" alt="" />
                    </figure>

                    <q class="blockquote__title">Great relationships with leading institutions</q>

                    <div class="blockquote__prose">
                        <p>I really enjoy the broad range of psycholoy content, the tutors are supportive and really helpful!</p>
                        <p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. </p>
                    </div>

                    <footer class="blockquote__footer">
                        <p class="cite">Christie Scanion, Graduate </p>
                        <p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
                    </footer>
                </blockquote>
            </div>
        </div>
    </div>
</div>


        <div class="card  card--testimonial">
  <div class="card__content">
    <blockquote>
      <figure class="blockquote__figure  align-right  align-size-md">
        <img src="https://placeimg.com/480/480/people" alt=""/>
      </figure>

      <q class="blockquote__title">Great relationships with leading institutions</q>

      <div class="blockquote__prose">
        <p>I really enjoy the broad range of psycholoy content, the tutors are supportive and really helpful!</p>
        <p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance.</p>
        <p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. </p>
      </div>

      <footer class="blockquote__footer">
        <p class="cite">Christie Scanion, Graduate </p>
        <p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
      </footer>
    </blockquote>
  </div>
</div>

<hr/>

<div class="grid  grid-2-cols@tablet">
  <div>
    <div class="card  card--testimonial">
      <div class="card__content">
        <blockquote class="blockquote--large">
          <figure class="blockquote__figure  align-right  align-size-md">
            <img src="https://placeimg.com/480/480/people" alt=""/>
          </figure>

          <q class="blockquote__title">Great relationships with leading institutions</q>

          <div class="blockquote__prose">
            <p>Thanks to Staffordshire University, I felt I could connect, converse and engage with professionals. Thanks to Staffordshire University, I felt I could connect, converse and engage with professionals.</p>
          </div>

          <footer class="blockquote__footer">
            <p class="cite">Sarah Jones</p>
            <p>Digital Design</p>
          </footer>
        </blockquote>
      </div>
    </div>
  </div>

  <div>
    <div class="card  card--testimonial  card--maroon">
      <div class="card__content">
        <blockquote>
          <figure class="blockquote__figure  align-right  align-size-md">
            <img src="https://placeimg.com/480/480/people" alt=""/>
          </figure>

          <q class="blockquote__title">Great relationships with leading institutions</q>

          <div class="blockquote__prose">
            <p>I really enjoy the broad range of psycholoy content, the tutors are supportive and really helpful!</p>
            <p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance.</p>
            <p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. </p>
          </div>

          <footer class="blockquote__footer">
            <p class="cite">Christie Scanion, Graduate </p>
            <p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
          </footer>
        </blockquote>
      </div>
    </div>
  </div>

  <div>
    <div class="card  card--testimonial  card--pink">
      <div class="card__content">
        <blockquote class="blockquote--large">
          <figure class="blockquote__figure  align-right  align-size-md">
            <img src="https://placeimg.com/480/480/people" alt=""/>
          </figure>

          <q class="blockquote__title">Tutors are supportive and really helpful!</q>

          <div class="blockquote__prose">
            <p>Thanks to Staffordshire University, I felt I could connect, converse and engage with professionals. Thanks to Staffordshire University, I felt I could connect, converse and engage with professionals.</p>
          </div>

          <footer class="blockquote__footer">
            <p class="cite">Christie Scanion, Graduate </p>
            <p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
          </footer>
        </blockquote>
      </div>
    </div>
  </div>

  <div>
    <div class="card  card--testimonial  card--slate">
      <div class="card__content">
        <blockquote>
          <figure class="blockquote__figure  align-right  align-size-md">
            <img src="https://placeimg.com/480/480/people" alt=""/>
          </figure>

          <q class="blockquote__title">Great relationships with leading institutions</q>

          <div class="blockquote__prose">
            <p>I really enjoy the broad range of psycholoy content, the tutors are supportive and really helpful!</p>
            <p>The facilities are perfect with very advanced equipment, making my studies even m oreinteresting. I particularly enjoy studies in anxiety and how this can influence sports performance. </p>
          </div>

          <footer class="blockquote__footer">
            <p class="cite">Christie Scanion, Graduate </p>
            <p>BA(Hons) Sports Development and Coaching (Former title of our Sports Coaching degree)</p>
          </footer>
        </blockquote>
      </div>
    </div>
  </div>
</div>

File:

Content:


                                $card__internal-spacing: $spacing-sm;

.card {
  // $theme-colours: see __vars/colours

  display: block;
  position: relative;
  --accent-color: #{$primary};
  margin-bottom: $spacing-xl;
  border-left: $border-accent-width solid $primary;
  border-color: var(--accent-color);
  @include clearfix;

  a:not(.button) {
    text-decoration: none;
    border-bottom: none;

    &:hover {
      text-decoration: underline;
    }
  }

  p {
    margin-bottom: $card__internal-spacing;
  }

  &__content {
    padding: 0 calc(#{$card__internal-spacing} + 2.5%);

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }

  &__title {
    margin-top: 0;
    margin-bottom: $spacing-md;

    a {
      color: #{$primary};
      color: var(--accent-color);
    }
  }

  &__figure {
    &--video {
      position: relative;

      &:after {
        content: '';
        position: absolute;
        width: $spacing-4xl;
        height: $spacing-4xl;
        max-width: 50%;
        max-height: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url('#{$image-theme-directory-icon}/icon-play-circle-neutral-light.svg') no-repeat center center;
        background-size: contain;
        z-index: 1;
        pointer-events: none;
      }
    }
  }

  //--  Child elements affected by accent colour

  .blockquote__title {
    color: var(--accent-color);
  }

  .title__highlight {
    --background: var(--accent-color);
  }

  .meta--inline-dd,
  .meta--inline {
    dd:before {
      color: var(--accent-color);
    }
  }

  //--  ACCENT THEMES
  @each $name, $value in $card-accent-colors {
    &--#{$name} {
      --accent-color: #{$value};
    }
  } 

  @each $name, $value in $theme-colours {
    &--#{$name} {
      --accent-color: #{$value};

      svg {
          fill: #{$value};
      }
    }
  }

  &--light {
    --accent-color: #{rgba(white, 0.5)};
    color: white;

    svg {
      fill: white;
    }

  }
}

a.card {
  text-decoration: none;

  .card__title {
    color: #{$primary};
    color: var(--accent-color);
  }

  &:hover {
    color: $text-color;

    .title__highlight,
    .card__title {
      text-decoration: underline;
    }
  }
}

//--  VARIANTS

.card--flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-direction: row-reverse;

  .card__figure {
    flex: 1 1 33%;
  }

  .card__content {
    flex: 99 1 17.5em;
  }
}

.card--flex-overlap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-direction: row-reverse;
  padding-bottom: $spacing-sm;

  .card__figure {
    flex: 1 1 33%;
  }

  .card__content {
    flex: 99 1 17.5em;
  }

  .card__figure {
    margin-bottom: -#{$spacing-sm};
  }
}

.card--testimonial {
  padding-bottom: $card__internal-spacing;
}

.card--pullquote {
  padding-bottom: $card__internal-spacing;
  margin-left: 5%;

  &:before {
    content: '';
    display: block;
    float: left;
    width: 5%;
    height: 0;
    padding-bottom: 5%;
    margin-left: -5%;
    background: #fff url('#{$image-theme-directory-icon}/icon-quote-primary.svg') no-repeat center center;
    background-size: contain;
  }

  // These themes need to be updated 'manually' for now, as we're using an svg,
  // and I can't think of a clever way to update dynamically based on the accent var
  // something using inline SVG use/fill, or a mask?
  // Don't forget to add the SVG to the filesystem!

  @each $name, $value in $card-accent-colors {
    &.card--#{$name} {
      &:before {
        background: #fff url('#{$image-theme-directory-icon}/icon-quote-#{$name}.svg') no-repeat center center;
        background-size: contain;
      }
    }
  }
}

.card--course {
  // this exists, but doesn't need anything specific (yet)
}

.card--result {
  // this exists, but doesn't need anything specific (yet)
}

.card--profile {
  // this exists, but doesn't need anything specific (yet)
}

.card--ksp {
  color: $neutral--primary;

  &__icon {
    margin-bottom: $card__internal-spacing;
    max-width: 100%;
    height: auto!important;

    img {
      vertical-align: baseline !important; // this is horribly lazy but browsers, sorry
    }
  }

  &.card--light {
    color: white;
  }
}

.card--event {
  margin-left: $spacing-4xl;

  .card__figure {
    margin-bottom: -#{$spacing-sm};
  }

  .card__date {
    position: absolute;
    top: 0;
    left: -$spacing-4xl;
    width: $spacing-4xl;
    @include typescale('xs');
    padding: $spacing-sm 0;
    color: white;
    background: $primary;
    background: var(--accent-color);
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
  }

  .card__day {
    display: block;
    font-weight: 500;
    @include typescale('xl');

    @media (min-width: map_get($breakpoint-stages, 'mobile-wide')) {
      @include typescale('3xl');
    }
  }

  @media (min-width: (map_get($breakpoint-stages, 'tablet-wide') + 5rem)) {
    margin-left: $spacing-5xl;

    .card__date {
      left: -$spacing-5xl;
      width: $spacing-5xl;
    }

    .card__day {
      @include typescale('5xl');
    }
  }
}

.card__video.card__figure {
  @media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
    padding-bottom: 50%;
    position: relative;
    height: 0;
  }
  & iframe {
    width: 100%;
    height: 100%;
    @media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
      padding-bottom: 50%;
      position: absolute;
    }
  }
}

.grid-2-cols\@tablet {
  &  .card__video {
    &.card__figure {
      padding-bottom: 50%;
      position: relative;
      height: 0;
      & iframe {
        position: absolute;
      }
    }
  }
}

URL: /components/raw/card/_cards.scss
Filesystem Path: src/components/card/_cards.scss
Size: 5.7 KB

Handle: @card--testimonial
Variants (21): Default , Theme: Pink , Theme: Red , Theme: Slate , Theme: Maroon , Theme: Blue (LDN) , LDN Variants , KSP (Key Selling Points) , KSP (Light on Dark) , Pullquote , Pullquote (LDN) , Testimonial , Testimonial (LDN) , Course , Course Result , Event , Flex , Flex Overlap , News , Profile , Result
Preview:
- With layout
- Component only
Filesystem Path: src/components/card/card--testimonial.twig