Homepage social media

About this component

At this time, we aren’t embedding any social media feeds on the homepage. Instead, we’re simply linking to PCC’s social media channels. We decided the page already has plenty of imagery and content, and that we want to encourage students to explore the PCC website, not exit over to a social platform and get distracted.

Guidelines

We only link to PCC’s four main social media platforms: Facebook, X, Instagram, and YouTube.

Styling

The social media links are only the platform logos, displayed in a row. When hovered on, the logos grow in size and change color.

Responsive behavior for Homepage social media

The logos are in four columns on large and medium screens, and two columns on small screens.

How to use for Homepage social media

Editable in the HTML and CSS (see “development info”).

欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Homepage social media

Stylesheet location: /_source/styles/_news-events.scss

Same as other Font Awesome icons on the site with some additional styling. Edit the root-level index.html file and CSS.

Example of Homepage social media

Icons

Social media icons

Animation

Social media icons hover animation