Verndale UI Components

Large Image Carousel: Without Description 

<article class="large-image-card">
    <a class="large-image-card__link" href="/">
        <img src="https://via.placeholder.com/883x890" alt="Image descriptionLorem ipsum dolor sit amet" class="img--cover lazyload">
        <div class="large-image-card__content">
            <h3 class="large-image-card__title">Lorem ipsum dolor sit amet</h3>
        </div>
    </a>
</article>
 
<article class="large-image-card">
    {{#if this.link}}
    <a class="large-image-card__link" href="{{this.link}}">
    {{/if}}
        <img src="{{this.image}}" alt="{{this.imageDescription}}" class="img--cover lazyload">
        <div class="large-image-card__content">
            <h3 class="large-image-card__title">{{this.title}}</h3>
            {{#if description}}
            <p class="large-image-card__description">{{this.description}}</p>
            {{/if}}
        </div>
    {{#if this.link}}
    </a>
    {{/if}}
</article>
 
{
  "image": "https://via.placeholder.com/883x890",
  "imageDescription": "Image descriptionLorem ipsum dolor sit amet",
  "title": "Lorem ipsum dolor sit amet",
  "description": null,
  "link": "/"
}
  • Content: 
    @import "../../theme",
"variables";
.large-image-card {
    min-height: 380px;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba($black, 0) 52%, $black 100%);
    position: relative;
    border: solid 1px $border-primary;
    transition: all 0.5s;
    &.content-card--no-image {
        height: 220px;
    }
    @include mq(tablet) {
        width: 25%;
    }
    &:hover {
        margin-top: -10px;
        box-shadow: 0 20px 15px 0 rgba(0, 0, 0, 0.15);
        .content-card__cta {
            text-decoration: underline;
            svg {
                transform: translateX(5px);
            }
        }
        .large-image-card__link {
            .large-image-card__description {
                text-decoration: none;
                &:before {
                    transform: translateX(0);
                }
            }
        }
    }
    img {
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1;
    }
}

.large-image-card__content {
    bottom: 0;
    left: 0;
    padding: 20px 30px;
    position: absolute;
}

.large-image-card__link {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 380px;

    .large-image-card__description {
        &:hover,
        &:focus {
            text-decoration: none;
            &:before {
                transform: translateX(0);
            }
        }
    }
}

.large-image-card__title {
    color: $white;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.43;
    margin: 0 0 3px;
    text-transform: uppercase;
}

.large-image-card__description {
    color: $white;
    display: inline-block;
    overflow: hidden;
    position: relative;
    transition: color 0.3s ease-in-out;
    color: $white;
    font-size: 14px;
    line-height: 1.71;
    margin: 0;
    &:before {
        background: #fff;
        bottom: .125rem;
        content: "";
        height: .0625rem;
        left: 0;
        position: absolute;
        transform: translateX(-110%);
        transform-origin: left;
        transition: all 0.3s ease-in-out;
        width: 100%;
    }
}
  • URL: /components/raw/large-image-card/_styles.scss
  • Filesystem Path: src/components/content-carousel/large-image-card/_styles.scss
  • Size: 2.1 KB
  • Content: 
    $main-color: map-get($theme-colors, "primary") !default;
$gray: #808080;
$white: #fff !default;
$black: #000;
  • URL: /components/raw/large-image-card/_variables.scss
  • Filesystem Path: src/components/content-carousel/large-image-card/_variables.scss
  • Size: 110 Bytes

Large Image Card

This component have 4 design, card with description, card without description, card with link, and card without 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/content-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

$main-color
$gray
$white
$black