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 “programming” look.

Pre example
$(document).foundation();
Pre development info
  • Stylesheet location: /source-v6/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

Code

Use code for small snippets of code 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 “programming” look.

Code example

Use class="info" for informational callouts.

Code development info
  • Stylesheet location: /source-v6/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

KBD

Use kbd for describing keyboard input.

KBD example

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

KBD development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • Wrap the content in <kbd> tags

SAMP

Use samp for sample output from a computer program.

SAMP example

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

SAMP development info
  • Stylesheet location: /source-v6/styles/base/_typography.scss
  • Wrap the content in <samp> tags