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>Primary button: Use the primary button style more frequently than the secondary. Especially, if there are multiple CTA buttons on a page.
Secondary button: Use the secondary button style less frequently than the primary. If there are multiple CTA button on a page, use the primary style unless there is a special call-out you want to call attention to.
Learn more about Modern Campus forms
Form markup is generated with /xsl/_shared/forms.xsl
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.
For the Default table, the following classes are available to customize the table:
A responsive table reorders itself on mobile so that it’s easier to view. This is best for simple tables.
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.
For the Default table, the following classes are available to customize the table:
A responsive table reorders itself on mobile so that it’s easier to view. This is best for simple tables.
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.
For the Default table, the following classes are available to customize the table:
A responsive table reorders itself on mobile so that it’s easier to view. This is best for simple tables.
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.
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>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>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
Creates a context for important information to be displayed in a webpage
Creates a context for important information to be displayed in a webpage
Creates a context for important information to be displayed in a webpage
Creates a context for important information to be displayed in a webpage
Creates a context for important information to be displayed in a webpage
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:
Suggested Image Sizes:
Suggested Image Sizes:
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.
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.
The Default and Icon Media Card’s use a ghost button link while the Link Icon Media Card makes the whole card clickable.
The Default and Icon Media Card’s use a ghost button link while the Link Icon Media Card makes the whole card clickable.
The Default and Icon Media Card’s use a ghost button link while the Link Icon Media Card makes the whole card clickable.
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.
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>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-onlyAccordions/button stack on small screens, tabs on large screens
Suggested Image Sizes for Image Left/Right:
Works with Image Left/Right and Basic
_white_grey_purpleMust be inside a module-wrapper
<div class="tcu-module-wrapper">...</div>_flex-1of1_flex-2of3_flex-1of2_flex-1of3_flex-1of4Suggested Image Sizes for Image Left/Right:
Works with Image Left/Right and Basic
_white_grey_purpleMust be inside a module-wrapper
<div class="tcu-module-wrapper">...</div>_flex-1of1_flex-2of3_flex-1of2_flex-1of3_flex-1of4Suggested Image Sizes for Image Left/Right:
Works with Image Left/Right and Basic
_white_grey_purpleMust be inside a module-wrapper
<div class="tcu-module-wrapper">...</div>_flex-1of1_flex-2of3_flex-1of2_flex-1of3_flex-1of4Suggested Image Sizes for Image Left/Right:
Works with Image Left/Right and Basic
_white_grey_purpleMust be inside a module-wrapper
<div class="tcu-module-wrapper">...</div>_flex-1of1_flex-2of3_flex-1of2_flex-1of3_flex-1of4Suggested Image Sizes for Image Left/Right:
Works with Image Left/Right and Basic
_white_grey_purpleMust be inside a module-wrapper
<div class="tcu-module-wrapper">...</div>_flex-1of1_flex-2of3_flex-1of2_flex-1of3_flex-1of4Suggested Image Sizes for Image Left/Right:
Works with Image Left/Right and Basic
_white_grey_purpleMust be inside a module-wrapper
<div class="tcu-module-wrapper">...</div>_flex-1of1_flex-2of3_flex-1of2_flex-1of3_flex-1of4Suggested Image Sizes for Image Left/Right:
Works with Image Left/Right and Basic
_white_grey_purpleMust be inside a module-wrapper
<div class="tcu-module-wrapper">...</div>_flex-1of1_flex-2of3_flex-1of2_flex-1of3_flex-1of4The 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=1hidedesc=1show_times=1style=noneThis component has been replaced with the Program Finder Form which is an Omni CMS Component
The Publications Feed only appears on the homepage of a department and is neither a snippet or component.
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.
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 navigation bar used for displaying the TCU brand and academic/non-academic site menu items. Global navigation is used on every academic/non-academic TCU website.
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>