Homepage student success items
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
There are three columns on large and medium screens, and two 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.
Development info
- Stylesheet location:
/_source/styles/homepage/_student-success.scss <div class="row success-items">surrounds the items. The columns use regular Foundation columns.-
<div class="extra-small-6 small-4 medium-4 columns" data-equalizer-watch="item"> <i class=""></i> <h4>Title</h4> <p>List of services</p> </div>
Homepage student success items example
