Verndale UI Components

C-CRD-8: Carousel Content Card: Card Without Copy 

<article class="carousel-content-card ">
    <!-- Display this div if image exists-->
    <div class="carousel-content-card__image">
        <picture>
            <source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w&#x3D;768&amp;h&#x3D;414">
            <source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w&#x3D;1280&amp;h&#x3D;690">
            <img src="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w&#x3D;1600&amp;h&#x3D;700" alt="Image Description" loading="lazy">
        </picture>
    </div>
    <div class="carousel-content-card__wrapper">
        <h6 class="carousel-content-card__heading">Default</h6>
        <span class="carousel-content-card__cta-label">
            Action
            <svg viewBox="0 0 32 23" class="arror-right">
                <use xlink:href="#arrow-right" />
            </svg>
        </span>
    </div>
    <a href=# class="carousel-content-card__cta"></a>
</article>
 
<article class="carousel-content-card {{#unless image}} carousel-content-card--no-image {{/unless}}">
  <!-- Display this div if image exists-->
  <div class="carousel-content-card__image">
    {{#json image}}
      {{>picture}}
    {{/json}}
  </div>
  <div class="carousel-content-card__wrapper">
    <h6 class="carousel-content-card__heading">{{heading}}</h6>
    {{#if copy}}
    <div class="carousel-content-card__copy">
      <div class="rtf">
        {{{copy}}}
      </div>
    </div>
    {{/if}}
    <span class="carousel-content-card__cta-label">
      {{ctaLabel}}
      {{>svg name="arrow-right" viewBox="0 0 32 23" className="arror-right"}}
    </span>
  </div>
  <a href={{cta}} class="carousel-content-card__cta"></a>
</article>
 
{
  "image": {
    "srcset": {
      "767": "https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=768&h=414",
      "1279": "https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1280&h=690"
    },
    "src": "https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1600&h=700",
    "description": "Image Description"
  },
  "heading": "Default",
  "copy": null,
  "ctaLabel": "Action",
  "cta": "#"
}
  • Content: 
    @import '../theme', 'variables';

.carousel-content-card {
  width: 100%;
  border: solid 1px $border-primary;
  transition: all 0.5s;
  position: relative;

  &.carousel-content-card--no-image {
    height: 220px;
  }

  &:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 15px 0 rgba(0, 0, 0, 0.15);

    .carousel-content-card__cta-label {
      text-decoration: underline;

      svg {
        transform: translateX(5px);
      }
    }
    .carousel-content-card__heading {
      color: $cta-primary;
    }
  }

  @include mq(tablet) {
    width: 25%;
  }
}

.carousel-content-card__wrapper {
  margin: 19px 32px 30px 35px;
  height: auto;
  display: flex;
  flex-direction: column;
}

.carousel-content-card__heading {
  line-height: 1.78;
  font-size: 18px;
  font-weight: 600;
  color: $text-primary;
}

.carousel-content-card__image {
  width: 100%;
  height: 159px;

  img {
    width: 100%;
    height: 100%;
  }
}

.carousel-content-card__copy {
  margin: 5px 0 15px;
  font-size: 14px;
  line-height: 1.71;
  letter-spacing: normal;
  flex: 1;
  color: $text-primary;
}

.carousel-content-card__cta {
  position: absolute;
  inset: 0;
}

.carousel-content-card__cta-label {
  font-size: 14px;
  color: $cta-primary;
  line-height: normal;
  letter-spacing: normal;
  text-decoration: none;

  svg {
    width: 15px;
    height: 10px;
    fill: $cta-primary;
    transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
  • URL: /components/raw/c-crd-8-carousel-content-card/_styles.scss
  • Filesystem Path: src/components/C-CRD-8-carousel-content-card/_styles.scss
  • Size: 1.4 KB
  • Content: 
    $text-primary: map-get($theme-colors, "primary-gray") !default;
$cta-primary: map-get($theme-colors, "primary") !default;
$border-primary: map-get($theme-colors, "secondary-light-gray") !default;
  • URL: /components/raw/c-crd-8-carousel-content-card/_variables.scss
  • Filesystem Path: src/components/C-CRD-8-carousel-content-card/_variables.scss
  • Size: 197 Bytes

Content Card

This component have 2 design with copy and without copy

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/carousel-content-card";

Copy and paste to your project any of the markup in the content card 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 content card 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

$text-primary
$cta-primary
$border-primary