Homepage student success items
About this component
The student success section of the homepage gives an overview of student support services from the PCC Student Life page. We want to show that PCC has services and cool stuff on campus so students can get involved with other students and the college community. The various services are divided into categories to help make the information more digestible.
Guidelines
We don’t link to the individual departments and services – the section is supposed to be an overview of the wide variety of things students can get support for at PCC. The goal is to 1) show students that we care about their success and well-being, and 2) drive students to the Student Life page and become engaged with the services there.
Services need to serve a wide variety of students, already be included on the Student Life page, and be approved by Marketing to be listed.
Styling
Each category of support services includes a relevant Font Awesome icon in a layout similar to homepage facts. The categories are displayed in columns with enough space between them to differentiate them. The layout is designed to make the large amount of content displayed visually appealing and easier to scan and digest.
There is a button linking to the Student Life page at the top of the section.
Responsive behavior for Homepage student success items
There are 3 columns on large and medium screens, and 2 columns on small screens. A second button linking to the Student Life page appears at the bottom of the section on small screens because the first button is no longer visible (and quite a way to scroll to) when viewing the last items on a small screen.
How to use for Homepage student success items
Editable in the HTML (see “development info”).
欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Homepage student success items
Stylesheet location:
/_source/homepage/styles/_student-success.scss
Edit the root-level index.html file.
Example of Homepage student success items
