Cornerstone

Overlay Hero: Video

Overlay Hero

The Overlay Hero resembles the legacy hero while maintaining the new tcu-hero markup.

Usage

Add the _overlay class to the tcu-hero element to apply overlay styles. This works with both images and video.

Customization

The component is highly customizable through CSS variables, allowing you to adjust:

  • Aspect ratio
  • Fonts
  • Content positioning
  • Content styles
<section class="tcu-hero _overlay _video">
    <div class="tcu-hero__image">
        <div class="image-flair"></div>

        <div class=" tcu-video">
            <div id="vimeo-https://player.vimeo.com/video/911004112" data-vimeo-id="https://player.vimeo.com/video/911004112" data-vimeo-responsive="true" data-vimeo-background="true" data-vimeo-width="1800" data-vimeo-height="600" data-vimeo-transparent="false">
            </div>
            <button aria-live="polite" class="_pause"><span aria-hidden="true">❚❚</span> Pause</button>
        </div>
    </div>

    <div class="tcu-hero__divider"></div>

    <div class="tcu-hero__content">

        <h1 class="tcu-hero__header">
            <a href="/">admission & financial aid</a>
        </h1>

        <div class="tcu-hero__description">
            <p class="tcu-hero__statement">Do you have the sense of purpose and drive to be a Horned Frog?</p>
            <p>Teachers in the United States rate their lives better than any other position besides physicians.</p>
            <div class="button-group">

                <a href="#" class="button ">
                    Get Started
                </a>
            </div>
        </div>
    </div>
</section>