Cornerstone

Overlay Hero: Default

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 ">
    <div class="tcu-hero__image">
        <div class="image-flair"></div>

        <picture>
            <source media="(min-width: 1024px)" srcset="https://assets.tcu.edu/cornerstone/images/building-1800x600.jpg" />
            <source media="(min-width: 768px)" srcset="https://assets.tcu.edu/cornerstone/images/building-720x240.jpg" />
            <img src="https://assets.tcu.edu/cornerstone/images/building-380x200.jpg" alt="" />
        </picture>
    </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>