VCU Compass Web Framework

Hero: Background Enabled 

<div id="example-hero--background-enabled" class="cwf-hero cwf-hero--floating-caption cwf-hero--caption-right cwf-hero--caption-blur"><img class="cwf-hero__background" src="https://picsum.photos/2000/1125" role="presentation" />
                                            <figure class="cwf-hero__content">
                                                <img class="cwf-hero__image" src="https://picsum.photos/2000/1125" alt="A randomized 16:9 image from Picsum" />
                                                <figcaption class="cwf-hero__caption">
                                                    <h3>Caption</h3>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                                </figcaption>
                                            </figure>
                                        </div>
 
{%- set captionContent = caption is iterable ? caption.content : caption -%}
{%- set floatingCaption = image.alt
    and image.src
    and caption is defined
    and caption.floating
    and captionContent
    ? 'cwf-hero--floating-caption'
-%}
{%- set captionAlignment = '' -%}
{%- if floatingCaption and caption.alignment -%}
    {% set captionAlignment = [] %}
    {% set captionAlignments = caption.alignment %}
    {% if captionAlignments is not iterable %}
        {% set captionAlignments = [captionAlignments] %}
    {% endif %}
    {% for alignment in captionAlignments %}
        {% set captionAlignment =
            captionAlignment|merge(['cwf-hero--caption-' ~ alignment])
        %}
    {% endfor %}
    {% set captionAlignment = captionAlignment|join(' ') %}
{%- endif -%}
{%- set blurredCaption = floatingCaption and caption.blur
    ? 'cwf-hero--caption-blur'
-%}
{%- set classes = [
    'cwf-hero',
    floatingCaption,
    captionAlignment,
    blurredCaption
] -%}
<div id="{{ id ?? 'cwf-hero' }}" class="{{ classes|join(' ')|trim }}">
    {%- if image.alt and image.src -%}
        {%- if image.background -%}
            <img class="cwf-hero__background"
                src="{{ image.src }}"
                role="presentation" />
        {%- endif -%}
        {%- if caption is defined and captionContent -%}
            <figure class="cwf-hero__content">
                <img class="cwf-hero__image"
                    src="{{ image.src }}"
                    alt="{{ image.alt }}" />
                <figcaption class="cwf-hero__caption">
                    {{ captionContent }}
                </figcaption>
            </figure>
        {%- else -%}
            <div class="cwf-hero__content">
                <img class="cwf-hero__image"
                    src="{{ image.src }}"
                    alt="{{ image.alt }}" />
            </div>
        {%- endif -%}
    {%- else -%}
        <div class="cwf-hero__content">
            <div class="cwf-hero__caption">
                {{ captionContent }}
            </div>
        </div>
    {%- endif -%}
</div>
 
{
  "id": "example-hero--background-enabled",
  "caption": {
    "floating": true,
    "blur": true,
    "alignment": "right",
    "content": "<h3>Caption</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>"
  },
  "image": {
    "background": true,
    "alt": "A randomized 16:9 image from Picsum",
    "src": "https://picsum.photos/2000/1125"
  }
}
  • Content: 
    // Hero component styles

@use "../../shared/media";
@use "../../shared/style";
@use "../../shared/theme";

@use "../../utilities/marker/shared" as marker;

// Selector prefix
$prefix: "cwf" !default;

$background-color: style.color("black") !default;
$color: style.color("white") !default;

.#{$prefix}-hero {
    position: relative;
    @include style.spacing;
    background-color: var(--cwf-hero--background-color);
    color: var(--cwf-hero--color);
    overflow: hidden;
    --cwf-hero--background-color: #{$background-color};
    --cwf-hero--color: #{$color};
}

@mixin hero__background {
    display: block;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%) scale(1.1);
    filter: blur(2rem);
    backface-visibility: hidden;
    opacity: 0.5;
}

.#{$prefix}-hero__background {
    display: none;
    @include media.breakpoint("lg") {
        @include hero__background;

        @include media.reduced(transparency) {
            display: none;
        }

        @include media.reduced(transparency, no-preference) {
            @include hero__background;
        }
    }
}

.#{$prefix}-hero__content {
    @include theme.contain;
    overflow: hidden;
}

.#{$prefix}-hero--floating-caption .#{$prefix}-hero__content,
.#{$prefix}-hero__background + .#{$prefix}-hero__content {
    position: relative;
}

.#{$prefix}-hero__image {
    display: block;
    width: 100%;
}

.#{$prefix}-hero__caption {
    padding: 2rem;

    @include style.children;

    $link__color: style.color("gold") !default;
    $link--active__color: style.darken("gold", 5%) !default;

    a {
        --cwf-link--color: #{$link__color};
        --cwf-link--active--color: #{$link--active__color};
    }

    $button__background-color: transparent !default;
    $button__border-color: style.color("white") !default;
    $button__color: style.color("white") !default;
    $button--active__background-color: style.color("white") !default;
    $button--active__color: style.color("black") !default;
    $button--interact__background-color: style.color("white") !default;
    $button--interact__color: style.color("black") !default;

    .t4_button,
    .#{$prefix}-button {
        --cwf-button--background-color: #{$button__background-color};
        --cwf-button--border-color: #{$button__border-color};
        --cwf-button--color: #{$button__color};
        --cwf-button--active--background-color: #{$button--active__background-color};
        --cwf-button--active--color: #{$button--active__color};
        --cwf-button--hover-focus--background-color: #{$button--interact__background-color};
        --cwf-button--hover-focus--color: #{$button--interact__color};
    }
}

// Floating caption (bottom middle by default)

$caption--floating__background-color: style.opacity("black", 70%) !default;
$caption--floating__background-color--reduced-transparency: style.color(
    "black"
) !default;

.#{$prefix}-hero--floating-caption .#{$prefix}-hero__caption {
    @include media.breakpoint {
        position: absolute;
        left: 50%;
        bottom: 2rem;
        width: 50%;
        transform: translateX(-50%);
        --cwf-hero--floating-caption__caption--background-color: #{$caption--floating__background-color};

        @include media.breakpoint {
            background-color: var(
                --cwf-hero--floating-caption__caption--background-color
            );

            @include media.reduced(transparency) {
                --cwf-hero--floating-caption__caption--background-color: #{$caption--floating__background-color--reduced-transparency};
            }

            @include media.reduced(transparency, no-preference) {
                --cwf-hero--floating-caption__caption--background-color: #{$caption--floating__background-color};
            }
        }
    }
}

@mixin caption--floating {
    &:is(.#{$prefix}-hero--floating-caption) .#{$prefix}-hero__caption {
        @include media.breakpoint {
            @content;
        }
    }
}

// Top floating caption

.#{$prefix}-hero--caption-top {
    @include caption--floating {
        bottom: unset;
        top: 2rem;
    }
}

// Reset floating captions x-translation transform

%hero-floating-caption-reset-x-translate {
    @include caption--floating {
        transform: translateX(0);
    }
}

// Left floating caption

.#{$prefix}-hero--caption-left {
    @extend %hero-floating-caption-reset-x-translate;
    @include caption--floating {
        left: 3rem;
    }
}

// Right floating caption

.#{$prefix}-hero--caption-right {
    @extend %hero-floating-caption-reset-x-translate;
    @include caption--floating {
        left: unset;
        right: 3rem;
    }
}

// Blurred floating caption

$caption--blur__amount: 1rem;
$caption--blur__backdrop-filter: blur(
    var(--cwf-hero--floating-caption__caption--blur)
) !default;
$caption--blur__backdrop-filter--reduced-transparency: none !default;

.#{$prefix}-hero--caption-blur {
    @include caption--floating {
        --cwf-hero--floating-caption__caption--blur: #{$caption--blur__amount};
        --cwf-hero--floating-caption__caption--backdrop-filter: #{$caption--blur__backdrop-filter};

        @include media.breakpoint {
            backdrop-filter: var(
                --cwf-hero--floating-caption__caption--backdrop-filter
            );

            @include media.reduced(transparency) {
                --cwf-hero--floating-caption__caption--backdrop-filter: #{$caption--blur__backdrop-filter--reduced-transparency};
            }

            @include media.reduced(transparency, no-preference) {
                --cwf-hero--floating-caption__caption--backdrop-filter: #{$caption--blur__backdrop-filter};
            }
        }
    }
}
  • URL: /components/raw/hero/_index.scss
  • Filesystem Path: components/hero/_index.scss
  • Size: 5.7 KB

Hero

The hero component is a large promotional section that brings the user’s attention to prioritized content. It can be used to promininently display just an image, and image with a caption, or just a caption.

Markup

All heroes are wrapped in a .cwf-hero element. If only caption text is provided, it will contain a .cwf-hero__content div with a .cwf-hero__caption div inside it. If only an image is provided, an optional, blurred .cwf-hero__background image will show up behind the main .cwf-hero__image image contained within a .cwf-hero__content. When an image and caption are used, its a combination of the previous two structures but using figure and figcaption elements instead of divs.

Floating captions

By default, captions will be displayed below an image; This is useful for and should be used when horizontal space is limited, such as inside the sidebar. To make a hero’s captions float, add a .cwf-hero--floating-captions modifier to the wrapping element. Floating will be automatically be disabled when the viewport is too small.

Caption alignment

By default, floating captions will show up at the bottom center of a hero’s content area. There are 3 wrapping element modifiers that can adjust this:

  1. .cwf-hero--caption-left - Moves the caption horizontally to the left
  2. .cwf-hero--caption-right - Moves the caption horizontally to the right
  3. .cwf-hero--caption-top - Moves the caption vertically to the top

Horizontal and vertical caption alignment modifiers can be used in tandem to place the caption in 6 distinct areas of a hero’s content.

Blurred caption background

If a caption appears less readable due to the image it sits on top of, you can add a .cwf-hero--caption-blur modifier to the wrapping element to give the caption a frosted-glass appearance. At the time of writing, this option does not work in all browsers supported by Compass.

Javascript

There is no hero specific javascript included.

T4 implementation

Heroes are implement in T4 as the “Hero” plugin, meanining its classes are .plugin- prefixed instead of .cwf- prefixed.

When using the hero plugin in the sidebar area, the floating captions layout will be disabled, meaning the caption will site below the image.

Areas

In the “Name” field of the “Hero” plugin, the following case-insensitive keywords can be used to change the area in which the hero appears:

  • Feature - Moves the hero to the feature area of the page (below the main navigation, above the sidebars and main content).
  • Sidebar - Moves the hero to the sidebar area of the page (right of the main content).
  • Footer - Moves the hero to the footer area of the page (above the footer, below the sidebars and main content).

This plugin can also be used within the global “Site-Feature”, “Site-Sidebar”, and “Site-Footer” sections to have it displayed globally within the feature, sidebar, and footer areas respectively.

Injectors

In the “Name” field of the “Hero” plugin, the following injectors can be used:

  • id:{custom_id} - Overrides the default, T4 ID of the hero with a custom ID.
  • blur:{false} - Disables the blurred background of the hero.
  • float:{false} - Disables the hero’s caption from floating.
  • caption:{top,left,right,blur} - Changes where and how the hero’s caption appears. Can be one or more lowercase, space separated keywords:
    • top - Moves the caption to the top of the hero.
    • left - Moves the caption to the left of the hero.
    • right - Moves the caption to the right of the hero.
    • blur - Blurs the caption’s background.
  • class:{custom_classes} - Adds custom classes to the hero.
  • style:{custom_styles} - Adds custom styles to a style attribute of the hero.
  • before:{custom_html} - Adds custom HTML before the hero.
  • after:{custom_html} - Adds custom HTML after the hero.