Skip to content

Web Style Guide

Modules are prebuilt full width rows of uniquely structured and designed content available to be selected and dynamically moved vertically on the page. Widgets are similar but smaller blocks of content available to use within certain regions of the page. There are some slimmed down versions of the modules that are available to use as a widget, which are available in the Columns Module. These smaller version widgets will be explained in more detail in the Columns Module section below.


Within each new row that is added to a page, a module must first be selected.


Selecting Columns gives you the option to have multiple columns or have an empty area to put basic content. If you are needing a single column that will simply be used for paragraphs of text, set it to 7 or 8 columns wide. The full 12 makes the line lengths too long and harder to read. For this, you do not have to have another column to fill the gap.
If you want multiple columns, please make sure that the total number of cells chosen equals no more than 12.

Some widgets can also be added within the Columns module itself. To be able to choose widgets within the column’s module, the column width must be set to 6 cells or larger. Those widgets include image buttons, quote feature, accordions, and the news and events feeds.

Icon Cards

Another way to stylize CTA’s icon cards use a solid background, an icon element, a very brief informative sentence and then the link for the CTA. Choosing Image buttons as a Module gives the user the ability to utilize the full width of the page. There are also icon cards that can be chosen as a display widget.

Graduation Cap

Some text to go with the icon card.


A card in the template is a bordered box with some padding around its content. It includes options for headers, content, colors, etc. You can select a Background Color for the Cards module, then you can choose the Widget theme color which will change background color for the header on each of the cards.

Image Size Width: 400px, Height: 270px

Flowers alt text

Card 3 Title

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Image Buttons

Another way to stylize CTA’s image buttons use an image background, an icon element, and the link for the CTA. Choosing Image buttons as a Module gives the user the ability to utilize the full width of the page. There are also icon cards that can be chosen as a display widget.

Image Size Width: 400px, Height: 270px

See the Pen Image Buttons Module by Clemson OWS (@clemsonOWS) on CodePen.

Spotlight Feature

Use a spotlight feature to stylize important content on your page. The most comprehensive version includes a link to a specific story (or event, program, etc.), a short blurb of information and an image that goes along with the feature. The template has two spotlight feature options described below. Both options have a content section, an image selector and the option to add a button below the text. If selecting this spotlight feature to utilize as a CTA, please ensure that you format the content appropriately so that the call to action text is in the button and not in the body text of the feature.

The Spotlight feature module does not have enforced character limits, but there are recommended lengths to ensure that the feature stays smaller in height than the image used within the container. The title of the Spotlight feature will be setup as an H2, please keep this in mind when thinking about accessibility and the layout of your page. Based on the size of the H2 heading we recommend staying under 25 characters for the title. The subtitle should be kept to around 55 characters or less and the body text should not exceed 286 characters. The button text should also not exceed 30 characters so it will not wrap. These recommendations are based on utilizing all options available in the spotlight feature module: the title, subtitle, body text and a button. The title and the body text are the only required fields, so these character recommendations would change based on the extra amount of space allotted should you choose not to use a button or the subtitle.

Bottom Accent with Offset Image

This option shows the thick accent color on the bottom and display the image slightly above the top of the module’s background color. It gives a parallax scroll effect which is a visual effect that mimics depth by making the foreground and background elements on a Web page scroll at different speeds.

Image Size Width: 675px, Height: 385px

Bottom Accent with Offset Image

Vertical Accent - no offset image

This option shows the thick accent color on the left or right depending on the position of the object chosen. It wll display the image in line with module’s background color. (the image below shows Fixed Right chosen)

Image size Width: 815px, Height: 340px

Vertical Accent no Offset Image
2 col call to action

The two column call to action widget is used when information needs to be highlighted that goes with a specific call to action, or a specific set of CTA’s. It is just another way to organize the content so that the CTA’s stand out on the page. You can have up to two rows within this module and/or you can opt to have the image on the left with content on the right which is opposite of the image shared below.

With this module, there are no enforced character limits, but the general rule of thumb is to keep it short and simple so that the content expand past the height of the image.

Image size Width: 675px, Height: 400px

Two Column Call to Action Module Example
See more details about each type of feed available below.


This module will automatically load Clemson News stories in a styled format based on categories or tags. To generate the appropriate code, please access the Clemson News Builder Tool.

News Feed Example


This will add 3 or 4 Events into the section in a styled format. The events calendar uses Audience types and departments to allow specific types of events to be displayed in the events feed. To retrieve the appropriate code for building your events feed use the Events Builder Tool then paste the code in to the Events Module in the template.

Events Feed Example

Tiger Rankings and Brags

This will add 3 rankings/brags in a styled format on to the page. The rankings/brags database uses College/Division and categories to display different rankings. Use the Rankings and Brags Generator tool to retrieve the appropriate Param String.
If more than 3 rankings matches the tags used in the param string, the r&b’s will change on refresh of the page.

Rankings and Brags Example


This will add a given number of blog posts in a styled format into the page. The blog feed uses the name of the blog to pull in the data. The name is the exact name/parameter in the URL, for example: “ows” in
The feed accepts the following parameters: number of posts, categories, tags. There is also an option to display images or not.

Blog Feed Example
PHP include

This is available for very specific purposes, it is not an open invitation to bypass the template structure.

To include PHP files, the structure of the include path will depend on the publishing location of your website. You will need to include everything after “” including the first slash. As an example, if my php include file named ‘file.php’ resides under the Business website in a folder named ‘include’ making the url to my include file “” then my include path would need to be set as follows: /business/include/file.php

Display Widgets

Display widgets can be selected on the page within the Columns module. The columns module must be set to a column width of 6 or more for the widgets to be available.


An accordion is used to show (and hide) HTML content and are very useful when you want to toggle between hiding and showing large amounts of content. Multiple accordions are generally grouped together at a time.

See the Pen Accordions Widget by Clemson OWS (@clemsonOWS) on CodePen.

Accordion Example
Quote Feature

The quote feature offers a stylized way to display an image of the person who gave the quote along with the specific quote. This widget can only be chosen within the Columns module in which the width of the columns must be 6 cells are larger.

For the quote text do not add quotation marks. Quotation marks are dynamically added in. The image size should be 300x300px and the image will be auto cropped into circle. This is intended to be an image of the person who said the quote.

Image Size Width: 300px, Height: 300px

Quote Feature Example
Image Buttons

Image Buttons in the widgets section do not differ from the icon cards in the Modules section other than fewer cards can be added depending on the column’s width chosen in the Column Module selection.

Image Size Width: 400px, Height: 270px

See the Pen Image Button Widget by Clemson OWS (@clemsonOWS) on CodePen.

Image Buttons Widget Example
News, Events, and Blog Feeds

These feeds act exactly the same as referenced above but the items displayed are limited based on the number of columns selected.

Independent Widgets

These Widgets are built separately from the page by going to the “Add content” tab in cascade. These are independent so users can create a single widget that can be used/shared across multiple pages and when they need to be updated only the widget has to be published as opposed to publishing all pages that utilize the widget.

Left Column Widgets

These widgets can only be added to the left column pages. Up to 2 independent widgets can be added, and the order will depend on your selections.

  • Related Links – add related links below the logo in the left column.
  • Social Links – add social links below the logo in the left column.
  • Contact Info – add contact info below the logo in the left column.
Independent Left Column Widgets Example
Contact Module
The Contact Module will go at the bottom of the page(s) that it is included on.
Contact Module Widget Example