Homepage tuition chart
About this component
The tuition chart is meant to show, at a glance, how much more affordable PCC is than our university competitors.
Guidelines
Tuition numbers are based on the average cost of one year of in-state tuition for a full-time student. We don’t include individual schools, but rather one category for Oregon public universities and another for Oregon private universities. Other Oregon community colleges aren’t included in the chart.
Marketing provides the tuition amounts on an as-needed basis.
Styling
The chart is a bar graph with three bars, one for PCC, one for Oregon public universities, and one for Oregon private universities. “Oregon” is abbreviated to “OR” for space reasons. The chart is divided by vertical bars that signify cost, starting at $0 on the left and increasing in increments of $10,000 all the way to $50,000 on the right ($50,000 isn’t included though, it’s just the end of the chart). The PCC bar is turquoise and the other bars are green. A description of the chart is below it.
When the chart comes into view as you scroll down the page, the bars animate, growing in size from the left side of the chart to their full width towards the right.
The chart is hidden from screen readers and replaced by a visually-hidden text description.
How to use for Homepage tuition chart
Editable in the HTML and CSS (see “development info”).
Example of Homepage tuition chart
Large screens
Small screens
Animation
