Verndale UI Components

C-FMT-4: Full Width Image Row 

<section class="full-width-image" aria-labelledby="fullWidthImageHeader">
    <h2 class="full-width-image__header" id="fullWidthImageHeader">Take the virtual tour</h2>
    <figure class="full-width-image__figure">
        <picture class="full-width-image__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>
        <figcaption class="full-width-image__caption">Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</figcaption>
    </figure>
</section>
 
<section class="full-width-image" aria-labelledby="fullWidthImageHeader">
  <h2 class="full-width-image__header" id="fullWidthImageHeader">{{heading}}</h2>
  <figure class="full-width-image__figure">
    {{>picture srcset=image.srcset src=image.src description=image.description className="full-width-image__image"}}
    <figcaption class="full-width-image__caption">{{caption}}</figcaption>
  </figure>
</section>
 
{
  "heading": "Take the virtual tour",
  "image": {
    "srcset": {
      "767": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430",
      "1279": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717"
    },
    "src": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444",
    "description": "Image Description"
  },
  "caption": "Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula."
}
  • Content: 
    @import '../theme', 'variables';

.full-width-image {
  margin-bottom: $accordion-mobile-margin-bottom;
  margin-top: $accordion-mobile-margin-top;

  @include mq(desktop) {
    margin-bottom: $accordion-desktop-margin-bottom;
    margin-top: $accordion-desktop-margin-top;
  }
}

.full-width-image__header {
  font-family: $full-width-image-header-font-family;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.13;
  margin: 0 0 10px;
  color: $full-width-image-header-font-color;

  @include mq(desktop) {
    font-size: 40px;
    line-height: 1.09;
  }

  @include mq(wide) {
    font-size: 44px;
  }
}

.full-width-image__figure {
  @include mq(desktop) {
    box-shadow: 0 0 15px rgba(#000, 0.1);
  }
}

.full-width-image__image {
  display: block;
  width: 100%;
}

.full-width-image__caption {
  line-height: 1.75;
  padding: 16px 28px 22px;

  @include mq(desktop) {
    display: block;
  }
}
  • URL: /components/raw/c-fmt-4-full-width-image-row/_styles.scss
  • Filesystem Path: src/components/C-FMT-4-full-width-image-row/_styles.scss
  • Size: 907 Bytes
  • Content: 
    $full-width-image-header-font-family: $primary-font !default;
$full-width-image-header-font-color: map-get($theme-colors, 'primary') !default;
  • URL: /components/raw/c-fmt-4-full-width-image-row/_variables.scss
  • Filesystem Path: src/components/C-FMT-4-full-width-image-row/_variables.scss
  • Size: 143 Bytes
  • Handle: @c-fmt-4-full-width-image-row
  • Preview:
  • Filesystem Path: src/components/C-FMT-4-full-width-image-row/C-FMT-4-full-width-image-row.hbs

Full Width Image Row

Allow content authors to feature full-width image content

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/full-width-image-row/styles';

Copy and paste to your project any of the markup in the alert 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 alert has a set of variables that may be overriden, or you may choose to just override the actual styles in your project.


@import '../../node_modules/@verndale/front-end-components/lib/full-width-image-row/styles';