The Research Triangle Park

Color

Primary Palette

Duke Blue $color_duke_blue #194685 25, 71, 134

Carolina Blue $color_carolina_blue #799ED2 122, 158, 211

State Red $color_state_red #C7202C 199, 32, 45

Secondary Palette

Dark Green $color_dark_green #5C8A3D 92, 139, 61

Light Green $color_light_green #AED586 175, 214, 135

Turquoise $color_turquoise #2EBAA5 46, 187, 165

Dark Cyan $color_dark_cyan #038798 3, 135, 152

Orange $color_orange #EF4E22 240, 78, 35

Beige $color_beige #E7EFBE 232, 239, 190

Typography

Proxima Nova — 5 Weights

Aa

Thin

Aa

Light

Aa

Regular

Aa

Semibold

Aa

Bold

39px

The quick brown fox jumps over the lazy dog.

33px

The quick brown fox jumps over the lazy dog.

24px

The quick brown fox jumps over the lazy dog.

20px

The quick brown fox jumps over the lazy dog.

16px
The quick brown fox jumps over the lazy dog.
16px
The quick brown fox jumps over the lazy dog.

Icons

About Us
Blog
Box Frame
Building
Clock
Coffee
Collapse
Contact Us
Education
Events
Expand
Expand Alt
Eye
Facebook
Favorite
Favorite Active
Food
Furniture
Google
Government
Group
HDMI
Home
Industries
Info
Instagram
Layers
Layouts
Left Arrow
LinkedIn
Location
Map
Marker
Menu Close
Menu
Monitor
Networking
Options Right
Patents
Phone
Photo
Play
Print
Privacy
Resources
Ribbon
Right Arrow
Rocket
RTP
Search Submit
Search
Services
Share
Sofa
Source
Trademark
TV
Twitter
Video
Wifi
Why RTP
Youtube

Base Elements

Paragraph

The p element is one of the most commonly used building blocks of HTML.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas odio tortor, sed vehicula nunc lobortis rutrum. Cras ultrices luctus purus non malesuada. Morbi accumsan, justo ut venenatis aliquet, risus elit sollicitudin tellus, eu vestibulum velit odio a justo.


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas odio tortor, sed vehicula nunc lobortis rutrum. Cras ultrices luctus purus non malesuada. Morbi accumsan, justo ut venenatis aliquet, risus elit sollicitudin tellus, eu vestibulum velit odio a justo.</p>
			

Links

The a element is usually referred to as a link.


<a href="#">This is a default link</a>
			

Blockquote

The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas odio tortor, sed vehicula nunc lobortis rutrum. Cras ultrices luctus purus non malesuada. Morbi accumsan, justo ut venenatis aliquet, risus elit sollicitudin tellus, eu vestibulum velit odio a justo.

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas odio tortor, sed vehicula nunc lobortis rutrum. Cras ultrices luctus purus non malesuada. Morbi accumsan, justo ut venenatis aliquet, risus elit sollicitudin tellus, eu vestibulum velit odio a justo.</blockquote>
			

Line Rule

The hr element creates in the document a highly visible break that renders as a slim horizontal line running the width of the area to which it’s applied.



<hr>
			

List - Unordered

The ul element, the name for which is an abbreviation of unordered list, is used to group a collection of items together in a list, but in a way that doesn’t suggest an order of precedence or importance.

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item

<ul>
	<li>This is a list item in an unordered list</li>
	<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.</li>
	<li>
		Lists can be nested inside of each other
		<ul>
			<li>This is a nested list item</li>
			<li>This is another nested list item in an unordered list</li>
		</ul>
	</li>
	<li>This is the last list item</li>
</ul>
			

List - Ordered

The ol element is similar to the ul element in that it’s used to group a collection of items together in a list.

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item

<ol>
	<li>This is a list item in an ordered list</li>
	<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
	<li>
		Lists can be nested inside of each other
		<ol>
			<li>This is a nested list item</li>
			<li>This is another nested list item in an ordered list</li>
		</ol>
	</li>
	<li>This is the last list item</li>
</ol>
			

List - Definition

If you want to list a series of items that essentially have a title and a description of some kind (that is, each item has two parts), use the definition list dl element.

Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.

<dl>
	<dt>Definition List</dt>
	<dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
	<dt>This is a term.</dt>
	<dd>This is the definition of that term, which both live in a dl.</dd>
	<dt>Here is another term.</dt>
	<dd>And it gets a definition too, which is this line.</dd>
	<dt>Here is term that shares a definition with the term below.</dt>
	<dd>And it gets a definition too, which is this line.</dd>
</dl>
			

Inputs

Common form element that allows users to enter data.


<input type="text" placeholder="Text Input" />
			

Checkboxes

Specific type of input that allows users to select multiple options for a particular label.

Choose an option (check all that apply):

<fieldset>
	<legend><span>Choose an option (check all that apply):</span></legend>
	<ul>
		<li class="field">
			<input id="checkbox-option-option1" type="checkbox" name="checkbox-option" />
			<label for="checkbox-option-option1">Option 1</label>
		</li>
		<li class="field">
			<input id="checkbox-option-option2" type="checkbox" name="checkbox-option" />
			<label for="checkbox-option-option2">Option 2</label>
		</li>
		<li class="field">
			<input id="checkbox-option-option3" type="checkbox" name="checkbox-option" />
			<label for="checkbox-option-option3">Option 3</label>
		</li>
	</ul>
</fieldset>
			

Radios

Specific type of input that allows users to select a specific option for a particular label.

Choose an option:

<fieldset>
	<legend><span>Choose an option:</span></legend>
	<ul>
		<li class="field">
			<input id="radio-option-option1" type="radio" name="radio-option" />
			<label for="radio-option-option1">Option 1</label>
		</li>
		<li class="field">
			<input id="radio-option-option2" type="radio" name="radio-option" />
			<label for="radio-option-option2">Option 2</label>
		</li>
		<li class="field">
			<input id="radio-option-option3" type="radio" name="radio-option" />
			<label for="radio-option-option3">Option 3</label>
		</li>
	</ul>
</fieldset>
			

Buttons

A common element that allows users to interact with an object, or perhaps link to something.

Primary Button

Secondary Button

Ghost Button

<button class="primary">Primary Button</button>
<button class="secondary">Secondary Button</button>
<button class="ghost">Ghost Button</button>

<a class="button primary" href="#">Primary Button</a>
<a class="button secondary" href="#">Secondary Button</a>
<a class="button ghost" href="#">Ghost Button</a>

<input class="primary" type="submit" value="Primary Button" />
<input class="secondary" type="submit" value="Secondary Button" />
<input class="ghost" type="submit" value="Ghost Button" />
			

Table

Table markup is used for presenting data in a grid-like fashion, not for the purposes of laying out a web page, or the sections within a web page.

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

<table>
	<thead>
		<tr>
			<th>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</th>
			<th>Table Heading 4</th>
			<th>Table Heading 5</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</th>
			<th>Table Footer 4</th>
			<th>Table Footer 5</th>
		</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	</tbody>
</table>
			

Components

Loading

Display a spinner for loading content.


<div class="loading">
    <img src="..." />
</div>
	

Search

Display the global search bar.


<div class="site-search">...</div>
	

Social Media - Follow

Display a list of linked social media icons. Used for follow links.


<ul class="follow">
    <li class="twitter">
        <a href="#"><img src="..." /><span>Twitter</span></a>
    </li>
    <li class="google">
        <a href="#"><img src="..." /><span>Google+</span></a>
    </li>
    <li class="linkedin">
        <a href="#"><img src="..." /><span>LinkedIn</span></a>
    </li>
    <li class="youtube">
        <a href="#"><img src="..." /><span>YouTube</span></a>
    </li>
</ul>
    

Social Media - Share

Display a list of linked social media icons. Used to share a entry of content.


<ul class="share">
    <li class="facebook">
        <a href="#" title="Share on Facebook"><img class="svg" src="..." /></a>
        <span class="shares">...</span>
    </li>
    <li class="twitter">
        <a href="#" title="Share on Twitter"><img class="svg" src="..." /></a>
        <span class="shares">...</span>
    </li>
    <li class="google">
        <a href="#" title="Share on Google"><img class="svg" src="..." /></a>
        <span class="shares">...</span>
    </li>
</ul>
    

Social Tile - Text, Standard

Display the standard size text-only tile.


<article id="..." class="social-tile type-text standard hentry">
    <div class="entry-title">
        <p>...</p>
    </div>
    <time class="published" datetime="...">
        <img class="svg" src="..." /> ...
    </time>
    <div class="options">
        <button class="open-options"><img class="svg" src="..." /></button>
        <ul>
            <li data-option="favorite">
                <span class="label" title="Favorite">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Favorite</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="share">
                <span class="label" title="Share">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Share</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="source">
                <span class="label" title="Source">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Source</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="author">
                <span class="label" title="Author">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Author</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
        </ul>
    </div>
    <a class="expand" href="...">
        <img class="svg action-expand" src="..." /> <span class="visuallyhidden">Expand</span>
        <img class="svg action-collapse" src="..." /> <span class="visuallyhidden">Collapse</span>
    </a>
</article>
    

Social Tile - Text, Featured

Display the featured size text-only tile.


<article id="..." class="social-tile type-text featured hentry">
    <div class="entry-title">
        <p>...</p>
    </div>
    <time class="published" datetime="...">
        <img class="svg" src="..." /> ...
    </time>
    <div class="options">
        <button class="open-options"><img class="svg" src="..." /></button>
        <ul>
            <li data-option="favorite">
                <span class="label" title="Favorite">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Favorite</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="share">
                <span class="label" title="Share">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Share</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="source">
                <span class="label" title="Source">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Source</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="author">
                <span class="label" title="Author">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Author</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
        </ul>
    </div>
    <a class="expand" href="...">
        <img class="svg action-expand" src="..." /> <span class="visuallyhidden">Expand</span>
        <img class="svg action-collapse" src="..." /> <span class="visuallyhidden">Collapse</span>
    </a>
</article>
    

Social Tile - Media, Standard

Display the standard size media-only tile.


<article id="..." class="social-tile type-media standard hentry">
    <div class="u-photo">
        <img src="..." />
    </div>
    <time class="published" datetime="...">
        <img class="svg" src="..." /> ...
    </time>
    <div class="options">
        <button class="open-options"><img class="svg" src="..." /></button>
        <ul>
            <li data-option="favorite">
                <span class="label" title="Favorite">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Favorite</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="share">
                <span class="label" title="Share">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Share</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="source">
                <span class="label" title="Source">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Source</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="author">
                <span class="label" title="Author">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Author</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
        </ul>
    </div>
    <a class="expand" href="...">
        <img class="svg action-expand" src="..." /> <span class="visuallyhidden">Expand</span>
        <img class="svg action-collapse" src="..." /> <span class="visuallyhidden">Collapse</span>
    </a>
</article>
    

Social Tile - Media, Featured

Display the featured size media-only tile.


<article id="..." class="social-tile type-media featured hentry">
    <div class="u-photo">
        <img src="..." />
    </div>
    <time class="published" datetime="...">
        <img class="svg" src="..." /> ...
    </time>
    <div class="options">
        <button class="open-options"><img class="svg" src="..." /></button>
        <ul>
            <li data-option="favorite">
                <span class="label" title="Favorite">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Favorite</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="share">
                <span class="label" title="Share">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Share</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="source">
                <span class="label" title="Source">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Source</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="author">
                <span class="label" title="Author">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Author</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
        </ul>
    </div>
    <a class="expand" href="...">
        <img class="svg action-expand" src="..." /> <span class="visuallyhidden">Expand</span>
        <img class="svg action-collapse" src="..." /> <span class="visuallyhidden">Collapse</span>
    </a>
</article>
    

Social Tile - Hybrid, Standard

Display the standard size media-only tile.


<article id="..." class="social-tile type-hybrid standard hentry">
    <div class="entry-content">
        <iframe width="..." height="..." src="..." frameborder="0" allowfullscreen></iframe>
    </div>
    <h1 class="entry-title">...</h1>
    <div class="u-photo">
        <img src="..." />
    </div>
    <time class="published" datetime="...">
        <img class="svg" src="..." /> ...
    </time>
    <div class="options">
        <button class="open-options"><img class="svg" src="..." /></button>
        <ul>
            <li data-option="favorite">
                <span class="label" title="Favorite">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Favorite</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="share">
                <span class="label" title="Share">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Share</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="source">
                <span class="label" title="Source">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Source</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="author">
                <span class="label" title="Author">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Author</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
        </ul>
    </div>
    <a class="expand" href="...">
        <img class="svg action-expand" src="..." /> <span class="visuallyhidden">Expand</span>
        <img class="svg action-collapse" src="..." /> <span class="visuallyhidden">Collapse</span>
    </a>
</article>
    

Social Tile - Hybrid, Featured

Display the featured size media-only tile.


<article id="..." class="social-tile type-hybrid featured hentry">
    <div class="entry-content">
        <iframe width="..." height="..." src="..." frameborder="0" allowfullscreen></iframe>
    </div>
    <h1 class="entry-title">...</h1>
    <div class="u-photo">
        <img src="..." />
    </div>
    <time class="published" datetime="...">
        <img class="svg" src="..." /> ...
    </time>
    <div class="options">
        <button class="open-options"><img class="svg" src="..." /></button>
        <ul>
            <li data-option="favorite">
                <span class="label" title="Favorite">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Favorite</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="share">
                <span class="label" title="Share">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Share</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="source">
                <span class="label" title="Source">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Source</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
            <li data-option="author">
                <span class="label" title="Author">
                    <img class="svg" src="..." />
                    <span class="visuallyhidden">Author</span>
                </span>
                <div class="panel">
                    ...
                </div>
            </li>
        </ul>
    </div>
    <a class="expand" href="...">
        <img class="svg action-expand" src="..." /> <span class="visuallyhidden">Expand</span>
        <img class="svg action-collapse" src="..." /> <span class="visuallyhidden">Collapse</span>
    </a>
</article>
    

Person Tile

Display a person, typically in a list.


<ul class="people">
<li class="vcard has-profile">
<a href="#">
	<div class="photo placeholder" style="background-image: url(...);"></div>
	<h3 class="fn">...</h3>
	<p class="role">...</p>
	<p class="org">...</p>
</a>
</li>
</ul>
	

Featured Banner - Default

Display a banner. Optionally display a graphic, theme overlay, and branding tagline.


<? /*
    * Theme Options (class="theme-##name##")
    * --------------------------------------
    * Ocean
    * Forest
    * Dark Forest
    * Creamsicle
    * Midnight
    * Arctic
    * No Theme
    * No Theme, No Graphic
*/ ?>
<div class="featured-banner type-default theme-ocean" style="background-image: url(...);">
    <h1>... <small>...</small></h1>
    <div class="site-info">
        <small class="site-name">...</small>
        <small class="site-tagline">...</small>
    </div>
</div>
    

Featured Banner - Quote

Display a banner, specifically for a quote. Inherits properties from default banner.


<? /*
    * Theme Options (class="theme-##name##")
    * --------------------------------------
    * Ocean
    * Forest
    * Dark Forest
    * Creamsicle
    * Midnight
    * Arctic
    * No Theme
    * No Theme, No Graphic
*/ ?>
<div class="featured-banner type-quote theme-ocean" style="background-image: url(...);">
    <q>...</q>
    <div class="site-info">
        <small class="site-name">...</small>
        <small class="site-tagline">...</small>
    </div>
</div>
    

Pagination

Display pagination navigational links. Used to break a list into multiple sections.


<div class="pagination">
	<span>Page ... of ...</span>
	<span class="current">...</span>
	<a href="#" class="inactive">...</a>
</div>
	

Badges

Display a formatted text label.

RTP Contributor

<span class="badge">...</span>
	

Badges

Display a formatted text label.


<div id="tag-filter" class="tag-filter">
	<h3 class="toggle">Discover</h3>
	<ul class="options">
		<li class="active"><a href="#">Trending</a></li>
		<li><a href="#">Recent</a></li>
		<li><a href="#">#Education</a></li>
		<li><a href="#">#Jobs</a></li>
		<li><a href="#">#Food</a></li>
	</ul>
</div>