Card 3 Title
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Modules
Within each new row that is added to a page, a module must first be selected.
01
Columns
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.
02
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.
03
Cards
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
04
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.
05
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
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
06
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
07
Feeds
See more details about each type of feed available below.
News
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.
Events
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.
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.
Blogs
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 https://blogs.clemson.edu/ows/.
The feed accepts the following parameters: number of posts, categories, tags. There is also an option to display images or not.
08
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 “clemson.edu” 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 “https://www.clemson.edu/business/include/file.php” 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.
01
Accordions
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.
02
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
03
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.
04
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.
01
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.
02
Contact Module
The Contact Module will go at the bottom of the page(s) that it is included on.
