HTML Cheat Sheet

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.

---

Primary button

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

Example:

Primary Button

---

Secondary button

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

Example:

Secondary Button

---

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

---

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:

---

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.

Example 2:

Three column layout with images, headings, and text.