Widget Configuration
How to Implement Custom Widgets
On This Page
Accordion
Accordions help to show large amounts of content by show/hide buttons to expand or retract text areas:
This is an 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
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.
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.
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
Form (Simple Form)
Simple Form includes name, phone number, email, and message fields.
Thank you for your submission!
Hero Banner
Used on promotional pages. For more information on hero banners, see the Website Guidelines page.
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.
FacebookTwitterInstagramYouTubeLinkedInPinterestQuickLinks
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
Counseling and Wellness Center
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.