Portland Community College | Portland, Oregon Portland Community College

Image extras

The following styles are meant to help tweak images to fit your needs.


By default, images on the website have a border. If you don’t want the border, use the graphic style. This is helpful for images with non-square edges, like logos or icons.

Graphic development info
  • Stylesheet location: /source-v6/styles/components/_media.scss
  • img class="graphic"
Logo with transparent background
No graphic
Logo with transparent background

Inline images

By default, images will break to their own line. If you want an image to be inline with text, use the inline style.

Inline development info
  • Stylesheet location: /source-v6/styles/base/_global.scss
  • img class="inline"


  • I’m an image which isn’t inline.IconI break the sentence onto multiple lines.
  • I’m an image which is inline. Icon I don’t break the sentence onto multiple lines.


Use screenshots to show what the accompanying text or instructions is describing. They can be plain screenshots taken directly from the screen, or can include extra elements such as arrows or circles added in Photoshop to highlight specific parts of the image.

Screenshot development info
  • Stylesheet location: /source-v6/styles/components/_media.scss
  • img class="screenshot"

Screenshot with superimposed mouse pointer showing where to click:

Screenshot with added mouse pointer showing where to click

Some pages include a logo above the sidebar navigation. This is only for departments or resources that have a logo of their own.

Sidebar logo development info
  • Stylesheet location: /source-v6/styles/layout/_sidebar.scss
  • img class="logo"
  • Including class="graphic" on the image isn’t necessary
  • <div id="snav">
      <a href=""><img class="logo" src="" alt="" /></a>
      <h3>Sidebar heading</h3>
      <ul class="side-nav">
       <li><a href="">Link</a></li>
       <li><a href="">Link</a></li>
       <li><a href="">Link</a></li>