Cornerstone

List Card

List Card Component

The List Card is a layout component designed to display up to three lists within a flexible container.

Each list is rendered as its own section and uses a container query to adapt its layout based on the available space. When there is enough width, list items are spread out horizontally. On narrower containers, items automatically wrap to maintain readability and structure.

Features

  • Supports up to three list sections
  • Responsive layout using CSS container queries
  • Each section includes a heading and a list of items
  • Automatically adapts between horizontal and wrapped layouts
<div class="tcu-list-card">
    <div class="tcu-list-card__item-wrapper">
        <div class="tcu-list-card__item">
            <h2 class="tcu-list-card__item-title">Links</h2>
            <div class="tcu-list-card__item-content">
                <ul>
                    <li><a href=''>ADDRAN COLLEGE OF LIBERAL ARTS</a></li>
                    <li><a href=''>VISIT DEPARTMENT WEBSITE</a></li>
                    <li><a href=''>SCHEDULE CAMPUS VISIT</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="tcu-list-card__item-wrapper">
        <div class="tcu-list-card__item">
            <h2 class="tcu-list-card__item-title">Contact</h2>
            <div class="tcu-list-card__item-content">
                <ul>
                    <li>Undergraduate Programs:<br>Dr. Katherine Polzer<br>817-257-6038</li>
                    <li>Graduate Programs:<br>Dr. Kendra Bowen<br>817-257-5846</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="tcu-list-card__item-wrapper">
        <div class="tcu-list-card__item">
            <h2 class="tcu-list-card__item-title">Apply</h2>
            <div class="tcu-list-card__item-content">
                <ul>
                    <li><a href=''>UNDERGRADUATE APPLICATION</a></li>
                    <li><a href=''>GRADUATE APPLICATION</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>