Cornerstone

Title Card: Large Buttons

Suggested Image Sizes for Image Left/Right:

  • Small - 320x200
  • Medium - 750x400
  • Large - 750x600

Background Colors:

Works with Image Left/Right and Basic

  • None - _white
  • Grey - _grey
  • Purple - _purple

Flexbox Width (optional):

Must be inside a module-wrapper

<div class="tcu-module-wrapper">...</div>
  • Default - _flex-1of1
  • 2/3 - _flex-2of3
  • 1/2 - _flex-1of2
  • 1/3 - _flex-1of3
  • 1/4 - _flex-1of4
<div class="tcu-title-card _three-button _image-bg _white tcu-component" style="background-image:url('https://assets.tcu.edu/cornerstone/images/campus.jpg')">
    <div class="tcu-title-card__video tcu-video">
        <div id="vimeo-402741331" data-vimeo-id="402741331" data-vimeo-background="true" data-vimeo-width="1800" data-vimeo-height="700" data-vimeo-transparent="false">
        </div>
        <button aria-live="polite" class="_pause"><span aria-hidden="true">❚❚</span> Pause</button>
    </div>
    <div class="tcu-title-card__content">

        <div class="grid-x grid-margin-x grid-margin-y">
            <div class="cell large-auto"><a href="#" class="tcu-content-button _flex-2of3">
                    <h2 class="tcu-content-button__title">Graduate Programs</h2>
                    <div class="tcu-content-button__arrow"></div>
                </a>
            </div>
            <div class="cell large-auto"><a href="#" class="tcu-content-button _flex-2of3">
                    <h2 class="tcu-content-button__title">Diversity, Equity & Inclusion</h2>
                    <div class="tcu-content-button__arrow"></div>
                </a>
            </div>
            <div class="cell large-auto"><a href="#" class="tcu-content-button _flex-2of3">
                    <h2 class="tcu-content-button__title">Faculty & Staff</h2>
                    <div class="tcu-content-button__arrow"></div>
                </a>
            </div>
        </div>
    </div>
    <!-- /.tcu-module__inner -->
</div>