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.