<div id="example-hero--image-only" class="cwf-hero">
              <div class="cwf-hero__content">
                  <img class="cwf-hero__image" src="https://picsum.photos/1200/1200" alt="A randomized 1:1 image from Picsum" />
              </div>
          </div>
{% if image.alt and image.src %}
    {% set floatingCaption = floating_caption.enable
        and caption is defined
        and caption
        ? 'cwf-hero--floating-caption'
    %} {% set captionAlignment = floatingCaption
        ? floating_caption.alignment ? floating_caption.alignment : 'center'
    %} {% set classes = [
        'cwf-hero',
        floatingCaption,
        floatingCaption ? 'cwf-hero--caption-' ~ captionAlignment
    ] %}
    <div id="{{ id ?? 'cwf-hero' }}" class="{{ classes|join(' ')|trim }}">
        {%- if image.background %}
            <img class="cwf-hero__background"
                src="{{ image.src }}"
                role="presentation" />
        {%- endif %} {%- if caption is defined and caption %}
            <figure class="cwf-hero__content">
                <img class="cwf-hero__image"
                    src="{{ image.src }}"
                    alt="{{ image.alt }}" />
                <figcaption class="cwf-hero__caption">
                    {{ caption }}
                </figcaption>
            </figure>
        {%- else %}
            <div class="cwf-hero__content">
                <img class="cwf-hero__image"
                    src="{{ image.src }}"
                    alt="{{ image.alt }}" />
            </div>
        {%- endif %}
    </div>
{% else %}
    <div id="{{ id ? 'cwf-hero--' ~ id }}" class="cwf-hero">
        <div class="cwf-hero__content">
            <div class="cwf-hero__caption">
                {{ caption }}
            </div>
        </div>
    </div>
{% endif %}
{
  "id": "example-hero--image-only",
  "image": {
    "alt": "A randomized 1:1 image from Picsum",
    "src": "https://picsum.photos/1200/1200"
  }
}
  • Content:
    // Hero component styles
    
    @import "../../shared/media";
    @import "../../shared/style";
    @import "../../shared/theme";
    
    $hero--background-color: style__color(black) !default;
    $hero--color: style__color(white) !default;
    
    .cwf-hero {
        position: relative;
        @include style__spacing;
        background-color: var(--cwf-hero--background-color);
        color: var(--cwf-hero--color);
        overflow: hidden;
        --cwf-hero--background-color: #{$hero--background-color};
        --cwf-hero--color: #{$hero--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;
    }
    
    .cwf-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;
            }
        }
    }
    
    .cwf-hero__content {
        @include theme__contain;
        overflow: hidden;
    }
    
    .cwf-hero--floating-caption .cwf-hero__content,
    .cwf-hero__background + .cwf-hero__content {
        position: relative;
    }
    
    .cwf-hero__image {
        display: block;
        width: 100%;
    }
    
    .cwf-hero__caption {
        padding: 2rem;
    
        @include style__children;
    
        $hero__link--color: style__color(gold) !default;
        $hero__link--active--color: darken(style__color(gold), 5%) !default;
    
        a {
            --cwf-link--color: #{$hero__link--color};
            --cwf-link--active--color: #{$hero__link--active--color};
        }
    
        $hero__button--background-color: transparent !default;
        $hero__button--border-color: style__color(white) !default;
        $hero__button--color: style__color(white) !default;
        $hero__button--active--background-color: style__color(white) !default;
        $hero__button--active--color: style__color(black) !default;
        $hero__button--hover-focus--background-color: style__color(white) !default;
        $hero__button--hover-focus--color: style__color(black) !default;
    
        .t4_button,
        .cwf-button {
            --cwf-button--background-color: #{$hero__button--background-color};
            --cwf-button--border-color: #{$hero__button--border-color};
            --cwf-button--color: #{$hero__button--color};
            --cwf-button--active--background-color: #{$hero__button--active--background-color};
            --cwf-button--active--color: #{$hero__button--active--color};
            --cwf-button--hover-focus--background-color: #{$hero__button--hover-focus--background-color};
            --cwf-button--hover-focus--color: #{$hero__button--hover-focus--color};
        }
    }
    
    $hero--floating-caption__caption--background-color: rgba(
        style__color(black),
        0.7
    ) !default;
    $hero--floating-caption__caption--reduced-transparency--background-color: style__color(
        black
    ) !default;
    
    .cwf-hero--floating-caption .cwf-hero__caption {
        @include media__breakpoint {
            position: absolute;
            left: 50%;
            bottom: 2rem;
            width: 50%;
            background-color: var(
                --cwf-hero--floating-caption__caption--background-color
            );
            transform: translateX(-50%);
            --cwf-hero--floating-caption__caption--background-color: #{$hero--floating-caption__caption--background-color};
    
            @include media__reduced(transparency) {
                --cwf-hero--floating-caption__caption--background-color: #{$hero--floating-caption__caption--reduced-transparency--background-color};
            }
    
            @include media__reduced(transparency, no-preference) {
                --cwf-hero--floating-caption__caption--background-color: #{$hero--floating-caption__caption--background-color};
            }
        }
    }
    
    .cwf-hero--caption-left .cwf-hero__caption {
        @include media__breakpoint {
            left: 3rem;
        }
    }
    
    .cwf-hero--caption-left .cwf-hero__caption,
    .cwf-hero--caption-right .cwf-hero__caption {
        @include media__breakpoint {
            transform: translateX(0);
        }
    }
    
    .cwf-hero--caption-right .cwf-hero__caption {
        @include media__breakpoint {
            left: unset;
            right: 3rem;
        }
    }
    
  • URL: /components/raw/hero/_index.scss
  • Filesystem Path: components/hero/_index.scss
  • Size: 4.1 KB

No notes defined.