4 Components

4.1 Notifications

Notifications provide lightweight feedback about an operation. They show a brief message at the top of the screen. Notifications can contain an action.

Alert Type We use cookies to ensure you get the best experience
.info

Info alert

Alert Type We use cookies to ensure you get the best experience
.success

Success alert

Alert Type We use cookies to ensure you get the best experience
.warning

Warning alert

Alert Type We use cookies to ensure you get the best experience
.breaking

Breaking news

Alert Type We use cookies to ensure you get the best experience
<div id="alerts" class="wrapper group alerts"> 
  <!-- Repeatable if necessary -->
  <div class="alert-box {$modifiers}">
    <span class="alert-icon" aria-hidden="true"></span>
    <div class="message">
      <span class="alert-type">Alert Type</span>
      We use cookies to ensure you get the best experience 
    </div>
  </div>
  <!-- end Repeatable -->
</div>

4.1.1 Multiple Notifications

Combines multiple notifications into a single, interactive carousel.

Alert Type We use cookies to ensure you get the best experience
Alert Type We use cookies to ensure you get the best experience
Alert Type We use cookies to ensure you get the best experience
Alert Type We use cookies to ensure you get the best experience
Alert Type We use cookies to ensure you get the best experience

<div id="alerts" class="wrapper group alerts">
  <div class="alert-box">
    <span class="alert-icon" aria-hidden="true"></span>
    <div class="message">
      <span class="alert-type">Alert Type</span>
      We use cookies to ensure you get the best experience 
    </div>
  </div>
  <div class="alert-box info">
    <span class="alert-icon" aria-hidden="true"></span>
    <div class="message">
      <span class="alert-type">Alert Type</span>
      We use cookies to ensure you get the best experience 
    </div>
  </div>
  <div class="alert-box success">
    <span class="alert-icon" aria-hidden="true"></span>
    <div class="message">
      <span class="alert-type">Alert Type</span>
      We use cookies to ensure you get the best experience 
    </div>
  </div>
  <div class="alert-box warning">
    <span class="alert-icon" aria-hidden="true"></span>
    <div class="message">
      <span class="alert-type">Alert Type</span>
      We use cookies to ensure you get the best experience 
    </div>
  </div>
  <div class="alert-box breaking">
    <span class="alert-icon" aria-hidden="true"></span>
    <div class="message">
      <span class="alert-type">Alert Type</span>
      We use cookies to ensure you get the best experience 
    </div>
  </div>
</div>

4.1.2 Notifications Widget

Displayed in the header to toggle alerts


<div class="alert-widget">
  <button>
    <span class="icon-notifications" aria-hidden="true"></span>
    <div class="alert-count">2</div>
  </button>
</div>

4.2 Contextual Flyout Panel

Displays info when activated, positioned on/near edge of page.


<button class="flyout-trigger">Open Menu</button>
<div class="flyout-panel" id="myFlyout">
  <div aria-label="First level">
    <button class="flyout-trigger close-trigger" aria-hidden="true"><span class="icon-close" aria-hidden="true"></span> Close</button>
    <nav class="" role="navigation" aria-label="Filters">
      <h3>Title or text</h3>
      <ul>
        <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">About <span class="icon-chevron-right" aria-hidden="true"></span></a>
          <div aria-label="Second level">
            <h3 aria-hidden="true">About</h3>
            <ul>
              <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
              <li><a href="#">Overview</a></li>
              <li><a href="#">Our Divisions</a></li>
              <li><a href="#">Leadership Team <span class="icon-chevron-right" aria-hidden="true"></span></a>
                <div aria-label="Third level">
                  <h3>Leadership Team</h3>
                  <ul>
                    <li class="flyout-trigger back-trigger" aria-hidden="true"><button href="#"><span class="icon-chevron-left" aria-hidden="true"></span> Back</button></li>
                    <li><a href="#">Overview</a></li>
                    <li><a href="#">Contact</a></li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li><a href="#">Education</a></li>
        <li><a href="#">Resources</a></li>
        <li><a href="#">News</a></li>
      </ul>
    </nav>
  </div>
</div>

4.3 Language Translate

Specific select box used to switch the current page's content to another language. Only displayed when other languages are available for the page. If displayed, it will be appended to the main article.

<div class="field select select--language">
  <label for="select-choice">Translate this article:</label>
  <select name="select-choice" id="select-choice">
    <option data-icon="icon-language" value="">Choose language</option>
    <option data-icon="icon-language" value="Choice 1">Choice 1</option>
    <option data-icon="icon-language" value="Choice 2">Choice 2</option>
    <option data-icon="icon-language" value="Choice 3">Choice 3</option>
  </select>
</div>

4.4 Breadcrumbs

Breadcrumbs come in handy to show a navigation trail for users clicking through a site or app.

<div id="breadcrumbs" class="breadcrumbs">
  <div class="wrapper" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/books" itemprop="url">
      <span itemprop="title">Books</span>
    </a> &raquo;
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/books/authors" itemprop="url">
        <span itemprop="title">Authors</span>
      </a> &raquo;
      <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          <span itemprop="title">Stephen King</span>
      </div>
    </div>
  </div>
  <button data-toggle="breadcrumbs icon-add" aria-hidden="true"></button>
</div>

4.5 Pagination

Pagination is a type of navigation that lets users tap through a series of related pages.

4.5.1 Numerical Pagination

If pagination has more than 7 pages, use ellipsis at positions 2 and 6

<nav class="pagination numeric-pagination">
  <ol>
    <li class="disabled"><span class="icon-chevron-left" aria-hidden="true"></span> <span>Back</span></li>
    <li class="active"><a href="#">1<span class="visuallyhidden"> (current)</span></a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><span>&hellip;</span></li>
    <li><a href="#">13</a></li>
    <li><a href="#"><span>Next</span> <span class="icon-chevron-right" aria-hidden="true"></span></a></li>
  </ol>
</nav>
<nav class="pagination numeric-pagination">
  <ol>
    <li><a href="#"><span class="icon-chevron-left" aria-hidden="true"></span> <span>Back</span></a></li>
    <li><a href="#">1</a></li>
    <li><span>&hellip;</span></li>
    <li><a href="#">6</a></li>
    <li class="active"><a href="#">7<span class="visuallyhidden"> (current)</span></a></li>
    <li><a href="#">8</a></li>
    <li><span>&hellip;</span></li>
    <li><a href="#">131</a></li>
    <li><a href="#"><span>Next</span> <span class="icon-chevron-right" aria-hidden="true"></span></a></li>
  </ol>
</nav>

4.5.2 A-Z Pagination

<nav class="pagination alpha-pagination">
  <ol>
    <li ><a href="#">All</a></li>
    <li class="active"><a href="#">A<span class="visuallyhidden"> (current)</span></a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
    <li><a href="#">E</a></li>
    <li><a href="#">F</a></li>
    <li><a href="#">G</a></li>
    <li class="disabled"><span>H</span></li>
    <li><a href="#">I</a></li>
    <li><a href="#">J</a></li>
    <li><a href="#">K</a></li>
    <li><a href="#">L</a></li>
    <li><a href="#">M</a></li>
    <li><a href="#">N</a></li>
    <li><a href="#">O</a></li>
    <li><a href="#">P</a></li>
    <li><a href="#">Q</a></li>
    <li><a href="#">R</a></li>
    <li><a href="#">S</a></li>
    <li><a href="#">T</a></li>
    <li><a href="#">U</a></li>
    <li><a href="#">V</a></li>
    <li><a href="#">W</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">Y</a></li>
    <li><a href="#">Z</a></li>
  </ol>
</nav>

4.6 Progress

Display status of a determinate or indeterminate process.

50%
.progress-demo

Change value to 37 with $('.progress-demo').setProgress(37);

50%
.info

Info progress

50%
.error

Error progress

50%
.success

Success progress

50%
.alert

Alert progress

50%

<div class="progress {$modifiers}" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50%" aria-valuemax="100">
  <span class="progress-max">
    <span class="progress-now" style="width: 50%;"></span>
  </span>
  <span class="progress-text">50%</span>
</div> 

4.7 Tooltips

Notifications provide lightweight feedback about an operation. They show a brief message at the top of the screen. Notifications can contain an action.

More Info
.info

Info alert

More Info
.success

Success alert

More Info
.warning

Warning alert

More Info
.breaking

Breaking news

More Info

<span title="Hey, I'm a Tooltip!" rel="tooltip" class="{$modifiers}">
  <span class="icon-info" aria-hidden="true"></span>
  <span class="visuallyhidden">More Info</span>
</span>

4.8 Dialogs

Display an action that triggers an overlay with content. Useful for photo/video galleries, prompts, etc.

<!-- Inline Content -->
<div id="test-popup" class="white-popup mfp-hide">
  Popup content
</div>
<a href="#test-popup" class="open-popup-link">Show inline popup</a><br />
<!-- Single Image -->
<a href="img/p_kitten.jpg" title="Caption for image" data-toggle="modal image" data-effect="mfp-zoom-out">Open image</a><br />
<!-- Ajax Content -->
<a href="../ajax-demo.html" class="ajax-popup-link">Show ajax content</a>

4.9 Back to Top

Displays a link/button when a user is no longer at the top of the document, allowing them to quickly scroll back to the top.

<!-- we'll point href to #content-container for website -->
<a id="back-to-top" class="back-to-top" href="#kss-node" title="Back to top">
  <span class="icon-vertical-align-top" aria-hidden="true"></span>
  <span class="visuallyhidden">Back to top</span>
</a>

4.11 Org Chart

An organizational chart is a diagram that shows the structure of an organization and the relationships and relative ranks of its parts and positions/jobs. Org charts use JS Primitives library to render charts. These are highly customizable and require professional development.

<div id="demo-org-chart" class="org-chart" style="width: 100%; height: 330px;"></div>

4.12 Cards

A card is a piece of content that contains unique related data; for example, a photo, text, and link all about a single subject. Cards are typically an entry point to more complex and detailed information.

4.12.1 Article Card

<div class="related-cards group">
  <div class="cards">
    <div class="card article {$modifiers}" itemscope itemtype="http://schema.org/Article">
      <a href="http://www.example.com" itemprop="url">
        <span itemprop="photo"><img src="img/p_article.jpg" alt="Photo of Bob Smith" /></span>
        <div class="meta">
          <span itemprop="name">Cannon Among Fresh Catch Highlighted at Nov. 15 Queen Anne's Revenge Lab Open House</span>
          <time itemprop="datePublished" datetime="2015-10-15">Oct 15, 2014</time>
          <span itemprop="keywords">News Story</span>
          <p itemprop="description">Desctription paragraph</p>
        </div>
      </a>
    </div>
  </div>
</div>

4.12.2 Event Card

<div class="related-cards group">
  <div class="cards">
    
    <div class="card event {$modifiers}" itemscope itemtype="http://schema.org/Event">
      <a href="http://www.example.com" itemprop="url">
        <span itemprop="photo">
          <span itemprop="startDate"><time datetime="2015-01-05T08:00Z">30 <span>January</span></time></span>
          <img src="img/p_event.jpg" alt="Photo of Bob Smith" />
        </span>
        <div class="meta">
          <span itemprop="summary">NC Symphony Presents: Civil War Era</span>          
          <span itemprop="location">
            <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
              <span itemprop="locality">Durham</span>, 
              <span itemprop="region">NC</span>
            </span>  
          </span>
          <span itemprop="eventType">Musical</span>
        </div>
      </a>
    </div>
  
  </div>
</div>

4.12.3 Person Card

.framed

Displays a framed card

<div class="related-cards group">
  <div class="cards">
    <div class="card person {$modifiers}" itemscope itemtype="http://schema.org/Person">
      <a href="http://www.example.com" itemprop="url">
        <span itemprop="photo"><img src="img/p_person.jpg" alt="Photo of Bob Smith" /></span>
        <div class="meta">
          <span itemprop="name">Bob Smith</span>
          <span itemprop="title">Engineer</span>
        </div>
      </a>
    </div>
  </div>
</div>

4.12.4 CTA Card

<div class="related-cards group">
  <div class="cards">
    <div class="card cta {$modifiers}" itemscope itemtype="http://schema.org/Thing">
      <a href="http://www.example.com" itemprop="url">
        <div class="meta">
          <span class="icon-check" aria-hidden="true"></span>
          <span itemprop="name">Life in North Carolina</span>
          <span itemprop="description">From the mountains to the sea, there’s plenty of activity going on. See what you’re missing.</span>
        </div>
      </a>
    </div>
  </div>
</div>

4.12.5 Stat Card

<div class="related-cards group">
  <div class="cards">
    <div class="card stat" itemscope itemtype="http://schema.org/Thing">
      <div class="meta">
        <span itemprop="name"><strong>#1</strong> Producer in the Country</span>
        <span itemprop="description">Leading the nation in furniture, tobacco, brick, and textile production.</span>
      </div>
    </div>
  </div>
</div>

4.12.6 Government Card

<div class="related-cards group">
  <div class="cards">
    <div class="card govt" itemscope itemtype="http://schema.org/Thing">
      <span itemprop="image"><img src="img/p_person.jpg" alt="Photo of Bob Smith" /></span>
      <div class="meta">
        <span itemprop="category">Label Category</span>
        <h3 itemprop="name">Card Title</h3>
        <a href="#" itemprop="url" class="button ghost inverted"><span>Visit Website</span></a>
      </div>
    </div>
  </div>
</div>

4.12.7 Service Card

<div class="related-cards group">
  <div class="cards">
    <div class="card service" itemscope itemtype="http://schema.org/Thing">
      <div class="meta">
        <a href="#" itemprop="url">
          <span class="icon-check" aria-hidden="true"></span>
          <span itemprop="name">Service Name</span>
        </a>
      </div>
    </div>
  </div>
</div>

4.12.8 Agency Card

<section class="related-cards group results">
  <div class="cards">
    <article class="article agency" itemscope itemtype="http://schema.org/Thing">
      <div class="block-icon">
        <span class="icon-nc-government-building" aria-hidden="true"></span>
      </div>
      <div class="block-item">  
        <h1 itemprop="name"><a href="templates/agencies-detail.html" itemprop="url">Department of Cultural Resources</a></h1>
        <div class="meta">
          <span class="label category">Government</span>
        </div>
        <p itemprop="description">Work out the amount of child maintenance if you’re arranging it yourselves, or to get an idea of the statutory amounts from the Child Support Agency or Child Maintenance Service.</p>
        <p>Website: <a href="http://www.example.com" itemprop="url">http://www.ncdcr.gov</a></p>
        <section class="social-links">
          <ul>
            <li>
              <a href="http://www.facebook.com/example">
                <span class="icon-facebook" aria-hidden="true"></span> <span>Facebook</span>
              </a>
            </li>
            <li>
              <a href="http://www.twitter.com/example">
                <span class="icon-twitter" aria-hidden="true"></span> <span>Twitter</span>
              </a>
            </li>
            <li>
              <a href="http://www.youtube.com/example">
                <span class="icon-youtube" aria-hidden="true"></span> <span>YouTube</span>
              </a>
            </li>
            <li>
              <a href="http://www.example.com/feed">
                <span class="icon-feed" aria-hidden="true"></span> <span>RSS Feed</span>
              </a>
            </li>
          </ul>
        </section>
      </div>
    </article>
  </div>
</section>

4.12.9 Video Card

<div class="related-cards group">
  <div class="cards">
    <div class="card video {$modifiers}" itemscope itemtype="http://schema.org/VideoObject">
       <a href="https://www.youtube.com/watch?v=c1c0a4fo1zo" itemprop="url">
         <span itemprop="thumbnail"><img src="img/p_article.jpg" alt="Photo of Bob Smith" /></span>
         <div class="meta">
           <span itemprop="name">Watch: The Weather Channel: Winter Weather Alert</span>
           <time itemprop="datePublished" datetime="2015-10-15">Oct 15, 2014</time>
           <span itemprop="keywords">Weather</span>
         </div>
       </a>
    </div>
  </div>
</div>

4.12.10 Employee Cards

Employee cards to be used on Employee Directory detail pages

Engineer

State of North Carolina

District Attorney

District Attorney 10 District

PO Box 31
Raleigh, NC 27602

Bob Smith

919-792-5000

david.j.saacks@nccourts.org
<div class="employee-card" itemscope itemtype="http://schema.org/Person">
	  <div class="group">
		  <div class="image-meta">
		    <img src="../img/l_ncgov-color.svg" />
		    <p itemprop="title">Engineer</p>
		  </div>
		  <div class="meta">
		    <p>State of North Carolina</p>
		    <p itemprop="title">District Attorney</p>
		    <p>District Attorney 10 District</p>
			   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
		    <p itemprop="streetAddress" >PO Box 31 <br/>
		    Raleigh, NC 27602</p>
		    <h2 itemprop="name">Bob Smith</h2>
		    <p itemprop="telephone">919-792-5000</p>
		    <a href="mailto:#" itemprop="email">david.j.saacks@nccourts.org</a>
		  </div>
	  </div>
</div>

4.13 Link Blocks

Various styles of a group of links.

4.13.1 Section Navigation

Third level navigation lists to be placed in a vertical space within pages.

<nav class="section-nav">
  <h3 class="nav-title">Browse Section</h3>
  <ul>
    <li><a href="#">Art</a></li>
    <li><a href="#">History</a></li>
    <li><a href="#">Libraries</a></li>
    <li><a href="#">Leadership</a></li>
    <li class="current-page-ancestor">
      <a href="#">Special Programs</a>
      <ul>
        <li><a href="#">Awards Gala</a></li>
        <li class="current-page"><a href="#">Poet Laureate</a></li>
        <li><a href="#">Queen Anne's Revenge</a></li>
        <li><a href="#">Art that Moves You</a></li>    
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Shop</a></li>  
  </ul>
</nav>

4.13.2 Quick Links

Displays a list of links

.primary.inverted

Primary bg w/ inverted foreground

.accent.inverted

Accent bg w/ inverted foreground

<section class="quick-links {$modifiers}">
  <h3 class="section-title">Quick Links</h3>
  <ul>
    <li>
      <a href="#">
       Link to content 1
      </a>
    </li>
    <li>
      <a href="#">
        Link to content 2
      </a>
    </li>
    <li>
      <a href="#">
        Link to content 3
      </a>
    </li>
    <li>
      <a href="#">
        Link to content 4
      </a>
    </li>
  </ul>
</section>

4.13.2.1 Quick Links - Dates

Displays a list of dates

.primary.inverted

Primary bg w/ inverted foreground

.accent.inverted

Accent bg w/ inverted foreground

<section class="quick-links {$modifiers}">
  <h3 class="section-title">Quick Dates</h3>
  <ul>
    <li itemscope itemtype="http://schema.org/Thing">
      <a href="#" itemprop="url" >
       Link to content 1
      </a>
      <time datetime="2015-01-05T08:00Z">May 25</time>
    </li>
    <li itemscope itemtype="http://schema.org/Thing">
      <a href="#" itemprop="url" >
        Link to content 2
      </a>
      <time datetime="2015-01-05T08:00Z">May 30</time>
    </li>
    <li itemscope itemtype="http://schema.org/Thing">
      <a href="#" itemprop="url" >
        Link to content 3
      </a>
      <time datetime="2015-01-05T08:00Z">Jun 1</time>
    </li>
    <li itemscope itemtype="http://schema.org/Thing">
      <a href="#" itemprop="url" >
        Link to content 4
      </a>
      <time datetime="2015-01-05T08:00Z">Jul 1</time>
    </li>
  </ul>
</section>

4.13.3 Link lists

Displays a list of links

.primary.inverted

Primary bg w/ inverted foreground

.accent.inverted

Accent bg w/ inverted foreground

<section class="link-lists {$modifiers}">
  <h3 class="link-lists-title">Link list</h3>
  <ul>
    <li>
      <a href="#">
       Link to content 1
      </a>
    </li>
    <li>
      <a href="#">
        Link to content 2
      </a>
    </li>
  </ul>
</section>

4.13.4 Social Links

Displays a list of social links. Links automatically adjust contrast based on the containing band's theme.

<section class="social-links {$modifiers}">
  <h3 class="section-title">Follow Us</h3>
  <ul>
    <li>
      <a href="http://www.facebook.com/example">
        <span class="icon-facebook" aria-hidden="true"></span> <span>Facebook</span>
      </a>
    </li>
    <li>
      <a href="http://www.twitter.com/example">
        <span class="icon-twitter" aria-hidden="true"></span> <span>Twitter</span>
      </a>
    </li>
    <li>
      <a href="http://www.youtube.com/example">
        <span class="icon-youtube" aria-hidden="true"></span> <span>YouTube</span>
      </a>
    </li>
    <li>
      <a href="http://www.example.com/feed">
        <span class="icon-feed" aria-hidden="true"></span> <span>RSS Feed</span>
      </a>
    </li>
  </ul>
</section>

4.13.5 Icon Info Blocks

Blocks of content with colored icon treatment on left.

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-core-black

Core Black background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-core-blue

Core Blue background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-core-gray

Core Gray background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-core-light-gray

Core Light Gray background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-accent-cool-gray

Accent Cool Gray background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-accent-warm-gray

Accent Warm Gray background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-accent-light-blue

Accent Light Blue background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-accent-blue

Accent Blue background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-accent-indigo

Accent Indigo background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-accent-deep-purple

Accent Deep Purple background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-accent-purple

Accent Purple background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-accent-red

Accent Red background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-accent-orange

Accent Orange background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-accent-olive

Accent Olive background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-accent-green

Accent Green background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

.theme-accent-turquoise

Accent Turquoise background

Get email alerts

Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.

<div class="info-block {$modifiers}" itemscope itemtype="http://schema.org/Thing">
  <span class="icon-email" aria-hidden="true"></span>
  <div class="meta">
    <h3 itemprop="name">Get email alerts</h3>
    <p itemprop="description">Thank you for your interest in receiving a once weekly newsletter from the Office of the Governor. You will always have the ability to unsubscribe at anytime.</p>
    <a class="button ghost" href="http://www.example.com" itemprop="url">Subscribe</a>
  </div>
</div>

4.15 Calendar

Displays a mini-calendar widget that allows users to select a specific date.

<div id="datepicker-demo" class="ui-datepicker-wrapper"></div>

4.16 Feedback

Displays a form for users to provide feedback on bugs, suggestions, etc.

How can we make this page better for you?
Send us some feedback!

Found a bug? Have a suggestion? Fill out the form below and we'll take a look!

<section id="user-feedback" class="band user-feedback">
  <div class="content wrapper">
    <a class="toggle-trigger" href="javascript:void(0)">How can we make this page better for you?</a>
    <div class="toggle-container">
      <button class="toggle-escape">
        <span class="icon-cancel" aria-hidden="true"></span>
        <span class="visuallyhidden">Hide user feedback form</span>
      </button>
      <form>
        <fieldset>
          <legend><span class="icon-comment" aria-hidden="true"></span>  Send us some feedback!</legend>
          <p>Found a bug? Have a suggestion? Fill out the form below and we'll take a look!</p>
          <div class="field textarea">
            <label for="user-feedback-message">Your Message:</label>
            <textarea id="user-feedback-message"></textarea>
          </div>
          <div class="buttons">
            <input class="button accent" type="submit" value="Send Feedback" />
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</section>

4.17 Slider

Displays a form component that allows users to drag a handle to select a numeric value.

<div id="slider-demo" class="slider"></div>

4.18 Banner Slider

Full-width containers that can be used to display grouped content blocks.

<div class="owl-carousel ncgov-theme">
  <div class="item">
    <div class="item__wrapper">
      <div class="item__image">
        <img src="img/banner-slider-big.jpg" alt="Description">
      </div>
      <div class="item__content">
        <em class="item__category">Trips & Tourism</em>
        <h3 class="item__heading">Explore North Carolina's Duke Homestead</h3>
        <div class="item__text">
          <p>See the early home, factories, and farm where Washington Duke first grew and processed tobacco.</p> 
          <a href="#" class="button ghost inverted">Plan a Family Trip</a>
        </div>
        <span class="item__count">
          <span class="item__count--current"></span>
          of
          <span class="item__count--total"></span> 
        </span>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item__wrapper">
      <div class="item__image">
        <img src="img/banner-slider-big2.jpg" alt="Description">
      </div>
      <div class="item__content">
        <em class="item__category">Category Name</em>
        <h3 class="item__heading">This is the Headline, Wrapped to two lines</h3>
        <div class="item__text">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend et metus at vulputate.</p> 
          <a href="#" class="button ghost inverted">Button Here</a>
        </div>
        <span class="item__count">
          <span class="item__count--current"></span>
          of
          <span class="item__count--total"></span> 
        </span>
      </div>
    </div>
  </div>
</div>

4.19 Search Bar

Global search bar

4.20 Interactive map

<div id="map" class="interactive-map"></div>

4.21 File

Display a resource, which can include a thumbnail preview and related meta data.

<section class="files">
  <article class="file" itemscope itemtype="http://schema.org/Article">
    <div class="preview">
      <img src="../styleguide/img/p_doc-preview.jpg" itemprop="image" alt="Document preview" />
      <span class="icon-doctype icon-doctype-doc" aria-hidden="true"></span>
      <span class="icon-attachment" aria-hidden="true"></span>
    </div>
    <h1 itemprop="name"><a href="#" title="Practitioners' perspectives on child poverty" itemprop="url">Practitioners' perspectives on child poverty</a></h1>
    <div class="meta">
      <span class="label category">PDF</span> &bull;
      <span class="label file-size">325KB</span> &bull;
      <span class="label page-count">19 pages</span>
    </div>
    <a href="#" title="" itemprop="url">Also availble in text-only file format</a>
  </article>
</section>

4.22 Filter Ribbon

Cluster component that contains multiple filter options. Options vary by content type. On mobile, a filter toggle button allows quick access. On desktop, options are displayed inline to the user. Recommendation is to have no more than 3 filter options combined with a contextual search field.

62 upcoming events
<div class="filter-results-stats"><strong>62</strong> upcoming events</div>
<button id="filter-options-toggle" class="button ghost filter-options-toggle"><span class="icon-settings" aria-hidden="true"></span> Filter</button>
<div id="filter-options" class="filter-options is-hidden">
  <div class="fieldgroup">
    <div class="field select">
      <label for="select-choice">Within:</label>
      <select name="select-choice" id="select-choice">
        <option value="Choice 1">All Agencies</option>
        <option value="Choice 2">Administration</option>
        <option value="Choice 3">Cultural Resources</option>
        <option value="Choice 3">Governor's Office</option>
        <option value="Choice 3">Transportation</option>
        <option value="Choice 3">Documents</option>
      </select>
    </div>
    <div class="field select">
      <label for="select-choice">About:</label>
      <select name="select-choice" id="select-choice">
        <option value="Choice 1">All Topics</option>
        <option value="Choice 2">Conference</option>
        <option value="Choice 2">Workshop</option>
      </select>
    </div>
    <div class="field select">
      <label for="select-choice">Authored by:</label>
      <select name="select-choice" id="select-choice">
        <option value="Choice 1">All Authors</option>
        <option value="Choice 2">John Smith</option>
        <option value="Choice 2">Jane Williams</option>
      </select>
    </div>
    <div class="field flex">
      <label>Containing:</label>
      <input type="search" />
    </div>
  </div>
  <input class="button form-submit" type="submit" id="" name="" value="Apply">
</div>

4.22.1 Filter Column

Cluster component that contains multiple filter options. Options vary by content type. On mobile, a filter toggle button allows quick access. On desktop, options are displayed inline to the user. Recommendation is to have no more than 3 filter options combined with a contextual search field.

62 upcoming events
<div class="filter-results-stats"><strong>62</strong> upcoming events</div>
<button id="filter-options-toggle" class="button ghost filter-options-toggle"><span class="icon-settings" aria-hidden="true"></span> Filter</button>
<div id="filter-options" class="filter-options vertical-filter is-hidden">
  <label for="radio-choice">Category</label>
  <div class="fieldgroup radios ghost">
      <ul>
        <li class="field">
          <input type="radio" class="radio" name="options" id="single-option1" checked />
          <label for="single-option1">Business &amp; Employment</label>
        </li>
        <li class="field">
          <input type="radio" class="radio" name="options" id="single-option2" />
          <label for="single-option2">Education</label>
        </li>
        <li class="field">
          <input type="radio" class="radio" name="options" id="single-option3" />
          <label for="single-option3">Government</label>
        </li>
        <li class="field">
          <input type="radio" class="radio" name="options" id="single-option4" />
          <label for="single-option4">Health, Home &amp; Family</label>
        </li>
        <li class="field">
          <input type="radio" class="radio" name="options" id="single-option5" />
          <label for="single-option5">Land &amp; Environment</label>
        </li>
        <li class="field">
          <input type="radio" class="radio" name="options" id="single-option6" />
          <label for="single-option6">Transportation &amp; Safety</label>
        </li>
        <li class="field">
          <input type="radio" class="radio" name="options" id="single-option7" />
          <label for="single-option7">Travel &amp; Culture</label>
        </li>
      </ul>
    <div class="field select">
      <label for="select-choice">About:</label>
      <select name="select-choice" id="select-choice">
        <option value="Choice 1">All Topics</option>
        <option value="Choice 2">Conference</option>
        <option value="Choice 2">Workshop</option>
      </select>
    </div>
    <div class="field flex">
      <label>Containing:</label>
      <input type="search" />
    </div>
  </div>
  <input class="button form-submit" type="submit" id="" name="" value="Apply">
</div>

4.23 Media gallery

<ul class="media-grid">
  <li itemscope itemtype="http://schema.org/ImageGallery">
    <a itemprop="url" href="#">
      <div>
        <h3 itemprop="about">Gallery Title</h3>
        <span>6 Photos</span>
      </div>
      <img itemprop="thumbnailUrl" src="http://placekitten.com/g/800/800">
    </a>    
  </li>
  <li itemscope itemtype="http://schema.org/ImageGallery">
    <a itemprop="url" href="#">
      <div>
        <h3 itemprop="about">Gallery Title</h3>
        <span>6 Photos</span>
      </div>
      <img itemprop="thumbnailUrl" src="http://placekitten.com/g/800/800">
    </a>    
  </li>
  <li itemscope itemtype="http://schema.org/ImageGallery">
    <a itemprop="url" href="#">
      <div>
        <h3 itemprop="about">Gallery Title</h3>
        <span>6 Photos</span>
      </div>
      <img itemprop="thumbnailUrl" src="http://placekitten.com/g/800/800">
    </a>    
  </li>
  <li itemscope itemtype="http://schema.org/ImageGallery">
    <a itemprop="url" href="#">
      <div>
        <h3 itemprop="about">Gallery Title</h3>
        <span>6 Photos</span>
      </div>
      <img itemprop="thumbnailUrl" src="http://placekitten.com/g/800/800">
    </a>    
  </li>
  <li itemscope itemtype="http://schema.org/ImageGallery">
    <a itemprop="url" href="#">
      <div>
        <h3 itemprop="about">Gallery Title</h3>
        <span>6 Photos</span>
      </div>
      <img itemprop="thumbnailUrl" src="http://placekitten.com/g/800/800">
    </a>    
  </li>
  <li itemscope itemtype="http://schema.org/ImageGallery">
    <a itemprop="url" href="#">
      <div>
        <h3 itemprop="about">Gallery Title</h3>
        <span>6 Photos</span>
      </div>
      <img itemprop="thumbnailUrl" src="http://placekitten.com/g/800/800">
    </a>    
  </li>
  <li itemscope itemtype="http://schema.org/ImageGallery">
    <a itemprop="url" href="#">
      <div>
        <h3 itemprop="about">Gallery Title</h3>
        <span>6 Photos</span>
      </div>
      <img itemprop="thumbnailUrl" src="http://placekitten.com/g/800/800">
    </a>    
  </li>
  <li itemscope itemtype="http://schema.org/ImageGallery">
    <a itemprop="url" href="#">
      <div>
        <h3 itemprop="about">Gallery Title</h3>
        <span>6 Photos</span>
      </div>
      <img itemprop="thumbnailUrl" src="http://placekitten.com/g/800/800">
    </a>    
  </li>
</ul>

4.25 Email Signup

Displays a band about email signup. Component must always be located before topical footer, if used on the site.

<section class="band pad-small email-signup">
  <div class="wrapper group">
    <header>
      <img src="../img/g_email-notification.svg" aria-hidden="true" alt="email icon with notification indicator" />
      <h1>Get Email Alerts</h1>
      <p>Stay up to date with DCR. Get county-by-county email alerts on latest news and upcoming events.</p>
    </header>
    <section class="field-group">
      <div class="field {$modifiers}">
        <label for="email">Email Address:</label>
        <input type="email" name="email" id="email" placeholder="someone@example.com" autocapitalize="off" />
        <strong class="error-message">This field is required <span class="icon-error" aria-hidden="true"></span></strong>
      </div>
      <input type="submit" class="button accent ghost inverted" value="Subscribe" />
    </section>
  </div>
</section>

4.26 Twitter Feed

Displays and formats a custom Twitter feed.

Recent Tweets

  1. Pat McCrory @PatMcCroryNC14h
    @Butterball and Shalag US are brining more jobs to our state. Read about this and more in this week's newsletter…
  2. Pat McCrory @PatMcCroryNC14h
    @Butterball and Shalag US are brining more jobs to our state. Read about this and more in this week's newsletter…
Markup:
Markup:

4.27 Interactive Charts

HighCharts framework allows you to visually display data in mulitple ways.

4.28 Instagram Feed

Displays a group of photos in a grid from Instagram

<div style="max-width: 300px;">
  <!-- Copy this block -->
  <ul class="instagram-feed">
    <li><a href="#"><img src="https://placekitten.com/g/800/800" /></a></li>
    <li><a href="#"><img src="https://placekitten.com/g/800/800" /></a></li>
    <li><a href="#"><img src="https://placekitten.com/g/800/800" /></a></li>
    <li><a href="#"><img src="https://placekitten.com/g/800/800" /></a></li>
  </ul>
  <!-- Copy this block -->
</div>