Cornerstone

Title Card: Background Image

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 _image-bg _purple tcu-component" style="background-image:url('https://assets.tcu.edu/cornerstone/images/tcu-experience-bkgd.jpg')">
    <div class="tcu-title-card__image">
        <picture><img src="https://assets.tcu.edu/cornerstone/images/tcu-experience-bkgd.jpg" alt=""></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="tcu-button  | button ">
                Primary Button
            </a>
        </div>
    </div>
    <!-- /.tcu-module__inner -->
</div>