HTML Elements

This is the default blockquote using the Blockquote button.

“People try to crush your soul and destroy your happiness, but zombies just want to have a little nibble of your brain.”
– J. Cornell Michel

Paragraph Heading 3 (H3)

Lorem ^superscript dolor _subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy.

Paragraph Heading 4 (H4)

This is a right-aligned highlight. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.


<span class="rightaccent">This is the code for the right-aligned highlight</span>

Paragraph Heading 5 (H5)

This is a left-aligned highlight. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy.


<span class="leftaccent">This is the code for the left-aligned highlight</span>

Paragraph Heading 6 (H6)

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

1.1 SPECIAL HEADERS

Line With Text


<h2 class="lined-heading">Heading With Line</h2>

1.2 LIST TYPES

Definition List Title

This is a definition list division.

Ordered List

List Item 1
List Item 2
List Item 3

Unordered List

List Item 1
List Item 2
List Item 3

1.3 TABLES

Single Column Table

Table Header 1
Lorem Ipsum
Lorem Ipsum
Table Header 2
Lorem Ipsum
Lorem Ipsum
Table Header 3
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum


<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th>Table Header 1</th>
</tr>
<tr>
<td>Lorem Ipsum</td>
</tr>
<tr class="even">
<td>Lorem Ipsum</td>
</tr>
<tr>
<th>Table Header 2</th>
</tr>
<tr>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>Lorem Ipsum</td>
</tr>
<tr>
<th>Table Header 3</th>
</tr>
<tr>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>Lorem Ipsum</td>
</tr>
</tbody>
</table>

1.4 Double Column Table

TABLE TITLE 1	TABLE TITLE 2
Column 1 – Lorem Ipsum	Column 2 – Lorem Ipsum
Column 1 – Lorem Ipsum	Column 2 – Lorem Ipsum
Column 1 – Lorem Ipsum	Column 2 – Lorem Ipsum
Column 1 – Lorem Ipsum	Column 2 – Lorem Ipsum
Column 1 – Lorem Ipsum	Column 2 – Lorem Ipsum
Column 1 – Lorem Ipsum	Column 2 – Lorem Ipsum
Column 1 – Lorem Ipsum	Column 2 – Lorem Ipsum
Column 1 – Lorem Ipsum	Column 2 – Lorem Ipsum


<table  border="1" cellspacing="1" cellpadding="1">
<thead>
<tr>
<th scope="col">TABLE TITLE 1</th>
<th scope="col">TABLE TITLE 2</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Column 1 - Lorem Ipsum</strong></td>
<td>Column 2 - Lorem Ipsum</td>
</tr>
<tr>
<td><strong>Column 1 - Lorem Ipsum</strong></td>
<td>Column 2 - Lorem Ipsum</td>
</tr>
<tr>
<td><strong>Column 1 - Lorem Ipsum</strong></td>
<td>Column 2 - Lorem Ipsum</td>
</tr>
<tr>
<td><strong>Column 1 - Lorem Ipsum</strong></td>
<td>Column 2 - Lorem Ipsum</td>
</tr>
<tr>
<td><strong>Column 1 - Lorem Ipsum</strong></td>
<td>Column 2 - Lorem Ipsum</td>
</tr>
<tr>
<td><strong>Column 1 - Lorem Ipsum</strong></td>
<td>Column 2 - Lorem Ipsum</td>
</tr>
<tr>
<td><strong>Column 1 - Lorem Ipsum</strong></td>
<td>Column 2 - Lorem Ipsum</td>
</tr>
<tr>
<td><strong>Column 1 - Lorem Ipsum</strong></td>
<td>Column 2 - Lorem Ipsum</td>
</tr>
</tbody>
</table>

1.5 Grid Table Layout (2-Columns)

White – Title Goes Here

List Item – With Link
List Item – No Link
List Item – Lorem Ipsum

Light – Title Goes Here

List Item – With Link
List Item – No Link
List Item – Lorem Ipsum

Dark -Title Goes Here

List Item – With Link
List Item – No Link
List Item – Lorem Ipsum
List Item – Lorem Ipsum

Black – Title Goes Here

List Item – With Link
List Item – No Link
List Item – Lorem Ipsum
List Item – Lorem Ipsum


<div id="tbl-section" class="row">
<div class="col-5">
<!-- Default Block -->
<h2>White - Title Goes Here</h2>
<ul>
<li><a href="a">List Item - With Link</a></li>
<li>List Item - No Link</li>
<li>List Item - Lorem Ipsum</li>
</ul>
</div>
<!-- Light Block -->
<div class="col-5 light">
<h2>Light - Title Goes Here</h2>
<ul>
<li><a href="a">List Item - With Link</a></li>
<li>List Item - No Link</li>
<li>List Item - Lorem Ipsum</li>
</ul>
</div>
<!-- Dark Block -->
<div class="col-5 dark">
<h2>Dark -Title Goes Here</h2>
<ul>
<li><a href="a">List Item - With Link</a></li>
<li>List Item - No Link</li>
<li>List Item - Lorem Ipsum</li>
<li>List Item - Lorem Ipsum</li>
</ul>
</div>
<!-- Black Block -->
<div class="col-5 black">
<h2>Black - Title Goes Here</h2>
<ul>
<li><a href="a">List Item - With Link</a></li>
<li>List Item - No Link</li>
<li>List Item - Lorem Ipsum</li>
<li>List Item - Lorem Ipsum</li>
</ul>
</div>
</div>

1.6 ACCORDION MENU (Shortcodes)

First Menu Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel efficitur orci. Mauris et vulputate orci, sed interdum purus. Suspendisse et turpis dolor. Nullam facilisis commodo eros, fringilla finibus leo tincidunt ac. Nunc gravida nulla id urna cursus tempus. Curabitur sollicitudin varius mi vel efficitur.

Second Menu Item

Hidden content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel efficitur orci. Mauris et vulputate orci, sed interdum purus. Suspendisse et turpis dolor. Nullam facilisis commodo eros, fringilla finibus leo tincidunt ac. Nunc gravida nulla id urna cursus tempus. Curabitur sollicitudin varius mi vel efficitur.

Just Another Menu Item

1.7 BUTTONS

Light Background Buttons

Primary Button


<a class="btn btn-primary" href="#" role="button" title="Link Title">Button Text</a>

Secondary Button


<a class="btn btn-secondary href="#" role="button" title="Link Title">Button Text</a>

Success Button


<a class="btn btn-success" href="#" role="button" title="Link Title">Button Text</a>

Danger Button


<a class="btn btn-danger" href="#" role="button" title="Link Title">Button Text</a>

Dark Background Buttons

Light Button


<a class="btn btn-light" href="#" role="button">Button Text</a>

Dark Button


<a class="btn btn-dark href="#" role="button">Button Text</a>

Info Button


<a class="btn btn-info"href="#"  role="button">Button Text</a>

Warning Button


<a class="btn btn-warning" href="#" role="button">Button Text</a>

2.1 Spotlight Block (Profiles)

Jane or John Doe

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris.

Button Text


<div class="acadprofile">
<div class="row">
<div class="col-sm-3 acadimage">
<img src="INSERT IMAGE PATH" alt="INSERT ALT TEXT">
</div>
<div class="col-sm-9">
<h3>Jane or John Doe</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris.</p>
<p><a class="btn btn-danger"  href="INSERT LINK URL" role="button">Button Text</a></p>
</div>
</div>
</div>

2.2 Spotlight Facts

Fast Facts

Top 10 Ranked Degree Programs

1440 Students from 49 Countries

44% Female Student Body

29% Underrepresented Students

View Additional Icons


<div class="row" id="researchquick">
<div class="linewithtext"><span>FAST FACTS</span></div>
<!-- Fact #1 -->
<div class="redspotlight col-sm-12 col-md-12 col-lg-12 col-xl-3"><span class="redspotlight-data-value">Top 10</span> <span class="redspotlight-data-label">Ranked Degree Programs</span></div>
<!-- Fact #2 -->
<div class="redspotlight col-sm-12 col-md-12 col-lg-12 col-xl-3"><span class="redspotlight-data-value">1440</span> <span class="redspotlight-data-label">Students from 49 Countries</span></div>
<!-- Fact #3 -->
<div class="redspotlight col-sm-12 col-md-12 col-lg-12 col-xl-3"><span class="redspotlight-data-value">44%</span> <span class="redspotlight-data-label">Female Student Body </span></div>
<!-- Fact #4 -->
<div class="redspotlight col-sm-12 col-md-12 col-lg-12 col-xl-3"><span class="redspotlight-data-value">29%</span> <span class="redspotlight-data-label">Underrepresented Students</span></div>
</div>

2.2 Spotlight Icon Rows

2800+ Students
From 61 Countries around the Globe Create a Vibrant Student Culture

Students Identify As
Male (56%), Female (43%), Other (1%)

Students Identify As
Asian (29%), Black (24%), White (22%), Hispanic/Latino (9%), Biracial (4%), Unknown/Other (12%)

150+ Staff & Faculty
From Across Disciplines and Professions Fuel Innovation and Collaboration


<div class="row icons">
<div class="col-lg-3"><span class="fa-solid fa-earth-americas" title="Globe Icon"></span>
<span class="title">2800+ Students</span>
From 61 Countries around the Globe Create a Vibrant Student Culture</div>
<div class="div_separator"></div>
<div class="col-lg-3"><span class="fa-solid fa-person" title="Person Icon"></span>
<span class="title">Students Identify As</span>
Male (56%), Female (43%), Other (1%)</div>
<div class="div_separator"></div>
<div class="col-lg-3"><span class="fa-solid fa-handshake" title="Handshake Icon"></span>
<span class="title">Students Identify As</span>
Asian (29%), Black (24%), White (22%), Hispanic/Latino (9%), Biracial (4%), Unknown/Other (12%)</div>
<div class="div_separator"></div>
<div class="col-lg-3"><span class="fa-solid fa-university" title="University Icon"></span>
<span class="title">150+ Staff & Faculty</span>
From Across Disciplines and Professions Fuel Innovation and Collaboration</div>
</div>

2.4 Highlights

A simple primary alert—check it out!


<div class="alert alert-primary" role="alert">Insert Preferred Text</div>

A simple secondary alert—check it out!


<div class="alert alert-secondary" role="alert">Insert Preferred Text</div>

A simple secondary alert—check it out!


<div class="alert alert-light" role="alert">Insert Preferred Text</div>

A simple dark alert—check it out!


<div class="alert alert-dark" role="alert">Insert Preferred Text</div>

3.1 – Jumbotron

DEVELOPING METHODS TO DIGITIZE ARTIFACTS

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

LEARN MORE


<div class="row">
<div class="col-sm-8"><img alt="IMAGE ALT TAG" src="INSERT IMAGE PATH" title="INSERT PAGE TITLE" /></div>
<div class="col-sm-4">
<h3>INSERT PAGE TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut cursus neque nisi, sed viverra magna tempor nec. </p>
<a class="btn btn-success" href="INSERT URL LINK" role="button">Button Text</a>
</div>
</div>

DEVELOPING METHODS TO DIGITIZE ARTIFACTS

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.
LEARN MORE


<div class="row">
<div class="col-sm-4">
<h3>INSERT PAGE TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut cursus neque nisi, sed viverra magna tempor nec. </p>
<a class="btn btn-success" href="INSERT URL LINK" role="button">Button Text</a>
</div>
<div class="col-sm-8"><img alt="IMAGE ALT TAG" src="INSERT IMAGE PATH" title="INSERT PAGE TITLE" /></div>
</div>

3.2 – Large photo Jumbotron

Pioneering information technologies and solutions that are accessible and usable for people of all abilities.


<div id="phototron" style="background-image: url('https://ischool.umd.edu/wp-content/uploads/Accessibility-1-1.png')">
<div class="phototron_content">
Pioneering information technologies and solutions that are accessible and usable for people of all abilities.
</div>
</div>

3.3 – Color Block + Text Jumbotron

Pursue Your Passion

Developing Tools and Methods to Digitize Artifacts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum diam quis tellus tempor feugiat. Vestibulum auctor commodo purus ac hendrerit.

Button Text Button Text Button Text


<div class="jumbotron">
<div class=" colorblock">
<span> Pursue Your Passion </span>
<h3>Developing Tools and Methods to Digitize Artifacts</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum diam 
quis tellus tempor feugiat. Vestibulum auctor commodo purus ac hendrerit. </p>
<a class="btn btn-success" href="INSERT URL LINK" role="button">Button Text</a> 
<a class="btn btn-success" href="INSERT URL LINK" role="button">Button Text</a> 
<a class="btn btn-success" href="INSERT URL LINK" role="button">Button Text</a>
</div>
</div>

Pursue Your Passion

Developing Tools and Methods to Digitize Artifacts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum diam quis tellus tempor feugiat. Vestibulum auctor commodo purus ac hendrerit.

Button Text Button Text Button Text


<div class="jumbotron white">
<div id=" colorblock">
<span> Pursue Your Passion </span>
<h3>Developing Tools and Methods to Digitize Artifacts</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum diam 
quis tellus tempor feugiat. Vestibulum auctor commodo purus ac hendrerit. </p>
<a class="btn btn-success" href="INSERT URL LINK" role="button">Button Text</a> 
<a class="btn btn-success" href="INSERT URL LINK" role="button">Button Text</a> 
<a class="btn btn-success" href="INSERT URL LINK" role="button">Button Text</a>
</div>
</div>

4.0 – Page Layouts

4.1 – Two Column with Image Text

This is the title of the blurb

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is the title of the blurb

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<div class="container">
<div class="row">
<div class="col-5 d-flex align-items-end imgwithtext"
style="background-image: url('/wp-content/uploads/keithmdean.png'); background-size: cover; background-position: center">
<div class="threecoltext_content w-100 p-2 text-white">
<h3>This is the title of the blurb</h3>
<p class="blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-5 d-flex align-items-end imgwithtext"
style="background-image: url('/wp-content/uploads/keithmdean.png'); background-size: cover; background-position: center">
<div class="threecoltext_content w-100 p-2 text-white">
<h3>This is the title of the blurb</h3>
<p class="blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>

4.2 – Two Column Content Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet neque eu nisi commodo egestas. Nulla eu turpis nec ante egestas tempus nec ac lorem. Maecenas vitae imperdiet lorem. Curabitur scelerisque ante eget augue malesuada, eget hendrerit turpis eleifend. Fusce imperdiet tortor eu tortor tempor, bibendum varius neque placerat.


<div class="container">
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet neque eu nisi commodo egestas. Nulla eu turpis nec ante egestas tempus nec ac lorem. Maecenas vitae imperdiet lorem. Curabitur scelerisque ante eget augue malesuada, eget hendrerit turpis eleifend. Fusce imperdiet tortor eu tortor tempor, bibendum varius neque placerat.
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet neque eu nisi commodo egestas. Nulla eu turpis nec ante egestas tempus nec ac lorem. Maecenas vitae imperdiet lorem. Curabitur scelerisque ante eget augue malesuada, eget hendrerit turpis eleifend. Fusce imperdiet tortor eu tortor tempor, bibendum varius neque placerat.
</div>
</div>

4.3 – Three Column Layout


<div class="container">
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet neque eu nisi commodo egestas. Nulla eu turpis nec ante egestas tempus nec ac lorem. Maecenas vitae imperdiet lorem. Curabitur scelerisque ante eget augue malesuada, eget hendrerit turpis eleifend. Fusce imperdiet tortor eu tortor tempor, bibendum varius neque placerat.
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet neque eu nisi commodo egestas. Nulla eu turpis nec ante egestas tempus nec ac lorem. Maecenas vitae imperdiet lorem. Curabitur scelerisque ante eget augue malesuada, eget hendrerit turpis eleifend. Fusce imperdiet tortor eu tortor tempor, bibendum varius neque placerat.
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet neque eu nisi commodo egestas. Nulla eu turpis nec ante egestas tempus nec ac lorem. Maecenas vitae imperdiet lorem. Curabitur scelerisque ante eget augue malesuada, eget hendrerit turpis eleifend. Fusce imperdiet tortor eu tortor tempor, bibendum varius neque placerat.
</div>
</div>
</div>