HTML Cheat Sheet

Advanced HTML

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

<p class="gb-u-type-p--large">Large opening text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


Primary button

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

Example:

Primary Button

HTML

<p><a class="gb-c-button-primary" href="/academic-programs/">Primary Button</a></p>


Secondary button

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

Example:

Secondary Button

HTML

<p><a class="gb-c-button-secondary" href="/academic-programs/">Secondary Button</a></p>


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

<blockquote class="gb-c-mag-upper">
        <p>
            &ldquo;Not all those who wander are lost&rdquo;<br />
            <cite class="gb-u-type-p--small">&ndash; <em>J.R.R. Tolkien</em></cite>
        </p>
</blockquote>


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:

Prof. Steve Gimbel – Ask me anything

Steve Gimbel giving a lecture on the steps of Penn Hall

HTML

<div class="gb-c-video__container">
    <div class="gb-c-video " data-video-swap="youtube://IRcyvwxYJ50?rel=0">
         <div class="gb-c-video__block">
            <div class="gb-c-video__content" >
            <svg class="gb-c-video__play-button js-video__play-button" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="86px" viewBox="0 0 100 86" style="enable-background:new 0 0 100 86;" xml:space="preserve">

<g>
    <g>
        <path class="gb-c-video__play-button__outer" d="M86.4,85.5h-73c-7.2,0-13-5.8-13-13v-59c0-7.2,5.8-13,13-13h73c7.2,0,13,5.8,13,13v59
            C99.4,79.6,93.6,85.5,86.4,85.5z M13.4,2.5c-6.1,0-11,4.9-11,11v59c0,6.1,4.9,11,11,11h73c6.1,0,11-4.9,11-11v-59
            c0-6.1-4.9-11-11-11H13.4z"/>
    </g>
    <g>
        <path class="gb-c-video__play-button__inner" d="M37.9,62.4V22.2l34.8,20.1L37.9,62.4z M39.9,25.7v33.2l28.8-16.6L39.9,25.7z"/>
    </g>
</g>
</svg>
                <div class="gb-c-video__meta">
        <p class="gb-c-video__title">Prof. Steve Gimbel &ndash; Ask me anything</p>
    </div>
</div>
        <img class="gb-c-video__poster" alt="Steve Gimbel giving a lecture on the steps of Penn Hall" src="/academic-programs/images/steve-gimbel-lecture.jpg">
    </div>
</div>
</div>


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.

Student playing the violin in the Sunderman orchestra
Two female college students inside their dorm room

HTML (Example 1)

<div class="gb-l-split-2">
<div class="column">
<figure>
<img src="/admissions-aid/images/2020/student-violin-orchestra.jpg" style="width:100%;" alt="Student playing the violin in the Sunderman orchestra" />
</figure>
</div>
<div class="column">
<figure>
<img src="/admissions-aid/images/2020/students-female-dorm-room.jpg" style="width:100%;" alt="Two female college students inside their dorm room" />
</figure>
</div>
</div>

Example 2:

Three column layout with images, headings, and text.

Student in classroom with teachers in front of a computer

Explore Academics

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna enim, fringilla ac lectus et, tempus tincidunt mauris. Phasellus varius placerat mi, vitae pulvinar purus aliquam eu.

parents visiting with students at Get Acquainted Day

Attend an Event

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna enim, fringilla ac lectus et, tempus tincidunt mauris. Phasellus varius placerat mi, vitae pulvinar purus aliquam eu.

aerial photograph of Gettysburg College's campus

Take a Campus Tour

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna enim, fringilla ac lectus et, tempus tincidunt mauris. Phasellus varius placerat mi, vitae pulvinar purus aliquam eu.

HTML (Example 2)

<div class="gb-l-split-3">
<div class="column gb-l-cell gb-c-longform">
<figure><img src="/accepted-students/images/virtual-panels.jpg" style="width: 100%;" alt="Student in classroom with teachers in front of a computer" /></figure>
<h4><a href="#">Explore Academics</a></h4>
<div class="gb-c-entry-block__body gb-u-type-p--small">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna enim, fringilla ac lectus et, tempus tincidunt mauris. Phasellus varius placerat mi, vitae pulvinar purus aliquam eu.</p>
</div>
</div>
<div class="column gb-l-cell gb-c-longform">
<figure><img src="/accepted-students/images/get-acquainted-day.jpg" style="width: 100%;" alt="parents visiting with students at Get Acquainted Day" /></figure>
<h4><a href="#">Attend an Event</a></h4>
<div class="gb-c-entry-block__body gb-u-type-p--small">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna enim, fringilla ac lectus et, tempus tincidunt mauris. Phasellus varius placerat mi, vitae pulvinar purus aliquam eu.</p>
</div>
</div>
<div class="column gb-l-cell gb-c-longform">
<figure><img src="/admissions-aid/images/2020/campus-aerial-penn-hall.jpg" style="width:100%;" alt="aerial photograph of Gettysburg College's campus" /></figure>
<h4><a href="#">Take a Campus Tour</a></h4>
<div class="gb-c-entry-block__body gb-u-type-p--small">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna enim, fringilla ac lectus et, tempus tincidunt mauris. Phasellus varius placerat mi, vitae pulvinar purus aliquam eu.</p>
</div>
</div>
</div>