<div id="example-hero--background-enabled" class="cwf-hero cwf-hero--floating-caption"> <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">
                      <h2>
                          Featured
                      </h2>
                      <p>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique
                          quam in purus eleifend maximus. Nullam sed magna eget leo consequat
                          faucibus in vitae magna.
                      </p>
                      <p>
                          <a class="cwf-button" href="/">Compass</a>
                      </p>
                  </figcaption>
              </figure>
          </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--background-enabled",
  "floating_caption": {
    "enable": true,
    "alignment": "left"
  },
  "image": {
    "background": true,
    "alt": "A randomized 16:9 image from Picsum",
    "src": "https://picsum.photos/2000/1125"
  },
  "caption": "<h2>\n    Featured\n</h2>\n<p>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique\n    quam in purus eleifend maximus. Nullam sed magna eget leo consequat\n    faucibus in vitae magna.\n</p>\n<p>\n    <a class=\"cwf-button\" href=\"/\">Compass</a>\n</p>"
}
  • 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.