Verndale UI Components

Masthead component: C Bnr 4 Masthead With Background Image Right Variation 

<div class="masthead masthead--background-media  ">
    <div class="masthead__inner container  masthead__inner--position-right  ">
        <div class="masthead__media">
            <picture>
                <source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w&#x3D;768&amp;h&#x3D;414">
                <source media="(max-width: 1024px)" srcset="https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w&#x3D;1025&amp;h&#x3D;650">
                <img src="https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w&#x3D;760&amp;h&#x3D;650" alt="Image Description" loading="lazy">
            </picture>
        </div>
        <div class="masthead__content">
            <h1 class="masthead__heading">Masthead With Background Image Aligned Right Variation</h1>
            <h2 class="masthead__subheading">Optional Subheading</h2>
            <div class="masthead__copy rtf">
                <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
            </div>
            <div class="masthead__actions">
                <a href="#" class="btn btn--primary">
                    Primary Call-to-Action
                </a>

                <a href="#" class="link link--primary">
                    Large Text Link
                </a>

            </div>
        </div>
    </div>
</div>
 
{{>@masthead}}
 
{
  "mediaPosition": "background",
  "subheading": "Optional Subheading",
  "heading": "Masthead With Background Image Aligned Right Variation",
  "copy": "<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>",
  "ctaLabel": "Primary Call-to-Action",
  "linkLabel": "Large Text Link",
  "image": {
    "srcset": {
      "767": "https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w=768&h=414",
      "1024": "https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w=1025&h=650"
    },
    "src": "https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w=760&h=650",
    "description": "Image Description"
  },
  "media": true,
  "autoplay": true,
  "containerPosition": "right"
}

Masthead

This component has 3 different variations on the image (right, left and full background)

Usage

Add the front-end-copmonent library to your project

yarn add @verndale/front-end-components

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