HTML Elements

Home

TABLE OF CONTENTS

1.0 – Headings & Paragraph Elements

1.1 – List Types

1.2 – Tables

1.3 – Accordion Menus (Shortcodes)

1.4 – Buttons

2.0 – Blocks

2.1 – Spotlight Block

2.2 – Spotlight Facts

2.3 – Popup Window

2.4 – Content Highlights

3.0 – Jumbotrons

3.1 – Photo left or right

3.2 – Large photo

3.3 – Color block + Text

4.0 – In-Page Navigation

4.1 – Two across image/text boxes

4.2 – Three across image/text boxes

4.3 – Four across image/text boxes

4.4 – Box Element Widget

4.5 – Icon buttons

4.6 – Card Elements

Academic Programs-Requires class=programs

Two Column

Three Column

Four Column

1.0 HEADINGS & PARAGRAPH ELEMENTS

 

Heading 1 – Page Title

Heading (H2)

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

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.

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 LIST TYPES

Definition List Title
This is a definition list division.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

1.2 TABLES

Standard Table

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

1.3 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
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.

1.4 BUTTONS

Light Background Buttons

Primary Button Secondary Button Success Button Danger Button


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

Dark Background Buttons


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

2.1 Spotlight Block (Profiles)

INSERT ALT TEXT

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

<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.3 Pop-up window



<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra sagittis justo id mollis. Praesent fringilla et urna vulputate volutpat.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

2.4 Highlights


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


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


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


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

3.1 – Jumbotron

 

UMD iSchool News

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

UMD iSchool News

<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

Build a Career Using Information and Technology to Move the World Forward

THE INFOSCI DEGREE PROGRAM @ COLLEGE PARK


<div class="phototron" style="background-image: url('/sites/default/files/inline-images/Accessibility.png');">
<div class="phototron_content">
<h3>This is the title of the blurb </h3>
<p class="blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis finibus nisi, quis porta purus molestie sit amet. 
Morbi consequat iaculis massa, quis vulputate mi ultricies eu. Mauris feugiat ultricies arcu, luctus rhoncus velit malesuada vitae.</p>
<p><a aria-pressed="true" button="" class="btn btn-info"  href="INSERT URL LINK" role="button">LEARN MORE</a></p>
</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 – In-Page Navigation


4.1 – Two Across Image with 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="row">
<div class="col-sm-12">
<!--Photo #1 -->
<div class="col-sm-5 imgwithtext" style="background-image: url('INSERT FILE PATH');">
<div class="imgwithtext_content">
<h3><a href="#INSERTLINK">LINKING HEADING TITLE</a></h3>
<p class="blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--Photo #2 -->
<div class="col-sm-5 imgwithtext" style="background-image: url('INSERT FILE PATH');">
<div class="imgwithtext_content">
<h3>NON-LINKING HEADING TITLE</h3>
<p class="blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>

4.2 – Three Across Image with Text

Rankings & Fast Facts

Jobs at the iSchool

iLEAD COUNCIL


<div class="row">
<div class="col-sm-12">
<!--Photo #1 -->
<div class="col-sm-3 threecoltext" style="background-image: url('INSERT FILE PATH');">
<div class="threecoltext_content">
<h3><a href="#LINK">INSERT TEXT</a></h3>
</div>
</div>
<!--Photo #2 -->
<div class="col-sm-3 threecoltext" style="background-image:  url('INSERT FILE PATH');">
<div class="threecoltext_content">
<h3><a href="#LINK">INSERT TEXT</a></h3>
</div>
</div>
<!--Photo #3 -->
<div class="col-sm-3 threecoltext" style="background-image:  url('INSERT FILE PATH');">
<div class="threecoltext_content">
<h3><a href="#LINK">INSERT TEXT</a></h3>
</div>
</div>
</div>
</div>

4.3 – Four Across Image with Text

Rankings & Fast Facts

Jobs at the iSchool

iLEAD COUNCIL

Rankings & Fast Facts


<div class="row">
<div class="col-sm-12">
<!--Photo #1 -->
<div class="col-sm-2 fourcoltext" style="background-image:  url('INSERT FILE PATH');">
<div class="fourcoltext_content">
<h3>Rankings & Fast Facts</h3>
</div>
</div>
<!--Photo #2 -->
<div class="col-sm-2 fourcoltext" style="background-image:  url('INSERT FILE PATH');">
<div class="fourcoltext_content">
<h3>Jobs at the iSchool</h3>
</div>
</div>
<!--Photo #3 -->
<div class="col-sm-2 fourcoltext" style="background-image:  url('INSERT FILE PATH');">
<div class="fourcoltext_content">
<h3>iLEAD COUNCIL</h3>
</div>
</div>
<!--Photo #4 -->
<div class="col-sm-2 fourcoltext" style="background-image:  url('INSERT FILE PATH');">
<div class="fourcoltext_content">
<h3>Rankings & Fast Facts</h3>
</div>
</div>
</div>
</div>

4.4 – Box Element Widget

 

This text is always visible

About

Message from the DeanWhat is an iSchool?iLEAD Council

Title

Line 1 – shows on hoverLine 2 – shows on hoverLine 3 – shows on hover

4.5 – Icon Buttons

 

View Additional Icons

Books
This is a sample blurb
Basketball
This is a sample blurb
Data Charts
This is a sample blurb
Python Code
This is a sample blurb

<div class="row icons">
<div class="col-lg-3">
<span class="fas fa-book"> </span><br><span class="title">Books</span><br>
This is a sample blurb</div>
<div class="div_separator"> </div>
<div class="col-lg-3">
<span class="fas fa-basketball-ball"> </span><br><span class="title">Basketball</span><br>
This is a sample blurb</div>
<div class="div_separator"> </div>
<div class="col-lg-3">
<span class="fas fa-chart-pie"> </span><br><span class="title">Data Charts</span><br>
This is a sample blurb</div>
<div class="div_separator"> </div>
<div class="col-lg-3">
<span class="fas fa-laptop-code"> </span><br><span class="title">Python Code</span><br>
This is a sample blurb</div>
</div>

4.6 – Card Elements

 

Two Column Card Elements


Insert Text Title

Some quick example text to build on the card title and make up the bulk of the card’s content.

 Read Article


Insert Text Title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Read Article

Three Column Card Elements

Convert HTML code to short codes


Insert Text Title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Read Article


Insert Text Title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Read Article


Insert Text Title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Read Article

Four Column Card Elements

Convert HTML code to short codes


Insert Text Title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Read Article


Insert Text Title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Read Article


Insert Text Title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Read Article


Insert Text Title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Read Article

 

Academic Program Cards

Four Column

Three Column

Students Walking Outside on College Park Campus Undergraduate Student Services College Park

Student at Computer Undergraduate Student Services Shady Grove
Students Doing Group WorkGraduate Student Services

Two Column

 

 

ShortCodes

Heading

Heading text

Tabs

Tab nameTab nameTab name
Tab content
Tab content
Tab content

Accordion

Information Industry
Trust in the expertise and integrity of private sector businesses as well as in government administration is decreasing, while trust in libraries and
Higher Education
Hidden content

Divider

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra commodo felis. Curabitur feugiat mi ac tempor consectetur. Integer laoreet tempor nulla, et rutrum diam faucibus ut. Duis cursus magna ac nibh posuere, et accumsan sem dignissim. Proin consectetur nulla urna, quis porta justo posuere quis. Aenean tristique molestie nisi. Sed sollicitudin, neque eu elementum tincidunt, sem erat semper enim, a vulputate ante metus ac orci. Aliquam erat volutpat. Integer iaculis fringilla ex. Nunc non velit nulla. Ut libero orci, porta ut magna eget, fermentum commodo erat. Etiam vitae felis nec nisl rhoncus convallis. Donec non viverra purus, dignissim mollis orci. Ut id dui sit amet nisi ullamcorper gravida. Mauris sit amet est eu arcu feugiat ullamcorper vel sit amet nulla. Fusce lobortis enim non pellentesque pretium.

Go to top

Spacer

Highlight

 Highlighted text 

Label

This is a sample label

Quote

Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Pullquote

This is a sample pullquote

Dropcap

D

Columns

Two Column Layout

Two Columns – Column 1
Two Columns – Column 2

Three Column Layout

Three Columns – Column 1
Three Columns – Column 2
Three Columns – Column 3

List

  • List item
  • List item
  • List item

Button

Button text

Service

Title of the Service Item
This is the description of the item

Box

This is box title
Box content

Note

Note text

Expand

This text block can be expanded
Show more
Show less

Lightbox

Click here to open lightbox

Tooltip

Hover me to open tooltip

YouTube
YouTube advanced

Table

Table Table
Table Table

CSV Table
Permalink
Members
Guests
RSS feed
Menu
Sub pages
Siblings
Google map
Image carousel
Gallery
Posts
Dummy text
Dummy image
Animation
Meta data
User data
Post data
Template
QR code
Scheduler