Cornerstone

Title Card Set

A set of title cards that dynamically set the left/right classes. Use a min of 2 and a max of 8 title cards.

<div class="tcu-title-card-set">
    <div class="tcu-title-card _image-left  tcu-component">
        <div class="tcu-title-card__inner">
            <div class="tcu-title-card__image">
                <picture>
                    <source media="(min-width: 1024px)" srcset="">
                    <source media="(min-width: 768px)" srcset="">
                    <img src="https://assets.tcu.edu/cornerstone/images/classroom-840x670.jpg" alt="Student skating through campus" loading="lazy">
                </picture>
            </div>
            <div class="tcu-title-card__content">
                <div class="tcu-title-card__header">
                    <div class="tcu-title-card__hammerhead tcu-hammerhead">Title Card Hammerhead</div>
                    <h2 class="tcu-title-card__headline">Title Card Headline</h2>
                </div>
                <p>Title Card Content Block (optional)</p>
                <div class="button-group">

                    <a href="#" class="button ">
                        Primary Button
                    </a>
                </div>
            </div>
        </div>
        <!-- /.tcu-module__inner -->
    </div>
    <div class="tcu-title-card _image-right  tcu-component">
        <div class="tcu-title-card__inner">
            <div class="tcu-title-card__image">
                <picture>
                    <source media="(min-width: 1024px)" srcset="">
                    <source media="(min-width: 768px)" srcset="">
                    <img src="https://assets.tcu.edu/cornerstone/images/classroom-840x670.jpg" alt="Student skating through campus" loading="lazy">
                </picture>
            </div>
            <div class="tcu-title-card__content">
                <div class="tcu-title-card__header">
                    <div class="tcu-title-card__hammerhead tcu-hammerhead">Title Card Hammerhead</div>
                    <h2 class="tcu-title-card__headline">Title Card Headline</h2>
                </div>
                <p>Title Card Content Block (optional)</p>
                <div class="button-group">

                    <a href="#" class="button ">
                        Primary Button
                    </a>
                </div>
            </div>
        </div>
        <!-- /.tcu-module__inner -->
    </div>
    <div class="tcu-title-card _image-left  tcu-component">
        <div class="tcu-title-card__inner">
            <div class="tcu-title-card__image">
                <picture>
                    <source media="(min-width: 1024px)" srcset="">
                    <source media="(min-width: 768px)" srcset="">
                    <img src="https://assets.tcu.edu/cornerstone/images/classroom-840x670.jpg" alt="Student skating through campus" loading="lazy">
                </picture>
            </div>
            <div class="tcu-title-card__content">
                <div class="tcu-title-card__header">
                    <div class="tcu-title-card__hammerhead tcu-hammerhead">Title Card Hammerhead</div>
                    <h2 class="tcu-title-card__headline">Title Card Headline</h2>
                </div>
                <p>Title Card Content Block (optional)</p>
                <div class="button-group">

                    <a href="#" class="button ">
                        Primary Button
                    </a>
                </div>
            </div>
        </div>
        <!-- /.tcu-module__inner -->
    </div>
    <div class="tcu-title-card _image-right  tcu-component">
        <div class="tcu-title-card__inner">
            <div class="tcu-title-card__image">
                <picture>
                    <source media="(min-width: 1024px)" srcset="">
                    <source media="(min-width: 768px)" srcset="">
                    <img src="https://assets.tcu.edu/cornerstone/images/classroom-840x670.jpg" alt="Student skating through campus" loading="lazy">
                </picture>
            </div>
            <div class="tcu-title-card__content">
                <div class="tcu-title-card__header">
                    <div class="tcu-title-card__hammerhead tcu-hammerhead">Title Card Hammerhead</div>
                    <h2 class="tcu-title-card__headline">Title Card Headline</h2>
                </div>
                <p>Title Card Content Block (optional)</p>
                <div class="button-group">

                    <a href="#" class="button ">
                        Primary Button
                    </a>
                </div>
            </div>
        </div>
        <!-- /.tcu-module__inner -->
    </div>
    <div class="tcu-title-card _image-left  tcu-component">
        <div class="tcu-title-card__inner">
            <div class="tcu-title-card__image">
                <picture>
                    <source media="(min-width: 1024px)" srcset="">
                    <source media="(min-width: 768px)" srcset="">
                    <img src="https://assets.tcu.edu/cornerstone/images/classroom-840x670.jpg" alt="Student skating through campus" loading="lazy">
                </picture>
            </div>
            <div class="tcu-title-card__content">
                <div class="tcu-title-card__header">
                    <div class="tcu-title-card__hammerhead tcu-hammerhead">Title Card Hammerhead</div>
                    <h2 class="tcu-title-card__headline">Title Card Headline</h2>
                </div>
                <p>Title Card Content Block (optional)</p>
                <div class="button-group">

                    <a href="#" class="button ">
                        Primary Button
                    </a>
                </div>
            </div>
        </div>
        <!-- /.tcu-module__inner -->
    </div>
    <div class="tcu-title-card _image-right  tcu-component">
        <div class="tcu-title-card__inner">
            <div class="tcu-title-card__image">
                <picture>
                    <source media="(min-width: 1024px)" srcset="">
                    <source media="(min-width: 768px)" srcset="">
                    <img src="https://assets.tcu.edu/cornerstone/images/classroom-840x670.jpg" alt="Student skating through campus" loading="lazy">
                </picture>
            </div>
            <div class="tcu-title-card__content">
                <div class="tcu-title-card__header">
                    <div class="tcu-title-card__hammerhead tcu-hammerhead">Title Card Hammerhead</div>
                    <h2 class="tcu-title-card__headline">Title Card Headline</h2>
                </div>
                <p>Title Card Content Block (optional)</p>
                <div class="button-group">

                    <a href="#" class="button ">
                        Primary Button
                    </a>
                </div>
            </div>
        </div>
        <!-- /.tcu-module__inner -->
    </div>
    <div class="tcu-title-card _image-left  tcu-component">
        <div class="tcu-title-card__inner">
            <div class="tcu-title-card__image">
                <picture>
                    <source media="(min-width: 1024px)" srcset="">
                    <source media="(min-width: 768px)" srcset="">
                    <img src="https://assets.tcu.edu/cornerstone/images/classroom-840x670.jpg" alt="Student skating through campus" loading="lazy">
                </picture>
            </div>
            <div class="tcu-title-card__content">
                <div class="tcu-title-card__header">
                    <div class="tcu-title-card__hammerhead tcu-hammerhead">Title Card Hammerhead</div>
                    <h2 class="tcu-title-card__headline">Title Card Headline</h2>
                </div>
                <p>Title Card Content Block (optional)</p>
                <div class="button-group">

                    <a href="#" class="button ">
                        Primary Button
                    </a>
                </div>
            </div>
        </div>
        <!-- /.tcu-module__inner -->
    </div>
    <div class="tcu-title-card _image-right  tcu-component">
        <div class="tcu-title-card__inner">
            <div class="tcu-title-card__image">
                <picture>
                    <source media="(min-width: 1024px)" srcset="">
                    <source media="(min-width: 768px)" srcset="">
                    <img src="https://assets.tcu.edu/cornerstone/images/classroom-840x670.jpg" alt="Student skating through campus" loading="lazy">
                </picture>
            </div>
            <div class="tcu-title-card__content">
                <div class="tcu-title-card__header">
                    <div class="tcu-title-card__hammerhead tcu-hammerhead">Title Card Hammerhead</div>
                    <h2 class="tcu-title-card__headline">Title Card Headline</h2>
                </div>
                <p>Title Card Content Block (optional)</p>
                <div class="button-group">

                    <a href="#" class="button ">
                        Primary Button
                    </a>
                </div>
            </div>
        </div>
        <!-- /.tcu-module__inner -->
    </div>
</div>