General Content Types

2 Columns 6-6 (General)

• Add 2 columns (proportions 6+6 out of 12 total units)
• Columns can hold a combination of text and/or images
• Each column may have an optional heading
• Image is 864 x 576 px

Working Example of 2 Columns 6-6 (General)

2 Columns 8-4 (General)

• Add 2 columns (proportions 8+4 out of 12 total units)
• Columns can hold a combination of text and/or images
• Each column may have an optional heading
• Image is 864 x 576 px

Working Example of 2 Columns 8-4 (General)

3-Across Tiles with Text Below (General)

• Add exactly 6 image tiles with a subheading and teaser text
• Image and subheading link to an existing section
• Laid out in 3 columns on desktop, then 1 on mobile
• Image is 756 x 504 px

Working Example of 3-Across Tiles with Text Below (General)

3 Columns 4-4-4 (General)

• Add 3 columns (proportions 3+3+3 out of 12 total units)
• Columns can hold a combination of text and/or images
• Each column may have an optional heading
• Image is 864 x 576 px

Working Example of 3 Columns 4-4-4 (General)

Accordion (General)

• A link that expands to reveal content underneath, then can close to conceal content again
• Use for brief text and lists of links
• If your content is enough to warrant a new page, use a link to a new page instead
• Complex content like images, videos, and tables may not display properly
• The accordion Link Name is an H3 heading. Please use an H2 heading above accordions

Working Example of Accordion (General)

Audio (General)

• A media player that plays an MP3 audio file
• Link to a transcript dropdown is required when there are lyrics
• Heading is optional

Working Example of Audio (General)

Button (General)

• Add a button that can link to either a section or an external website
• Button width scales based on the amount of text within

Working Example of Button (General)

Faculty Staff Listing (General)

• Add person name, contact info, education, etc. with a photo
• Photo can be floated left or right
• Image is 300 px square
• Used in multiples for departmental Faculty & Staff listing pages

Working Example of Faculty Staff Listing (General)

Faculty Staff Slider (General)

• Add two or more images with slide-up quote on hover
• Person name link, title, and additional text go below images
• Becomes a slider when more than two images are used
• If slider, add heading to just the first slide to properly space player controls
• Single button below the slider can link to either a section or an external website

Working Example of Faculty Slide (General)

Feature CTA I (General)

• A large image above a content panel with a call to action button
• A gray gradient floats over the image which is 900 x 600 px
• Button links to an existing section

Working Example of Feature CTA I (General)

Feature CTA II (General)

• A heading over text with a wide call-to-action button below
• Button can link to either a section or an external website
• All content appears in a gray box

Working Example of Feature CTA II (General)

Feature Tabs (General)

• Add up to 4 tabs with text, button, and left-floated image
• Button links to an existing section
• Image is 640 x 447 px

Working Example of Feature Tabs (General)

Gallery Deck (General)

• Each thumbnail image is a deck
• Add 1-12 gallery images within each deck
• Decks with a single image are styled to look flat and clicking on them opens a single image popup
• Decks with multiple images are styled to look like a stack and clicking on them opens a slider popup
• Text below deck can link to a section or appear as just plain text
• Images are 900 x 600 px
• Add as many decks as needed, but use only one complete set per page

Working Example of Gallery Deck (General)

Image (General)

• Add an image up to 900 px wide
• Heading and caption are optional

Working Example of Image (General)

Info Blurb (General)

• Create a heading with link to an existing section
• Text below can be styled to look like a news teaser, but not for use on actual news teaser pages with pagination

Working Example of Info Blurb (General)

Pull Quote (General)

• Add a pull quote in a blockquote layout with large quotation marks graphic on left and attribution below
• Heading is optional

 

 

Working Example of Pull Quote (General)

Pull Quote with Image (General)

• Add a single quote with a circular photo to the left
• Heading is always an H3, so these are meant to be used under an existing H2
• Styles for quote and attribution are automatically added
• Image is 150 x 150 px (square) and will automatically be styled as a circle

Working Example of Pull Quote with Image (General)

Slider Image (General)

• Add at least 3 slider images next to each other to make a complete slider
• Use only one complete slider per page
• Image size is 900 x 600 px

Working Example of Slider Image (General)

Table (General)

• Add a table using the HTML Editor
• Table header cells and other cells are automatically styled with color
• Add scroll and shadow to make large tables usable on mobile
• See the Table section of the T4 Web Editor's Manual for details

Working Example of Table (General)

Text with Captioned Image (General)

• Add text with just one large image and optional image caption underneath
• Image can float either left or right on desktop, then goes to top on mobile
• Image size is 900 x 600 px

Working Example of Text with Captioned Image (General)

Text with Optional Images (General)

• Paste or type text into T4's text editor
• Can add multiple images using "Select with layout" from the media library to float left, right, or none
• Can add multiple headings using the the text editor's "Format" menu
• Image size is 900 x 600 px

Working Example of Text with Optional Images (General)

Video (General)

• Add video embed code to a page
• Heading and video are centered

Working Example of Video (General)

Page last updated 9:20 AM, September 24, 2024