Portland Community College | Portland, Oregon Portland Community College

Technical

Technical typographic elements have limited use on the website. They’re generally found on instructional pages for faculty and staff, or on Web Services pages.

PRE

Use pre for embedding chunks of code on a page, while maintaining the code’s exact structure, (including line breaks). It displays the text in a box and gives it a “code” look.

PRE development info
  • Stylesheet location: /_source/styles/base/_typography.scss
  • Wrap the content in <pre> tags – it will maintain any characters you insert, such as brackets, as well as line breaks.
PRE example
$(document).foundation();

Code

Use <code> for small snippets of code that you want to appear on a web page. <code> won’t maintain your code’s structure and will put everything on one line. It gives it a “code” look.

Code development info
  • Stylesheet location: /_source/styles/base/_typography.scss
  • Wrap the content in <code> tags – it will put all your content on one line, ignoring line breaks, but will maintain characters such as brackets.
Code example

Use class="info" for informational callouts.

KBD

Use <kbd> for describing keyboard input.

KBD development info
  • Base Foundation 6 styles.
  • Wrap the content in <kbd> tags.
KBD example

To save the document, hit cmd + s on your keyboard.

SAMP

Use <samp> for sample output from a computer program.

SAMP development info
  • Base Foundation 6 styles.
  • Wrap the content in <samp> tags.
SAMP example

After running the program, you will see the computer’s output.