VCU Compass Web Framework

Hero: No Image 

<div id="" class="cwf-hero">
        <div class="cwf-hero__content">
            <div 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 class="t4_button"><a href="/">Compass</a></p>
            </div>
        </div>
    </div>
 
{% if image.alt and image.src %}
    {% set floatingCaption = floating_caption.enable
        ? 'cwf-hero--floating-caption'
    %}
    {% set captionAlignment = floatingCaption
        ? floating_caption.alignment ? floating_caption.alignment : 'center'
    %}
    {% set classes = [
        'cwf-hero',
        floatingCaption,
        'cwf-hero--caption-' ~ captionAlignment
    ] %}
    <div id="{{ id is defined ? 'cwf-hero--' ~ id }}"
        class="{{ classes|join(' ') }}">
        {%- if image.background %}
            <img class="cwf-hero__background"
                src="{{ image.src }}"
                role="presentation" />
        {%- endif %}
        <figure class="cwf-hero__content">
            <img class="cwf-hero__image"
                src="{{ image.src }}"
                alt="{{ image.alt }}" />
            <figcaption class="cwf-hero__caption">
                {{ caption }}
            </figcaption>
        </figure>
    </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 %}
 
{
  "floating_caption": null,
  "image": null,
  "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 class=\"t4_button\"><a href=\"/\">Compass</a></p>",
  "id": 0
}
  • Content: 
    // Hero component styles

@import "../../shared/scss/media";
@import "../../shared/scss/style";

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

.cwf-hero {
    position: relative;
    margin-bottom: 1rem;
    background-color: style__color(black);
    color: style__color(white);
    overflow: hidden;
}

.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 {
    margin: 0 auto;
    max-width: map-get($media__breakpoints, lg);
    overflow: hidden;
}

.cwf-hero--floating-caption .cwf-hero__content {
    position: relative;
}

.cwf-hero__image {
    display: block;
    width: 100%;
}

.cwf-hero__caption {
    padding: 2rem;

    & > *:first-child {
        margin-top: 0;
        padding-top: 0;
    }

    & > *:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    a {
        color: style__color(gold);
        &:hover,
        &:focus {
            color: darken(style__color(gold), 5%);
        }
    }

    .t4_button,
    .cwf-button {
        --cwf-button--background-color: #{transparent};
        --cwf-button--border-color: #{style__color(white)};
        --cwf-button--color: #{style__color(white)};
        --cwf-button--active--background-color: #{style__color(white)};
        --cwf-button--active--color: #{style__color(black)};
        --cwf-button--hover-focus--background-color: #{style__color(white)};
        --cwf-button--hover-focus--color: #{style__color(black)};
    }
}

.cwf-hero--floating-caption .cwf-hero__caption {
    @include media__breakpoint {
        position: absolute;
        left: 50%;
        bottom: 2rem;
        width: 50%;
        background-color: rgba(style__color(black), 0.7);
        transform: translateX(-50%);

        @include media__reduced(transparency) {
            background-color: style__color(black);
        }

        @include media__reduced(transparency, no-preference) {
            background-color: rgba(style__color(black), 0.7);
        }
    }
}

.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/_styles.scss
  • Filesystem Path: src/components/hero/_styles.scss
  • Size: 2.8 KB

Hero components will span the width of their container and should be used for featuring a good image.