Verndale UI Components

Button component 

<article class="content-card ">
    <!-- Display this div if image exists-->
    <picture class="content-card__image">
        <source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;767&amp;h&#x3D;430">
        <source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;1280&amp;h&#x3D;717">
        <img src="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;790&amp;h&#x3D;444" alt="Image Description" loading="lazy">
    </picture>
    <div class="content-card__wrapper">
        <h6 class="content-card__heading">Default</h6>
        <div class="content-card__copy">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.</div>
        <div class="content-card__actions">
            <a href=# class="btn btn--primary btn--small">
                Action
            </a>
        </div>
    </div>
</article>
 
<article class="content-card {{#unless image}} content-card--no-image {{/unless}}">
  <!-- Display this div if image exists-->
  <picture class="content-card__image">
    <source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;767&amp;h&#x3D;430">
    <source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;1280&amp;h&#x3D;717">
    <img src="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;790&amp;h&#x3D;444" alt="Image Description" loading="lazy">
  </picture>
  <div class="content-card__wrapper">
    <h6 class="content-card__heading">{{heading}}</h6>
    <div class="content-card__copy">{{copy}}</div>
    <div class="content-card__actions">
      <a href={{cta}} class="btn btn--primary btn--small">
        {{ctaLabel}}
      </a>
    </div>
  </div>
</article>
 
{
  "image": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=282&h=159",
  "heading": "Default",
  "copy": "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.",
  "ctaLabel": "Action",
  "cta": "#",
  "icon": "chevron-right"
}
  • Content: 
    @import '../../theme', 'variables';

.content-card {
  min-height: 400px;
  width: 100%;
  border: solid 1px $border-primary;
  transition: all 0.5s;

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

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

    .content-card__cta {
      text-decoration: underline;

      svg {
        transform: translateX(5px);
      }
    }
  }
}

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

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

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

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

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

.content-card__actions {
  margin-top: 20px;

  .btn {
    width: auto;

    & + .link {
      margin-top: 26px;

      @include mq(desktop) {
        margin-left: 54px;
        margin-top: 0;
      }
    }
  }
}

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

  svg {
    width: 6px;
    height: 10px;
    fill: $cta-primary;
    transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
  • URL: /components/raw/content-card/_styles.scss
  • Filesystem Path: src/components/content-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/content-card/_variables.scss
  • Filesystem Path: src/components/content-carousel/content-card/_variables.scss
  • Size: 197 Bytes

Content Card

This component have 2 design with image and without image

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

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