Channel content
Channel content follows general guidelines and consists of certain HTML elements.
Creating and updating channels
Basics
Channels can include many types of typography, as well as any of the content types below. Most channels have basic components and follow general layout guidelines. There are some custom channels, but those are all part of larger projects.
Media
Channels can include images, icons, and logos. Media is usually aligned to the right, inline with the content. However, media can also be left-aligned or located above the content.
Sizing and alignment
Media uses the same classes as the main PCC website. See sizing and alignment development info in the web style guide.
Images and logos
Images should be 400px wide (or smaller), and will resize to your specified sizing class in the browser.
Icons
Most icons in MyPCC are part of a sprite sheet. With a sprite, the channels don’t have to load multiple image files. Instead, a single image re-positions to reveal different areas.
Many custom channels have icons which change based on the student’s current status. View all the MyPCC icons.
Forms
Forms in channels are usually just an input box and submit button. The form elements either appear inline or they stack, based on the width of the channel.
View more examples of channels with forms.
Expandable sections
Channels with a lot of content should use expandable sections to break up and hide some of the content. This makes it easier for users to glance over and read the content.
Callouts
Channels can have callouts to draw attention to certain information. We don’t use all of the same callouts as the main PCC website, but the few in use are listed below.
Feedback (or new)
Feedback callouts let people know something is new, and sometimes to ask for feedback on the changes. By default, they include a speech bubble icon, but you can use inline styles to remove it or use a different icon.
Notice
Notice callouts are used to highlight very important, time-sensitive information. They can be in a channel of their own, or at the top of existing channels.
Highlight
Highlight callouts can be either temporary or permanent. They show related information, similar to highlight callouts on the main PCC website.
Highlight callouts can be full-width at the top or bottom of a channel. Don’t float them, because the text becomes to narrow and difficult to read when the channel is narrow.
Tables
Tables should only be in Luminis and events channels, and only for tabular data. Don’t use them to create design layouts in custom channels.
Most of the tables in Luminis channels are responsive, but a few aren’t. There isn’t anything we can do to fix this.
