Portland Community College | Portland, Oregon Portland Community College

Channel layouts

Channels can contain all kinds of content, but we try to keep them consistent by using one of these general layouts. There are a handful of channels with custom layouts.

Basic

Most channels are (and should be) plain text. The content usually consists of a paragraph and some links, or headings followed by lists of links. Channels with a large amount of content should be broken into expandable sections.

Channel with a paragraph and list of links

Women's Resource Center channel – has a paragraph followed by a list of links

Channel with headings and lists

Quick links channel – has headings, each followed by a list of links

Channel using Open Sesame expandable text

Faculty resources channel – expandable sections containing lists of links

Channel with headings and lists in Bootstrap columns

My courses links channel – 4 columns, each of which has a heading and list of links

Images

Some channels have an image. The image is often a logo, but can also be a graphic or photograph that describes or emphasizes the text.

Some images change based on the student’s current status. For example, the backpack in the Ready to take online courses channel is gray if you haven’t taken the orientation and teal if you have. Other channels that do this are My account, Don’t get deleted, Financial Aid Dashboard, and Veterans education benefits.

Learn more about images in channels.

Descriptive image left-aligned, inline with text

Ready to take online courses channel – paragraph with left-aligned image

Logo center-aligned, above text

This channel also uses custom bullet list icons.

PCC Panther Works channel – logo above a paragraph and list of links with custom bullet point icons

Logo right-aligned, inline with text

Queer Resource Center channel – paragraph with right-aligned logo

Forms

Some channels have forms, which search applications outside MyPCC. These forms consist of an input box and submit button, accompanied by text and sometimes images.

Form with text

Staff Directory search

Form with text and advanced search link

Library search

Form with text and an image

Ask the Panther search

Events

A few channels include the mini calendar to show upcoming events. The calendars update automatically every day, and filter events. For example, the employee calendar only shows employee events. If there are no events, the channels say “No events today”.

Calendars are limited to 4 events, with a link to all the events below.

Learn more about the mini calendar.

Calendar with logo and heading

ASPCC calendar

Only the calendar

Main PCC event calendar

Calendar with no events

Calendar displaying 'no events today'

Tables

Most of the Luminis channels use tables, but tables shouldn’t be used in any PCC channels other than events (see above). Some of the Luminis tables are responsive (class="footable"), and some are not.

Most of the channels in courses and sites are Luminis channels and have tables.

Responsive table with a caption

My courses

Tables inside Luminis expandable accordians

Site content channel

Mini calendar table

Main PCC event calendar

Luminis responsive table with accordians

Announcements channel