Version 3.0.6

Header

Accessibility Note: the skip-nav link in the header should correspond to an anchor that is placed either in a link before the main content section or on the main content section itself. The "id" property of the anchor link should correspond to the "href" property of the skip-nav link.

For Example:

<a href="javascript:void(0);" id="anchorId" class="reader-only"></a>

Or

<section id="anchorID" class="app-content"></section>

Default Headers use Progress UI's blue. The header is also mobile-responsive, which allows users on any devide to use the header.

                      
<header class="app-header">
<section class="app-nav-header">
<div class="app-nav-container">
<a href="anchorId" class="skip-nav reader-only">Skip to Main Content</a>
<div class="sidebar-toggle-container">
<a class="sidebar-toggle" data-toggle="dropdown" href="">
<span class="menu-icon glyphicons glyphicons-menu-hamburger x1" aria-hidden"true"> </span>
</a>
</div>
<div class="app-branding">
<a class="app-title" href="">
<h1>
<em>LOGO</em>
</h1>
</a>
</div>
<li class="dropdown dropdown-database" role="menuitem">
<a class="dropdown-toggle database-toggle" href="" data-toggle="dropdown" aria-label="Account Settings">
<div class="database-name">
<p class="white"> Voters <span class="nub white"> </span> </p>
<hr class="voters">
</div>
</a>
<ul class="dropdown-menu dropdown-menu-left header-dropdown database" role="menu">
<li class="members" role="menuitem">
<a href="">Members= DNCCD</a>
</li>
<li class="voterreg" role="menuitem">
<a href="">Voter Registration - DNCVR</a>
</li>
<li class="voters current" role="menuitem">
<a href="">Voters</a>
</li>
<li class="campaign" role="menuitem">
<a href="">Campaign</a>
</li>
</ul>
</li>
<ul class="app-user-controls" role="menu">
<li class="dropdown dropdown-search" role="menuitem">
<a class="dropdown-toggle" href="" data-toggle="dropdown" aria-label="Account Settings">
<span class="glyphicons glyphicons-search" id="headerSearchSmallScreen">
</a>
<ul class="dropdown-menu dropdown-menu-right header-dropdown search" role="menu">
<li class="search-input" role="menuitem">
<div class="input-control-right"> </div>
<div class="input-container">
<span class="glyphicons glyphicons-search-right" id="headerSearchIcon"> </span>
<input class="input-element" type="text" placeholder="Search for a Contact"> </input>
</div>
</li>
</ul>
</li>
<li class="dropdown dropdown-notifications" role="menuitem">
<a class="dropdown-toggle" href="" data-toggle="dropdown" aria-label="Account Settings">
<i class="glyphicons glyphicons-bell xs" aria-hidden="true">
<span class="notification">
<span class="notification-num"> 1 </span>
<span class="reader-only"> Notifications </span>
</a>
<ul class="dropdown-menu dropdown-menu-right header-dropdown notifications" role="menu">
<li class="active user-title header-left" role="menuitem"> Notifications </li>
<li class="active header-right" role="menuitem">
<a href="">Mark All As Read</a>
</li>
<hr>
<li class="unread notifiation-text" role="menuitem">
<a href="">
<p>Your file <span class="bold"> listforphonebankingJune2nd.zip </span> is ready to download. <span class="notification-type"> Export Files </span> <span class="notification-time"> - 7 minutes ago </span> </p>
</a>
</li>
<hr>
<li class="notifiation-text" role="menuitem">
<a href="">
<p>Your data from <span class="bold"> phonebankMay30th.txt </span> has been successfully uploaded. <span class="notification-type"> Bulk Upload </span> <span class="notification-time"> - 3 days ago </span> </p>
</a>
</li>
<hr>
<li class="notifiation-text" role="menuitem">
<a href="">
<p>Your file <span class="bold"> listforcanvassingMay30th.pdf </span> is ready to download. <span class="notification-type"> Export Files </span> <span class="notification-time"> - 3 days go </span> </p>
</a>
</li>
<hr>
<li class="bottom-action" role="menuitem">
<a href="">View All Notifications</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-user" role="menuitem">
<a class="dropdown-toggle" href="" data-toggle="dropdown" aria-label="Account Settings">
<i class="user-icon pink">
<span class="nub white">
</a>
<ul class="dropdown-menu dropdown-menu-right header-dropdown" role="menu">
<li class="user-header" role="menuitem">
<i class="user-icon large dropdown-icon pink">
<div class="user-dropdown-info">
<p class="name"> Abigail Adams </p>
<p class="username"> AAdams </p>
<p class="client"> DNC VoteBuilder </p>
<p class="client"> <span> California </span> <a> Switch </a> </p>
</div>
</li>
<hr>
<li class="user=title" role="menuitem">
<a href="">Account and Settings</a>
</li>
<li role="menuitem">
<a href="">User Dropdown Item</a>
</li>
<li role="menuitem">
<a href="">User Dropdown Item</a>
</li>
<hr>
<li class="user=title" role="menuitem">
<a href="">Action ID</a>
</li>
<li role="menuitem">
<a href="">User Dropdown Item</a>
</li>
<li role="menuitem">
<a href="">User Dropdown Item</a>
</li>
<hr>
<li class="user=title" role="menuitem">
<a href="">Help and Support</a>
</li>
<li role="menuitem">
<a href="">User Dropdown Item</a>
</li>
<li role="menuitem">
<a href="">User Dropdown Item</a>
</li>
<hr>
<li role="menuitem">
<a href="">Log Out</a>
</li>
</ul>
</li>
</ul>
<div id="headerSearch">
<div class="input-control right">
<div class="input-container">
<span class="glyphicons glyphicons-search-right" id="headerSearchIcon"></span>
<input class="input-element" type="text" placeholder="Search for a contact"></input>
</div>
</div>
</div>
</div>
</section>
</header>

Search Results

Powered by