The Section Explorer is a flexible UI component used to tease and link to other sections of a site. It typically includes large, styled <a> elements that act as buttons—ideally displayed in groups of three.
<a> elements styled as large buttonsPlace up to 3 <a> elements within the component for ideal layout. If an image is provided, it will automatically be used as the background.
<div class="tcu-section-explorer tcu-component">
<div class="tcu-section-explorer__inner">
<div class="tcu-section-explorer__header">
<h2 class="tcu-section-explorer__title">Discover a Powerful Academic Community</h2>
<p>The teacher-scholar model is alive and well at TCU, where you’ll get personal attention and opportunities for research you won’t find elsewhere. You’re in great hands for beginning your academic journey.</p>
</div>
<div class="tcu-section-explorer__content grid-x">
<div class="cell large-auto">
<a href="#" class="tcu-section-explorer__button">
<h2 class="tcu-section-explorer__button-title">Graduate Programs</h2>
<div class="tcu-section-explorer__button-arrow"></div>
</a>
</div>
<div class="cell large-auto">
<a href="#" class="tcu-section-explorer__button">
<h2 class="tcu-section-explorer__button-title">Diversity, Equity & Inclusion</h2>
<div class="tcu-section-explorer__button-arrow"></div>
</a>
</div>
<div class="cell large-auto">
<a href="#" class="tcu-section-explorer__button">
<h2 class="tcu-section-explorer__button-title">Faculty & Staff</h2>
<div class="tcu-section-explorer__button-arrow"></div>
</a>
</div>
</div>
</div>
</div>