Cornerstone

Content Card

Content Card

The Content Card component creates an out-of-border image effect, using container queries to adjust its layout dynamically.

Container Queries

  • Medium breakpoint: 767px
  • Large breakpoint: 1300px

Border Effect

  • At the medium breakpoint, a pseudo-element is used to create a “fake border” effect around the image.
  • For the large breakpoint, margin adjustments are calculated to align the image and maintain the out-of-border effect both horizontally and vertically.

Shadow Effect

  • The image utilizes a drop shadow filter for depth.
  • Shadow offsets are stored in variables:
    • $shadow-x-offset-distance
    • $shadow-y-offset-distance
  • These values are used to center the image, including its shadow width, ensuring proper alignment in small and medium viewports using translate().
  • In the large container query, these shadow values are factored into margin calculations to maintain a precise out-of-border alignment, ensuring the shadow and image remain visually balanced.
<div class="tcu-content-card tcu-component">
    <div class="tcu-content-card__inner">
        <div class="tcu-content-card-image">
            <picture>
                <img src="https://www.tcu.edu/_resources/images/Founders-statue.jpg" alt="Image Alt Text" loading="lazy" />
            </picture>
        </div>
        <div class="tcu-content-card-body">
            <h2 class="tcu-content-card-body__title">
                <a href="#">More Than Words</a>
            </h2>
            <p class="tcu-content-card-body__text">Our values guide actions and behaviors that foster a uniquely engaging campus culture.</p>
        </div>
        <ul class="tcu-content-card-links">
            <li><a href="#">Our Mission, Vision & Values</a></li>
            <li><a href="#">Our Family History</a></li>
            <li><a href="#">Race & Reconciliation Initiative</a></li>
        </ul>
    </div>
</div>