Style Guide Basics
Note: Content Guide items have been moved to a separate page. Yellow buttons indicate Content Guide Items.
Headings
H1 Page Title
Used only for/by template
H1 style here for information only)
H2 Normal
2.5rem 40px
H2 with Section Header class
2.5rem 40px
H3 Normal also size of Section Title class
2rem 32px
H4 also the size for Article Title and Card Title
1.6rem 25.6px
H5 Normal
1.2rem 19.2px
H6 also the size for Paragraph Title -
1rem 16px
Paragraphs
This paragraph uses class "intro-text". "intro-text" paragraph style can ONLY be used on the first paragraph or two. Use of the "intro-text" style should be cleared by Marketing and/or Web Services. Maecenas in iaculis felis, vitae placerat enim. Duis vehicula, nunc at porta sollicitudin, arcu tortor venenatis ex, in venenatis libero nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor.
Normal paragraph text is 1rem in size which is 16px. Browser default font-size is always 1 em.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis risus vitae ex interdum, in accumsan neque ullamcorper. ( V-gold should only be used against dark backgrounds as it is difficult to read, otherwise. ) Integer fermentum, nisl eget placerat convallis, tellus massa fringilla eros, vel accumsan turpis lectus id arcu. Curabitur varius elit non ex facilisis condimentum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.
Lists
This paragraph uses class "intro-text". "intro-text" paragraph style can ONLY be used on the first paragraph or two. Use of the "intro-text" style should be cleared by Marketing and/or Web Services. Maecenas in iaculis felis, vitae placerat enim. Duis vehicula, nunc at porta sollicitudin, arcu tortor venenatis ex, in venenatis libero nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor.
Intro Text Lists
- List item
- List item
- List item
- List item
Intro Text Lists with FontAwesome Icon
- List icons can
- be used to
- replace bullets
- in lists
Lists
- List item
- List item
- List item
- List item
Lists with FontAwesome Icons
- List icons can
- be used to
- replace bullets
- in lists
Steps - with Stacked FontAwesome Icons
Sample Content
1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis risus vitae
ex interdum.
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis risus vitae
ex interdum, in accumsan neque ullamcorper. Student Forms Lorem ipsum.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Still not dark enough for v-gold. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.
3 Submit one letter of recommendation.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in iaculis felis, vitae placerat enim. Nunc at porta sollicitudin, arcu tortor venenatis ex, nisl et est. Integer a nibh nec felis varius maximus nec sit amet dolor. Curabitur varius elit non ex facilisis condimentum.
4 Integer a nibh nec felis varius maximus nec sit amet dolor.
Colors
Background Colors
Buttons
General Use
- in paragraph content, consider the visual weight and value of surrounding elements to determine solid or outline; primary, dark or secondary; large or small button
- lots of buttons in viewport, consider outlines styles, small buttons or text links
- single button in viewport consider solid styles
- when in doubt, aim for “medium” visual contrast (color, size and weight) of button to surrounding elements (rather than high or low contrast)
- Refrain from allowing button text to wrap within button
Link vs. Button
- When the action is secondary, or lower in the hierarchy, use a text link i.e. Tour East Campus (button), Tour West Campus (button), View All locations (text link)
- Consider Using List Group Links for a long list of links.
Vertical Button Group with padding & margins
Horizontal Buttons Centered
Horizontal Buttons Left
Horizontal Buttons Right
Primary
Regular Size
Small Size
- First button in a group should use primary solid button style
- If using a button on a single card and one action is desired, use a solid style button
- When more than one card appears in close proximity, use an outline style
Secondary
Regular Size
Small Size
- Subsequent buttons in a group should be dark outline style
- If card title is a link (red underline), then button should be dark outline style
Info
Regular Size
Small Size
Dark
Regular Size
Small Size
Light (use on dark background only)
Regular Size
Small Size
Image Standard Sizes
Images on our site are responsive—they resize for the user’s device. And responsive images are best considered by aspect ratio, rather than exact measurements. Aspect ratio is a proportion of an image’s width and height. For example, a rectangle 600 pixels wide by 400 pixels high has an aspect ratio of 3:2.
Ratios: We use four standard aspect ratios for image sizes:
- 3:2
- 2:3
- 2:1
- 1:1
Sizes: Images should have a maximum dimension of 2000 pixels—no one side should exceed 2000 pixels, regardless of aspect ratio.
Staff/Employee Portraits: When preparing staff photos, the maximum dimension is 600 pixels at 1:1 aspect ratio.
Web Services
For help with images, please submit a ticket.
Web Services is responsible for maintaining web standards for marketing quality images our public website. Image permissions on the public website are limited to web developers for several reasons: image quality, image size, specifications, accessibility, branding and copyright to name a few.
Horizontal Images 3:2
This is one of the two standard sizes for images to be used in the body of a webpage. These images should not include text that is meant to help direct or inform a user. If text is needed on top of an image, this can be done with actual html text.
Contact Web Services for help with images.
Recommended Size: 1000 x 667
Vertical Images 2:3
This is the second of the two standard sizes for images to be used in the body of a webpage. These images should not include text that is meant to help direct or inform a user. If text is needed on top of an image, this can be done with actual text.
Contact Web Services for help with images.
Recommended Size: 667 x 1000
Banners 2:1
This image ratio is reserved for page headers.
If you have an image you would like to be used for a header, make sure that it can
be cropped at a 2:1 ratio. All headers have to be approved by Marketing. Marketing
will also be happy to help find, size and crop an image for a page header.
Contact Web Services for help with images.
Square Images 1:1
This is a specialized size that will mainly be used on 1:1 for horizontal; also 1:1 for faculty photos and thumbnails.
Contact Web Services for help with images.
Recommended Size: 600 x 600
Figures & Captions
Example of figure, which is used to display a piece of content—like an image with an optional caption below.
Video Standards
Video is an important method of communication and takes a lot of time and effort to create them. However, they can get outdated quickly and must be updated just like any other content. The college has chosen a third party vendor, Kaltura, to host videos we use on the website. This helps with accessibility with closed captioning functions and management since these videos are not hosted on a personal account. Another great benefit is that the videos don't have advertisements on them.
- Videos can be embedded into a webpage or linked to a stand alone page.
- The standard video size is 16:9. We are no longer using 4:3 ratio but, this size can be used if you have an older video.
- Almost any video can be reformatted when uploaded to Kaltura but it's best to keep your video as high quality as you can when converting for use on the website.
Kaltura and Getting Help with Video
For help with your uploading your video and using Kaltura, please visit the Canvas Resources website. If you don't have a video yet and need help creating it, please visit the Video Productions. Please also review our video branding standards before you invest time into your video project.
YouTube
YouTube is a very popular video web host and easy to use. However, we are only using YouTube for marketing purposes. Please do not post YouTube videos yourself. Please contact the marketing department if you would like to market your videos on YouTube.
Examples
- Demo Video Layouts
- Link to external page: This is a link to a stand-alone page that can be a simple link, a button or a thumbnail image of your video screen with a fake play button over it to indicate visually that it's a video. The video and webpage is hosted on the Kaltura website.
Steps
This is a replacement for the Atena Steps to Enroll. Note that you must close any div class="container" to make the gray full width. Then reopen a new div after.
Step 1 Text
Step 2 Text
Step 3 Text
Step 4 Text
Step 5 Text
Iconography
Using a common set of identifiers across all sites will help users quickly identify the information they need. Below are icons, images & styles that can be used to visually identify these areas.
Contact Icons
Small Icons in black or gray should be used to identify common contact info
- Building and/or Room Number
- Street Address
- Mailing Address
- Phone Number
- Fax Number
- TTY (Telephone-Text-Device)
- Name, Title
- Hours
- Date
- Time
- URL
- External URL
Location Icons
- Campus
- School of...
- Center for...
- Office