Widget Configuration

How to Implement Custom Widgets

On This Page

Accordion

Anchor

Callout Box

Callout Message

Card

Columns

Contact Listing

Form

Hero Banner

Social Media

QuickLinks

Tabs

Accordion

Accordions help to show large amounts of content by show/hide buttons to expand or retract text areas:

Example Accordion

This is an example accordion.

Another Example Accordion

This is another example accordion.

Anchor

Anchors help users identify and link to specific content along the same webpage. It would be ideal to use anchors for pages that have a lot of content or sections, or generally longer scroll length (especially on mobile screens).

On This Page

Callout Box

Callout Message

Callout Box

A callout box (similar to callout message) outlines sections of your page and is available in three styles to provide contextual feedback and add emphasis to a page section.

Here are few good examples:

  • Place the message before the form
  • Break up content in a department's site
  • Alert students about upcoming courses or tests

Warning!

Indicate important message and/or notification of event.

Attention!

This could be any information relevant to a user action.

This is the default callout widget

This alert needs your attention, but it's not super important.

Callout Message

A callout message (similar to callout box) outlines sections of your page and is available in three styles to provide contextual feedback and add emphasis to a page section. Callout messages are intended to hold text no more than 500 characters.

Here are few good examples:

  • Announcing program or application deadlines
  • Relaying recent changes to a site

Warning! Indicate important message and/or notification of event.

Attention! This could be any information relevant to a user action.

This is the default callout widget. This alert needs your attention, but it's not super important.

Card

Cards are great for small bits of information like images, captions and button links. Each card must be added individually in rows up to 4. This widget requires an additional custom widget called "Card Function" to work.

Example Card

This is an example card.

Adding a short description can be useful to provide context for each card.

Button

Another Example Card

This is another example card.

Trying linking using hyperlinks to other SF pages.

Yet Another Example Card

This is an yet another example card.

If using more than one card, not all cards require an image.

Button

Columns

Add up to four columns with this custom widget.

Column 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Column 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Column 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Column 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Contact Listing

Listings may include name, title(s), email, phone number, office location and photo. 

Note: MarCom is currently developing a new Contact Listing widget, so the appearance below may be subject to change.

Caesar Saint

Official College Mascot, Ambassador of Enthusiasm

Caesar Saint

Form (Simple Form)

Simple Form includes name, phone number, email, and message fields.

Simple Form Form

Required
Optional

Thank you for your submission!

Hero Banner

Used on promotional pages. For more information on hero banners, see the Website Guidelines page.

Full screen page design template as known as hero banner

Social Media

New social media accounts must be approved by MarCom. Social media accounts include, but are not limited to: Facebook, Instagram, X (fka Twitter), YouTube, LinkedIn, Pinterest, Vimeo, Snapchat.

FacebookTwitterInstagramYouTubeLinkedInPinterest

QuickLinks

QuickLinks allow for easy and direct access to popular pages/links. Keep the information simple as possible. We recommend placing QuickLinks at the end of the page after the content.

Note: To make links appear correctly, make sure you to hit "Enter" (PC) or "Return" (Mac) after each link for each line break in text editor.

QuickLinks example

Athletics

Childcare

Counseling and Wellness Center

Financial Aid

Library

Communications and Creative Services

Tabs

Tabs are an excellent way to display different categories of related information on one page. Configure up to four tabs.

Tab 1 Content. 

Tab 2 Content.

Tab 3 Content.

Tab 4 Content.