Buttons can be a or button elements. They can be modified with various classes.

If you are linking to a page or an anchor, use the a element.

Example:

<a class="tcu-button _primary" href="https://www.tcu.edu/apply.php">Apply</a>

If you are triggering an event with JavaScript, use the button element.

Example:

<button class="tcu-button _secondary">Expand Menu<button>

How to style a component button

Instead of using specific button classes like secondary or hollow in a component, style the button using button mixins and css custom properties. This allows us to be more flexible with button styles within components.

CSS Custom Properties:

• –button-background
• –button-color
• –button-border-color
• –button-border-width

Mixins:

• primary-button
• hover-button
• secondary-button
• hollow-button
• clear-button

Example of a component with hollow buttons set with mixins:

<div class="tcu-component">
  ...
  <div class="button-group">
    <a href="#" class="button">Visit</a>
  </div>
</div>

  .tcu-component {
    @include hollow-button();
  }

Learn more about Modern Campus forms

Form markup is generated with /xsl/_shared/forms.xsl

These are examples of icons from the _partials/svgs.twig SVG map.

Icons in the SVG map should use CSS Custom Properties for their fill and stroke. If the icon will be in an interactive element, it should include an inline transition style.

--iconColor
--borderColor
--logoColor

style="transition: var(--transition)"

To change the colors, set the custom properties on the svg element.

a:hover svg {
  --bgColor: var(--color-secondary);
  --iconColor: var(--color-primary);
  --borderColor: var(--color-secondary);
  }

Images within the main content area will default to having a different image treatment depending on the site. If there is no image treatment or it’s using a disabled class, the image will just show normally.

Images within the main content area will default to having a different image treatment depending on the site. If there is no image treatment or it’s using a disabled class, the image will just show normally.

Images within the main content area will default to having a different image treatment depending on the site. If there is no image treatment or it’s using a disabled class, the image will just show normally.

Default

For the Default table, the following classes are available to customize the table:

• unstriped
• hover
• stack
• scroll

Responsive

A responsive table reorders itself on mobile so that it’s easier to view. This is best for simple tables.

Scrollable

For complex tables, it’s best to use a scrollable table. This keeps the information in its original format on mobile and uses a scrolling container.

A caption is required for accessibility but doesn’t need to render on the front end.

Default

For the Default table, the following classes are available to customize the table:

• unstriped
• hover
• stack
• scroll

Responsive

A responsive table reorders itself on mobile so that it’s easier to view. This is best for simple tables.

Scrollable

For complex tables, it’s best to use a scrollable table. This keeps the information in its original format on mobile and uses a scrolling container.

A caption is required for accessibility but doesn’t need to render on the front end.

Default

For the Default table, the following classes are available to customize the table:

• unstriped
• hover
• stack
• scroll

Responsive

A responsive table reorders itself on mobile so that it’s easier to view. This is best for simple tables.

Scrollable

For complex tables, it’s best to use a scrollable table. This keeps the information in its original format on mobile and uses a scrolling container.

A caption is required for accessibility but doesn’t need to render on the front end.

Create a show/hide accordion-style element

The accordion is set to automatically open the first accordion in the accordion container.

For omniCMS, to have a closed accordion by default, make sure you add the class _collapsed to the accordion table.

For development, to have a closed accordion by default, make sure you add data-open="false" in the accordion header.

Create a show/hide accordion-style element

The accordion is set to automatically open the first accordion in the accordion container.

For omniCMS, to have a closed accordion by default, make sure you add the class _collapsed to the accordion table.

For development, to have a closed accordion by default, make sure you add data-open="false" in the accordion header.

Create a show/hide accordion-style element

The accordion is set to automatically open the first accordion in the accordion container.

For omniCMS, to have a closed accordion by default, make sure you add the class _collapsed to the accordion table.

For development, to have a closed accordion by default, make sure you add data-open="false" in the accordion header.

Action Bar

The Action Bar is a fixed element at the bottom of the page that provides a list of call-to-action items. It is designed to keep key interactions accessible and can be easily customized using SCSS.

Background Container

The background container…

The use case is currently limited to WWW(tcu.edu), CSE, Admissions, Addran.

<div
  id="tcu-background-container-5"
  class="tcu-module-wrapper _full-width tcu-background-container _has-image "
  style="background-color: #fff"
>
  <div class="tcu-background-container__image"></div>
</div>

Background Container

The background container…

The use case is currently limited to WWW(tcu.edu), CSE, Admissions, Addran.

<div
  id="tcu-background-container-5"
  class="tcu-module-wrapper _full-width tcu-background-container _has-image "
  style="background-color: #fff"
>
  <div class="tcu-background-container__image"></div>
</div>

Background Container

The background container…

The use case is currently limited to WWW(tcu.edu), CSE, Admissions, Addran.

<div
  id="tcu-background-container-5"
  class="tcu-module-wrapper _full-width tcu-background-container _has-image "
  style="background-color: #fff"
>
  <div class="tcu-background-container__image"></div>
</div>

A button group evenly spaces out a grouping of buttons.

For stacked buttons on all screen sizes, add the stacked class to the .tcu-button-group container.

For stacked buttons on small screens only, add the stacked-for-small class to the .tcu-button-group container.

For even width buttons with no spacing between them, add the expanded class to the .tcu-button-group container.

Creates a context for important information to be displayed in a webpage

If a button group is placed as a sibling of .tcu-callout__content, it will be centered on small and medium container widths. If there is only one button, on large container widths it will be in it’s own column. If there is more than one button or if the button text is too long, the button group will be below the rest of the content.

Creates a context for important information to be displayed in a webpage

If a button group is placed as a sibling of .tcu-callout__content, it will be centered on small and medium container widths. If there is only one button, on large container widths it will be in it’s own column. If there is more than one button or if the button text is too long, the button group will be below the rest of the content.

Creates a context for important information to be displayed in a webpage

If a button group is placed as a sibling of .tcu-callout__content, it will be centered on small and medium container widths. If there is only one button, on large container widths it will be in it’s own column. If there is more than one button or if the button text is too long, the button group will be below the rest of the content.

Creates a context for important information to be displayed in a webpage

If a button group is placed as a sibling of .tcu-callout__content, it will be centered on small and medium container widths. If there is only one button, on large container widths it will be in it’s own column. If there is more than one button or if the button text is too long, the button group will be below the rest of the content.

Creates a context for important information to be displayed in a webpage

If a button group is placed as a sibling of .tcu-callout__content, it will be centered on small and medium container widths. If there is only one button, on large container widths it will be in it’s own column. If there is more than one button or if the button text is too long, the button group will be below the rest of the content.

Creates a context for important information to be displayed in a webpage

If a button group is placed as a sibling of .tcu-callout__content, it will be centered on small and medium container widths. If there is only one button, on large container widths it will be in it’s own column. If there is more than one button or if the button text is too long, the button group will be below the rest of the content.

Creates a context for important information to be displayed in a webpage

If a button group is placed as a sibling of .tcu-callout__content, it will be centered on small and medium container widths. If there is only one button, on large container widths it will be in it’s own column. If there is more than one button or if the button text is too long, the button group will be below the rest of the content.

Creates a context for important information to be displayed in a webpage

If a button group is placed as a sibling of .tcu-callout__content, it will be centered on small and medium container widths. If there is only one button, on large container widths it will be in it’s own column. If there is more than one button or if the button text is too long, the button group will be below the rest of the content.

Creates a context for important information to be displayed in a webpage

If a button group is placed as a sibling of .tcu-callout__content, it will be centered on small and medium container widths. If there is only one button, on large container widths it will be in it’s own column. If there is more than one button or if the button text is too long, the button group will be below the rest of the content.

Creates a context for important information to be displayed in a webpage

If a button group is placed as a sibling of .tcu-callout__content, it will be centered on small and medium container widths. If there is only one button, on large container widths it will be in it’s own column. If there is more than one button or if the button text is too long, the button group will be below the rest of the content.

Cinema Scroll with hammerhead, heading, paragraph, and a video that expands on scroll until full width (stops at 100%).

Desktop (≥1024px): Initial video width 43% → expands to 100% on scroll Mobile/Tablet (<1024px): Video is static (no scroll animation)

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.

Image: 754x616

The Fact Banner has been updated. The previous version, which used Flickity and icons, has been deprecated.

The new Lead-On-7 Fact Banner no longer relies on Flickity or icons. Instead, it utilizes a grid-based layout to efficiently handle multiple facts and numbers in an organized manner.

This update improves structure, readability, and usability. By removing the reliance on icons, it eliminates a potential deterrent, making it easier for people to use and integrate.

The flexbox row uses the Foundation XY Grid classes.

The flexbox snippet in Omni CMS transforms a table into a flexbox grid of rows and columns. By default, small screens use full width columns and large screens will have evenly divided columns.

Suggested Image Sizes:

• Small - 380x200
• Medium - 720x240
• Large - 1800x600

Suggested Image Sizes:

• Small - 380x200
• Medium - 720x240
• Large - 1800x600

Suggested Image Sizes:

• Small - 380x200
• Medium - 720x240
• Large - 1800x600

Use for contact info or social media icons

Use for contact info or social media icons

A grouping of icon cards with optional title and background color.

The columns can be setup to auto width, 4 columns, or 2 columns.

The iframe video container is a wrapper that’s used around a video iframe like a youtube video to make it responsive.

Suggested Image Size: 670x450

An Image Card Set can have 1 to 4 image cards grouped together.

When there are 3 or less image cards in a set, they display in a single row.

When there are 4 image cards, they are split into a 2x2 grid.

An Image Card Set can have 1 to 4 image cards grouped together.

When there are 3 or less image cards in a set, they display in a single row.

When there are 4 image cards, they are split into a 2x2 grid.

Can use up to 4 infographic images.

Place the component above the text you want it to float next to.

Place the component above the text you want it to float next to.

Place the component above the text you want it to float next to.

Place the component above the text you want it to float next to.

Place the component above the text you want it to float next to.

Lead in styled text with responsive image element. Must be the first component in the page content.

• Hero Image (Mobile): 640x640
• Hero Image (Desktop): 1000x600

Lead In Paragraph

The Lead-In Paragraph is a customizable component with centered content. It optionally includes a border separating the heading from the body and supports a configurable background color.

This is a very simple list pattern intended for a list of links like a list of tags, categories, or archive years. Not intended for CMS users.

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

A full width autoplaying Vimeo video with a text overlay. 1800x600 is the ideal size for the video.

The Media Card features an icon, title, description, and button with link surrounded by a border with drop shadow.

To use for contact info or social media icons, use the Icon Card Set instead.

To add a background color to a cell within the multi column list, add the class _light or _dark to the <li>

Suggested Image Size: 160x140

The data for the profile card can either be pulled in via a reference to the person’s Faculty/Staff Profile or via manual content entry.

If the data is fed via Faculty/Staff Profile, the name should be hyperlinked.

The profile card set is meant to be used in combination with the profile cards. It’s a grid to contain a larger number of profile cards.

• On small screens, the set displays two cards per row
• On medium screens, the set displays three cards per row
• On large screens, the set displays four cards per row

Suggested Image Size: 360x400

Suggested Image Size: 360x400

Default is set to have full-width
Inset variations are set to have a max-width of 40%

Default is set to have full-width
Inset variations are set to have a max-width of 40%

Default is set to have full-width
Inset variations are set to have a max-width of 40%

Default is set to have full-width
Inset variations are set to have a max-width of 40%

Default is set to have full-width
Inset variations are set to have a max-width of 40%

The table wrapper is used to wrap responsive table markup. When adding responsive table snippet, you will have to create a table inside the snippet block in the WYSIWYG.

<table class="stacked">
  <!-- table markup here -->
</table>

Section Explorer

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.

Features

• Optional title and supporting text
• Large, clickable <a> elements styled as large buttons
• Optional background image (automatically displayed if provided)

Usage

Place up to 3 <a> elements within the component for ideal layout. If an image is provided, it will automatically be used as the background.

A header with a divider and an unordered list below it. Previously named “Related Links”.

This component implements a sidebar menu. It serves as a vertical navigation element typically positioned on the right side of the screen. On smaller screens, the sidebar menu stacks at the bottom to ensure optimal usability and responsiveness.

A generic slider for the Flexbox Row snippet. Refer to the Flickity Options Documenation for available flickity data options.

Supported classes:

• .slider-for-small-only

Accordions/button stack on small screens, tabs on large screens

Suggested Image Sizes for Image Left/Right:

• Small - 345x275
• Medium - 680x545
• Large - 840x670

Background Colors:

Works with Image Left/Right

• Purple - _purple
• Grey - _grey

Suggested Image Sizes for Image Left/Right:

• Small - 345x275
• Medium - 680x545
• Large - 840x670

Background Colors:

Works with Image Left/Right

• Purple - _purple
• Grey - _grey

Suggested Image Sizes for Image Left/Right:

• Small - 345x275
• Medium - 680x545
• Large - 840x670

Background Colors:

Works with Image Left/Right

• Purple - _purple
• Grey - _grey

Suggested Image Sizes for Image Left/Right:

• Small - 345x275
• Medium - 680x545
• Large - 840x670

Background Colors:

Works with Image Left/Right

• Purple - _purple
• Grey - _grey

The video iframe supports YouTube and Vimeo. Autoplay should be enabled for best results.

This pattern is only available on an Academic Homepage template in OmniUpdate. It’s edited with page params.

The Announcements Feed uses the callout component but includes a .tcu-callout__header header.

Suggested Image Size: 280x280

Suggested Image Size: 280x280

The article footer is an include file that is meant to be included at the bottom of the article listing and article permalink page. Each section is optional.

The article footer is an include file that is meant to be included at the bottom of the article listing and article permalink page. Each section is optional.

This localist widget should be created as an asset.

For this style of localist widget, the following parameters need to be set:

• hideimage=1
• hidedesc=1
• show_times=1
• style=none

This component has been replaced with the Program Finder Form which is an Omni CMS Component

Pagination Display Logic:

• When the current page is 1, hide the first and previous buttons.
• When the current page is equal to the number of total pages, hide the next and last buttons.
• For the number listing, display up to the page range starting with the current page, followed by an ellipsis and the last page number. Example: 2, 3, 4 … 7
• If the number listing would be greater than the total number of pages, reverse the order. Example 1 … 5, 6, 7

Pagination Display Logic:

• When the current page is 1, hide the first and previous buttons.
• When the current page is equal to the number of total pages, hide the next and last buttons.
• For the number listing, display up to the page range starting with the current page, followed by an ellipsis and the last page number. Example: 2, 3, 4 … 7
• If the number listing would be greater than the total number of pages, reverse the order. Example 1 … 5, 6, 7

The Publications Feed only appears on the homepage of a department and is neither a snippet or component.

Style: _white, _grey, _photo Size: _single, _double

If the user is on the page that a sticky flag links to, that flag should be hidden. See https://admissions.tcu.edu/index.php as an example.

The sticky flags require some JS to show/hide the flags on scroll. Whenever a user has scrolled down into the main section of the site, they minimize to an icon only view.

Svgs and background colors are inlined in the the sticky-flags.php (e.g. in the hr site, site/_resources/includes/sticky-flags.php)

Flag background color is set to $neutral-40, and icon background color is set to $primary by default.

CSS variable for flags’ background: –sticky-bg-color.

CSS variable for icons’ background: –sticky-icon-bg-color.

Timeline Component

The Timeline component is designed to elegantly showcase significant historical events across various topics. It offers two distinct versions:

Default Timeline: Perfect for larger displays, this version emphasizes detailed presentation and visual impact.

Basic Timeline: A scaled-down alternative suitable for smaller projects, offering essential features while maintaining clarity and simplicity.

Ideal for educational purposes, storytelling, or any application where chronological data visualization is essential, the Timeline component provides flexibility and aesthetic appeal.

Timeline Component

The Timeline component is designed to elegantly showcase significant historical events across various topics. It offers two distinct versions:

Default Timeline: Perfect for larger displays, this version emphasizes detailed presentation and visual impact.

Basic Timeline: A scaled-down alternative suitable for smaller projects, offering essential features while maintaining clarity and simplicity.

Ideal for educational purposes, storytelling, or any application where chronological data visualization is essential, the Timeline component provides flexibility and aesthetic appeal.

TCU Footer

The footer module used on all TCU academic/non-academic websites. The footer contains the logo/mark for the site specific school/college or department, the social stream for the college, the college location on campus, contact information, quick links, call-to-action and social media links.

A header bar used for displaying the TCU brand, search, and menu button. Global header is used on every academic/non-academic TCU website.

Local Footer Component

Overview

The Local Footer component serves as a footer section for individual sites. It provides additional site-specific information and can be seamlessly combined with the Global Footer to create a cohesive footer experience across multiple pages.

Implementation Details

The local footer is styled and structured to work alongside the global footer without conflicts.

To achieve the max-width effect seen on the homepage, the background is set in .tcu-footer, while the max-width and margin-inline properties are applied within .tcu-footer__inner.

Usage

Include the Local Footer within your site layout as needed. When integrating with the Global Footer, ensure both footers are structured properly to maintain design consistency.

<footer class="tcu-footer">
  <div class="tcu-footer__inner">
    <!-- Local Footer Content -->
    <!-- Global Footer Content -->
  </div>
</footer>

The Local Navigation component depends on JavaScript interactions that are tied to the global header. For a complete reference of its behavior and visual presentation, see the homepage layout implementation.

The Local Navigation component depends on JavaScript interactions that are tied to the global header. For a complete reference of its behavior and visual presentation, see the homepage layout implementation.

The Local Navigation component depends on JavaScript interactions that are tied to the global header. For a complete reference of its behavior and visual presentation, see the homepage layout implementation.

Site Header

The header module that contains the main title of the the college, the page banner and local navigation specific to the college.

Links to #main which is positioned at the very top of the main content area

<a tabindex="-1" id="main"><span class="show-for-sr">Main Content</span></a>