Homepage tuition chart
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.
Responsive behavior
The chart shrinks in size horizontally (not vertically) as the screen size decreases. The amount of space between the $10,000 vertical bars decreases, as does the length of each of the bars.
Development info
- Stylesheet location:
/_source/styles/homepage/_tuition-chart.scss - Update the CSS using the tuition amounts provided by Marketing. Only the
100% { }line in each of the three keyframes needs to be changed. - Only the text description below the chart needs to be updated in the HTML.
-
@-webkit-keyframes show-bar-pcc-vertical { 0% {width:0;} 100% {width:11%;} // $5600 / $50000 = 11% <!-- update the % for the new PCC number divided by 50,000 --> } @-webkit-keyframes show-bar-public-vertical { 0% {width:0;} 100% {width:31%;} // $15500 / $50000 = 31% <!-- update the % for the new public number divided by 50,000 --> } @-webkit-keyframes show-bar-private-vertical { 0% {width:0;} 100% {width:95%;} // $52000 / $50000 = 104% <!-- update the % for the new private number divided by 50,000 --> } <!-- if greater than 95%, still set it to 95% so it gets the point across but the bar doesn't get too close to the edge -->
Homepage tuition chart examples
Large screens
Small screens
Animation
