Cornerstone

Impact Display Card

A card component that includes a title, text, buttons, and an image. It optionally includes an svg icon, text, and an attribute line.

This component is intended to be used at the bottom of the page.

<div class="tcu-impact-display-card">
    <div class="tcu-impact-display-card__inner">
        <div class="tcu-impact-display-card__content">
            <h2>Come See for Yourself.</h2>
            <p>Tour our beautiful campus.</p>
            <div class="button-group stacked-for-small">
                <a href="#" class="button hollow">Tour In-Person</a>
                <a href="#" class="button hollow">Tour Virtually</a>
                <a href="#" class="button hollow">Interactive Map</a>
            </div>
        </div>
        <div class="tcu-impact-display-card__divider"></div>
        <div class="tcu-impact-display-card__image">
            <picture>
                <source srcset="https://www.tcu.edu/images/home/impact-card/picture-yourself-impact-card-390x624.webp" media="(orientation: portrait)" />
                <img loading="lazy" src="https://www.tcu.edu/images/home/impact-card/picture-yourself-impact-card-1300x747.webp" alt="" />
            </picture>
            <div class="tcu-impact-display-card__note">
                <div class="tcu-impact-display-card__note-icon"><img loading="lazy" src="https://www.tcu.edu//images/home/impact-card/icon-ribbon.svg" alt="Ribbon" /></div>
                <div class="tcu-impact-display-card__note-text">
                    America’s Most Beautiful College Campuses<br />
                    <em>The Princeton Review, 2025</em>
                </div>
            </div>
        </div>
    </div>
</div>