Homepage map
About this component
The homepage includes a simple map showing the location of PCC’s campuses and centers. The goal is to show how PCC is “near you” and that we have many locations across the metro area, not to provide detailed location information.
Guidelines
The map only shows locations where students can take credit classes. It doesn’t include Community Ed off-campus locations or locations that are for staff only or for very specific audiences, like the Downtown Center and Maritime Welding Trading Center.
Styling
The map shows a very simplified overview of Portland’s main highways and the Willamette River. It’s meant to show enough information to convey the general location of each campus or center, but not provide the exact address or directions about how to get there.
When you hover over a campus or center marker on the map, the marker highlights and the location’s name appears above the marker. If you hover over one of the campus or center links, the corresponding marker on the map highlights and the name appears above the marker.
Responsive behavior for Homepage map
None, other than the map shrinks to fit the screen width and stacks on small screens along with the other location content.
How to use for Homepage map
Editable in the HTML (see “development info”).
欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Homepage map
Stylesheet location:
/_source/homepage/styles/_map.scss
Edit the root-level index.html file (the map itself is built using JavaScript). Short descriptions of the general location are included as visually-hidden text for each of the campus and center links, acting as an accessible alternative to the map.
Example of Homepage map
Default map
Hover state
Hover animation
Loading animation
