Web code snippets

Code snippets on this page enable campus partners to use web patterns that are consistent across the College website.

Installing the code

A code snippet is a string of customizable HTML code that can be added to a web page in CODE view and contains styles (or classes) that generate a uniform look and feel for each code snippet. Please do not manually manipulate the classes in the code snippets on your own, as this defeats the purpose of creating uniformity amongst all of our code snippets.

1. Open the page that you want to install the code snippet on.
2. Lock the page for editing and click “edit content” to edit the content area where you intend to place the code snippet.
3. Switch the window's view from WYSIWYG to CODE view.
4. Copy and paste the code snippet into the window in CODE view.
5. Make any edits to the language of the notification box in CODE view. Note: if you change the language in CODE view, please preserve the second sentence with the link that goes to the Coronavirus website.
6. Save your content and submit it for review.

---

Notification box

The fully rendered notification box looks like the example below:

General use nbox-covid code

College Life nbox-covid-collegelife code

---

Table of contents

The fully rendered table of contents looks like the example above.

General use toc code

Large serif header text

Use class "gb-u-type-p--large" on a paragraph tag to style text as large serif header text.

Example:

Large opening text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

HTML

---

Primary button

Use class "gb-c-button-primary" on link text to turn the text into a button.

Example:

Primary Button

HTML

---

Secondary button

Use class "gb-c-button-secondary" on link text to turn the text into a button.

Example:

Secondary Button

HTML

---

Quote with attribution

Use the "gb-c-mag-upper" class on a <blockquote> tag to create large uppercase header text and use the "gb-u-type-p--small" class on the <cite> tag to create small san serif text for the attribution.

Example:

“Not all those who wander are lost” – J.R.R. Tolkien

HTML

---

Video embed

Use the code snippet below in the gray box as a guide for customizing the code. In order to customize the code, first add the 11 ending characters from the YouTube URL in the field called "data-video-swap". YouTube URLs typically look like this: "https://youtu.be/IRcyvwxYJ50" so you would be copying and pasting this: "IRcyvwxYJ50" into the "data-video-swap" field. After you have done this the video player will pull in data from that YouTube video. Beyond that, please take a screenshot from your video and add the URL of the screenshot in the image tag with the class "gb-c-video__poster" [<img class="gb-c-video__poster" alt="Type the image description here" src="/your-image-url-here.jpg">]. Also, add the title of the video in the paragraph tag with the class "gb-c-video__title" [<p class="gb-c-video__title">Prof. Steve Gimbel – Ask me anything</p>].

Example:

HTML

---

Two or three column layout

Use the code snippets in the examples below to customize a two or three column layout. The class that controls the grid for two and three column layouts is "gb-l-split-2" and "gb-l-split-3" which is placed in the <div> that wraps all of the code. Inside that <div> another <div> is placed with a class of "column". If you have two columns then you will need two separate <div> tags both with the column class added to them. If you have a three column layout then you will need three separate <div> tags all with the column class inside them.

Example 1:

Two column layout with two images.

HTML (Example 1)

Example 2:

Three column layout with images, headings, and text.

HTML (Example 2)