Figure

When to use this component

Use the figure component to present an image on a page.

How it works

The figure component wraps an image in a container and adds the benefit of providing an optional caption tag.

Usage within the style guide

The figure component is used in the:

Hero image component

The hero image component is a figure component that wraps the hero image in a container and adds a caption tag, which in the hero image component is required.

<figure {% if modifier %} class="{{ modifier }}" {% endif %}>
  {% if subsite %}
    <div class="subsite">
      <div class="subsite-title">
        {% include '@image' with {
          'src': figure_logo_src_dark | path,
          'alt_text': figure_logo_alt_text,
          'modifier': 'dark',
          'ratio': null
        } %}
        {% include '@image' with {
          'src': figure_logo_src_light | path,
          'alt_text': figure_logo_alt_text,
          'modifier': 'light',
          'ratio': null
        } %}
        {% include '@heading' with {
          'type': 'h1',
          'heading_text': figure_title
        } %}
      </div>
    </div>
  {% endif %}
  {% include '@image' with {
    'src': figure_image_src,
    'alt_text': figure_image_alt_text,
    'ratio': figure_ratio
  } %}
  {% if figure_figcaption %}
    {% include '@figcaption' with {
      'figcaption': figure_figcaption
    } %}
  {% endif %}
</figure>
<figure class="hero">
    <div class="image-wrapper" data-ratio="4:1">
        <img src="https://via.placeholder.com/1600x400&text=4:1+(1600x400)" alt="Image alt text" class="hero" />
    </div>

    <figcaption>Figure caption comes here.</figcaption>
</figure>
{
  "figure_figcaption": "Figure caption comes here.",
  "figure_image_src": "https://via.placeholder.com/1600x400&text=4:1+(1600x400)",
  "figure_image_alt_text": "Image alt text",
  "figure_ratio": "4:1",
  "modifier": "hero"
}
  • Content:
    figure {
      img {
        display: block;
        width: 100%;
      }
    
      // Hero image, overlaps and hides breadcrumb accolade.
      &.hero {
        $span: percentage(2/12);
        margin: .3rem 0;
    
        @include tablet {
          position: relative;
          min-height: 1.6rem;
          // Give the image 1px margin relative to the container
          // so the accolade can overlap the edges
          // IE error fix
          margin: .3rem  calc(-1rem + 1px);
    
          @at-root hr + & {
            margin-top: -2rem;
          }
        }
    
        .subsite {
          @include tablet {
            display: flex;
            position: absolute;
            top: 0;
            right: 0;
            align-items: center;
            justify-content: center;
            width: span(4 wide of 12);
            max-width: 23rem;
            height: calc(100% - 1.6rem + 1px); // 1px to fix rendering issues
            margin: 0;
            padding: $gutter-width 2rem;
            text-align: center;
            z-index: 1;
          }
    
          @include desktop {
            padding: 0 2rem;
          }
    
    
          @media (min-width: $bp-max-content) {
            right: calc((100% - #{$bp-max-content}) / 2);
          }
    
          &::before,
          &::after {
            @include tablet {
              @include theme('background-color', 'color-primary', 'hero-background-color');
              @include theme('border-color', 'color-primary', 'hero-background-color');
              position: absolute;
              left: 0;
              width: 100%;
              height: auto;
              border: 1px solid;
              content: '';
              opacity: .94;
              z-index: -1;
            }
          }
    
          &::before {
            @include tablet {
              top: 0;
              bottom: 30%;
              border-bottom-left-radius: border-radius('radius-5');
            }
          }
    
          &::after {
            @include tablet {
              top: 70%;
              bottom: 0;
              border-top-left-radius: border-radius('radius-5');
            }
          }
    
          .subsite-title {
            display: inline-flex;
    
            @include tablet {
              display: block;
            }
          }
    
          img {
            display: inline-block;
            order: 2;
            width: auto;
            height: 1.7em;
            margin-left: .7rem;
    
            &.light {
              display: none;
            }
    
            @include tablet {
              order: 1;
              height: 3rem;
              margin-bottom: 1rem;
              margin-left: 0;
    
              &.light {
                display: inline-block;
              }
    
              &.dark {
                display: none;
              }
            }
    
            @include desktop {
              height: 4rem;
            }
    
            @media (min-width: $bp-max-content) {
              height: 5rem;
            }
          }
    
          h1 {
            order: 1;
            margin: 0;
            font-size: .9rem;
    
            @include tablet {
              @include theme('color', 'color-secondary', 'hero-text-color');
              order: 2;
              font-size: 1.2rem;
            }
    
            @include desktop {
              font-size: 1.6rem;
            }
    
            @media (min-width: $bp-max-content) {
              font-size: 2rem;
            }
    
            span {
              font-size: inherit;
    
              @include tablet {
                display: block;
                font-size: .9rem;
              }
    
              @include desktop {
                font-size: 1.2rem;
              }
    
              @media (min-width: $bp-max-content) {
                font-size: 1.5rem;
              }
            }
          }
        }
    
        .image-wrapper {
          display: none;
    
          @include tablet {
            display: block;
          }
        }
    
        img {
          display: none;
    
          @include tablet {
            display: block;
          }
        }
    
        figcaption {
          @extend %content-container;
          display: none;
          right: 0;
          width: auto;
    
          @include tablet {
            display: block;
            position: absolute;
            top: calc(100% - 1.6rem);
            left: 3rem + $gutter-width;
            margin: 0;
            padding: .4rem $gutter-width 0;
            z-index: 2;
    
            @include desktop {
              left: calc(#{$span} + 2rem);
            }
    
            @media (min-width: $bp-max-content) {
              right: calc((100% - #{$bp-max-content}) / 2);
              left: calc(#{$span} + 2rem + (100% - #{$bp-max-content}) / 2);
              padding-right: 0;
            }
          }
        }
    
        &::before,
        &::after {
          @include tablet {
            position: absolute;
            bottom: -.1rem;
            height: 1.7rem;
            background-color: color('white');
            content: '';
            z-index: 1;
          }
        }
    
        &::before {
          @include tablet {
            left: 0;
            width: 3rem + $gutter-width;
            border-top-right-radius: border-radius('radius-5');
          }
    
          @include desktop {
            width: calc(#{$span} + 2rem);
          }
    
          @media (min-width: $bp-max-content) {
            width: calc(#{$span} + 2rem + ((100% - #{$bp-max-content}) / 2));
          }
        }
    
        &::after {
          right: 0;
          width: auto;
    
          @include tablet {
            left: 3rem + $gutter-width;
            border-top-left-radius: border-radius('radius-5');
          }
    
          @include desktop {
            left: calc(#{$span} + 2rem);
          }
    
          @media (min-width: $bp-max-content) {
            // Make sure it overlaps the image edges.
            // IE error fix
            right: -1px;
            left: calc(#{$span} + 2rem + ((100% - #{$bp-max-content}) / 2));
          }
        }
    
        &:not(.hero--subsite) .subsite ~ figcaption { /// @deprecated
          left: 0;
          width: 100%;
          max-width: none;
          background-color: color('white');
    
          @media (min-width: $bp-max-content) {
            width: auto;
          }
        }
    
        &--subsite {
          &::before,
          &::after {
            width: 100%;
          }
        }
      }
    }
    
  • URL: /components/raw/figure/_figure.scss
  • Filesystem Path: components/31-molecules/figure/_figure.scss
  • Size: 5.6 KB