Cornerstone

Title Card: Image Right

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 _image-right _white tcu-component">
    <div class="tcu-title-card__inner">
        <div class="tcu-title-card__image">
            <picture><img src="https://assets.tcu.edu/cornerstone/images/campus.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>
    </div>
    <!-- /.tcu-module__inner -->
</div>