[Card 1 heading-28px]
[Card 1 subheading-inherited size]
[Card 1 text - click edit to update]
Icon is 48 px
Digital Style Guide
Widgets
Below are details around page elements and default styling for widgets within the CU Denver Sitefinity ecosystem.
Image widgets
Hero widget
The hero widget is often the top picture on the page that spans the full width of the page and includes a headline and sometimes a CTA. For CU Denver's site, these widgets are used on the homepage and secondary landing pages. All pages beneath that do not contain a hero image. This decision was to help users identify how deep into the site they are. While you have the option to select the title as your H1, on the CU Denver site, we opted to keep H1's consistent as the first line of text on the page below the hero widget.
Suggested use: Photography (as a page header)
Required Info: Image
Optional Info: Title, Subtitle, Button, Background color band (translucent black option used for CU Denver)
Additional Settings Used: All hero images are 300px tall for consistency across the site
Title
Subhead
Hero (Image Only @300px - used for photo section headers in content areas of the page)
Image widget
This widget should be used for adding visual elements to any page or piece of content, grabbing users' attention. It must have an image.
Suggested use: Photography
Required Info: Image, Image size (350x350, 750x750, 1500x1500, 3000x3000, 5600x3735)
Optional Info: Title, Alt Text, Button
Additional Settings Used: none
Card widget
Need to give teaser information with a link to a longer explanation? The card widget has quite a bit of flexibility. By default it will stretch to the width of the column it is placed into. It must have an image. The height of the widget is based on content so if content is different lengths, the cards will not vertically align.
Suggested use: Photography, groups of information - promoting an article, event, class or program
Required Info: Image, Link
Optional Info: Title, Alt Text, Button
Additional Settings Used: More Options>Templates allows the below 4 layout options
Card (Default)
The header will stretch vertically to contain content
Exception occured while executing the controller. Check error logs for details.
Exception occured while executing the controller. Check error logs for details.
Card. hero
Exception occured while executing the controller. Check error logs for details.
Exception occured while executing the controller. Check error logs for details.
Card. simple
Exception occured while executing the controller. Check error logs for details.
Exception occured while executing the controller. Check error logs for details.
Card. simple right
Enhanced Card widget
The enhanced card widget is great for users who need a way to put reusable content into cards to use on various pages or those who would like a set of cards with a cohesive look regardless of content. A deck of cards using the enhanced card widget will allow users to display images, videos and links. Each card by design will have the same length and width regardless of the individual content within each card.
Suggested use: Photography, groups of information - organizing/promoting articles, events, classes or programs
Required Info: Headline
Optional Info: Body Text, Button, Images, Videos, Embedded videos
Additional Settings Used: Click link for the video to set up
There are multiple visual options based on the setup. Below are the ones used on CU Denver's main site.
Example Three
Lorem ipsum dolor sit amet, usu alii forensibus an, te suas eros alienum qui. Ex quo recteque evertitur deterruisset.
Example Two
Lorem ipsum dolor sit amet, usu alii forensibus an, te suas eros alienum qui. Ex quo recteque evertitur deterruisset.
Example One
Lorem ipsum dolor sit amet, usu alii forensibus an, te suas eros alienum qui. Ex quo recteque evertitur deterruisset.
Non-Degree Admissions
For high school students, professionals looking for CEUs, lifelong learners, ESL students, and anyone who is interested in taking college classes but does not need a college degree
International Admissions
For students applying from countries outside the United States
Undergraduate Admissions
For first-time, transfer, and returning students
Highlight/Callout Widgets
Highlight Box widget
Use to highlight a particular message to stand out from the surrounding content. This widget helps call attention to a relevant event, article, video, blog or other related content. Great use for this is to define subsections within the content area of a page section. This widget will stretch across the entire section it's placed in.
Suggested use: Subsections within a page
Required Info: Header Text
Optional Info: Subhead text, Body Text, Image
Color options: Primary (Gold Bkgd/Black Text), Secondary (Black Bkgd/Gold Text)
The header will stretch vertically to contain content
Facts and Figures widget
The facts and figures widget will give site builders the ability to highlight individual facts and statistics on their site. This widget will consist of multiple highlight cards and will include the ability for each card to link to another page on the site or to an external page. This widget stretches to fill the container area. When using multiple cards, it is highly suggested you make all the same color to visually group information.
Suggested use: Information callouts
Required Info: Header Text (40 characters)
Optional Info: Icon, Subhead text (80), Body Text (350)
Color options: Black text/White bkgd, Black text/Gold bkgd, White text/Black bkgd, Black text/Gray bkgd, Gold text/Black bkgd,
Sizing options: Icon, Header, Subheader, Body text
Long heading - Lorem ipsum dolor sit ame
[Card 2 subheading]
[Card 2 text - click edit to update]72px Heading
20px Subhead
Highlight usage of widget (large)72px Heading
20px Subhead
Secondary use of this widget (large)CTA Widgets
Call To Action widget
A simple, clickable button. Encouraging users to take an action, like "sign up for training," "register for event," "donate to a cause" or "learn more about admissions".
Suggested use: Links to other pages
Required Info: Button text, Link
Optional Info: Button Size, Font Size, Button Alignment
Color options: Primary (Gold Bkgd/Black Text), Secondary (Black Bkgd/Gold Text), Tertiary (White Bkgd/Gray Text)
Click edit button to add Call to Action URL!
Click edit button to add Call to Action URL!
Click edit button to add Call to Action URL!
The button will stretch vertically to contain content
Click edit button to add Call to Action URL!
Click edit button to add Call to Action URL!
CTA widget
Need a simple, clickable button that needs to be featured on multiple pages? The CTA widget is just like the call to action widget and has some added features. For buttons that reoccur on different pages as you can create and manage the content for this button in one centralized location (Content tab in the dashboard). Another perk to using this widget over the traditional call to action widget is that buttons can be scheduled to publish or unpublish themselves in advance. This allows CTA’s to appear for appropriate application deadlines or events and disappear when they are no longer needed.
Suggested use: Reoccuring links, Groups of links
Required Info: Button text, Link
Optional Info: Button Size, Font Size, Button Alignment
Color options: Primary (Gold Bkgd/Black Text), Secondary (Black Bkgd/Gold Text), Tertiary (White Bkgd/Gray Text)
Widget Combinations
- Image & content widgets (50/50 split)
- Content/CTA & Image (50/50 split)
- Card widget & Image (50/50 split)
- Content & Extra CTA widgets (vert & horz. Treatments)
Need to figure out:
- Calendar/event announcement widget (temporary)
- White Button solution
- Cross-linking look and location
Being developed by OIT:
- Related links
- Connect with (ankle widget)
- Calendar/event announcement widget (no ready for launch)