Portland Community College | Portland, Oregon Portland Community College

Homepage social media

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.


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


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

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

Development info
  • Stylesheet location: /_source/styles/homepage/_news-events.scss
  • <ul id="social-icons"> wraps around the logos, which are each in their own <li>.
  • Hidden text and title elements make the logos accessible.
  • <li>
      <a href="" target="_blank" title="">
        <i class="" role="img" title="" aria-label="">
          <span class="hide">Social name</span>

Homepage social media examples


Homepage social media icons


Social media icons hover animation