Verndale UI Components

C-CRD-6: Testimonial Card 

<div class="swiper-slide">
    <article class="testimonials-card testimonials-card--with-image">
        <img class="testimonials-card__photo" src="https://thispersondoesnotexist.com/image" height="80" width="80" alt="Firstname Lastname" loading="lazy" />
        <h3 class="testimonials-card__name">
            Firstname Lastname
        </h3>
        <h4 class="testimonials-card__position">
            Position at Company
        </h4>
        <div class="testimonials-card__quote rtf">
            Duis dolor reprehenderit magna dolor ex. Reprehenderit ipsum qui elit aliquip tempor ullamco ad ipsum et enim qui veniam. Laborum commodo sint nulla id non incididunt voluptate irure. Pariatur aliqua mollit occaecat sint ex est magna dolore occaecat.
        </div>
        <a href="#" class="link link--primary">
            Large Text Link
            <svg viewBox="0 0 6 10" class="link__icon link__icon--right">
                <use xlink:href="#chevron-right" />
            </svg>
        </a>
    </article>
</div>
 
<div class="swiper-slide">
  <article class="testimonials-card{{#if photo}} testimonials-card--with-image{{/if}}">
    {{#if photo}}
    <img
      class="testimonials-card__photo"
      src="{{photo}}"
      height="80"
      width="80"
      alt="{{name}}"
      loading="lazy"
    />
    {{/if}}
    <h3 class="testimonials-card__name">
      {{name}}
    </h3>
    {{#if position}}
    <h4 class="testimonials-card__position">
      {{position}}
    </h4>
    {{/if}}
    <div class="testimonials-card__quote rtf">
      {{quote}}
    </div>
    {{#if linkLabel}}
      {{>@link label=linkLabel className="primary" icon="right"}}
    {{/if}}
  </article>
</div>
 
{
  "photo": "https://thispersondoesnotexist.com/image",
  "name": "Firstname Lastname",
  "position": "Position at Company",
  "quote": "Duis dolor reprehenderit magna dolor ex. Reprehenderit ipsum qui elit aliquip tempor ullamco ad ipsum et enim qui veniam. Laborum commodo sint nulla id non incididunt voluptate irure. Pariatur aliqua mollit occaecat sint ex est magna dolore occaecat.",
  "linkLabel": "Large Text Link"
}
  • Content: 
    @import '../../theme', 'variables';

.testimonials-card {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  margin-top: $space-card-mobile;
  max-width: 600px;
  padding: 20px;
  text-align: center;

  @include mq(desktop) {
    padding: 40px;
  }
}

.testimonials-card__name {
  font-family: $card-font-family;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.17;
  margin: 0 0 10px;
}

.testimonials-card__position {
  font-family: $card-font-family;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.19;
  margin: 0 0 10px;
}

.testimonials-card--with-image {
  margin-top: $space-card-mobile-image;
  padding-top: calc(#{$space-card-mobile-image} + 20px);
  position: relative;

  @include mq(desktop) {
    margin-top: $space-card-desktop;
    padding-top: calc(#{$space-card-desktop} + 20px);
  }
}

.testimonials-card__photo {
  border-radius: 999px;
  left: 50%;
  object-fit: cover;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 0;

  @include mq(desktop) {
    height: $photo-size-desktop;
    width: $photo-size-desktop;
  }
}
  • URL: /components/raw/c-crd-6-testimonial-card/_styles.scss
  • Filesystem Path: src/components/cards/C-CRD-6-testimonial-card/_styles.scss
  • Size: 1.1 KB
  • Content: 
    $space-card-mobile: 40px;
$space-card-mobile-image: 40px;
$space-card-desktop: 60px;
$photo-size-desktop: 120px;
$card-font-family: $primary-font !default;
  • URL: /components/raw/c-crd-6-testimonial-card/_variables.scss
  • Filesystem Path: src/components/cards/C-CRD-6-testimonial-card/_variables.scss
  • Size: 156 Bytes

Testimonial Card

Display a testimonial within the Testimonials Carousel. Each testitmonial card consist of Thumbnail, Full Name, Testimonial Context, Testimonial and a Link

Usage

Add the front-end-copmonent library to your project

yarn add @verndale/front-end-components

Import the style to your main style file in your project

@import '../../node_modules/@verndale/front-end-components/lib/cards/testimonials/styles';

Copy and paste to your project any of the markup in the link variations - you can find the markup in the HTML tab.

Styling

The component will already have a default style/theme set, so it will work out of the box. The testimonials cards has a set of variables that may be overriden, or you may choose to just override the actual styles in your project. It is recommended to use the overrides if you can as it will be less code in your project.

Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss

$space-card-mobile
$space-card-mobile-image
$space-card-desktop
$photo-size-desktop
$card-font-family

You always need to set your overrides before the import of you component - for example:

$space-card-mobile: 40px;
$space-card-mobile-image: 30px;
$space-card-desktop: 60px;
$photo-size-desktop: 120px @import
  '../../node_modules/@verndale/front-end-components/lib/cards/testimonials/styles';