Cornerstone

Fact Banner

The Fact Banner has been updated. The previous version, which used Flickity and icons, has been deprecated.

The new Lead-On-7 Fact Banner no longer relies on Flickity or icons. Instead, it utilizes a grid-based layout to efficiently handle multiple facts and numbers in an organized manner.

This update improves structure, readability, and usability. By removing the reliance on icons, it eliminates a potential deterrent, making it easier for people to use and integrate.

<div class="tcu-fact-banner tcu-component">
    <div class="tcu-fact-banner__inner">

        <div class="tcu-fact-banner__header">
            <h2 class="tcu-fact-banner__title">This is TCU</h2>

            <a class="tcu-fact-banner__header-cta" href="#">see all quick facts</a>
        </div>

        <ul class="tcu-fact-banner__list">
            <li class="tcu-fact-banner__card">
                <div class="tcu-fact">
                    <div class="tcu-fact__number">
                        100%
                    </div>
                    <div class="tcu-fact__text">
                        <p>teacher placement</p>
                    </div>
                </div>
            </li>
            <li class="tcu-fact-banner__card">
                <div class="tcu-fact">
                    <div class="tcu-fact__number">
                        80%
                    </div>
                    <div class="tcu-fact__text">
                        <p>of graduates teach locally</p>
                    </div>
                </div>
            </li>
            <li class="tcu-fact-banner__card">
                <div class="tcu-fact">
                    <div class="tcu-fact__number">
                        2
                    </div>
                    <div class="tcu-fact__text">
                        <p>special education lab schools</p>
                    </div>
                </div>
            </li>
            <li class="tcu-fact-banner__card">
                <div class="tcu-fact">
                    <div class="tcu-fact__number">
                        12
                    </div>
                    <div class="tcu-fact__text">
                        <p>nationally ranked graduate programs</p>
                    </div>
                </div>
            </li>
        </ul>

        <p class="tcu-fact-banner__footnote"></p>
    </div>
</div>