Patterns
Patterns are collections of commonly used components that form familiar sections for page layouts. These patterns were created to introduce consistency across Pennsylvania State Government websites. New patterns can be created with the current list of components.
Hero Patterns
Hero Banner Pattern With Variations
This is a hero banner section h1
Select Code
<header>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<nav class="language-bar bg-gry" id="language-bar">
<a href="http://www.pa.gov/" title="PA.GOV | The Official Website for the Commonwealth of Pennsylvania.">
<img src="assets/toolkit/images/icons/pa-keystone-large.png" alt="PA Keystone Logo" class="h3 lang-logo">
</a>
<div class="language-bar-left">
<a href="http://www.pa.gov/" title="PA.GOV | The Official Website for the Commonwealth of Pennsylvania.">
<span>
An Official
<strong>Pennsylvania</strong> Government Website
</span>
</a>
</div>
<div class="text-right">
<div id="google_translate_element"></div>
<a id="btn-language" href="#!">
<i class="icon -world"></i>
<span>Translate</span>
</a>
</div>
</nav>
<div class="title-bar" data-responsive-toggle="withVariationsNav" data-hide-for="large">
<button class="menu-icon" type="button" data-toggle="withVariationsNav">
<span class="show-for-sr">Menu</span>
</button>
<div class="title-bar-title">menu</div>
<a class="title-bar-title__link" href="/" title="Back to Homepage" aria-label="Back to Homepage">
Title of the Website
</a>
</div>
<div class="top-bar">
<div class="top-bar-left show-for-large">
<a class="button -top-nav" href="/" title="Back to Homepage" aria-label="Back to Homepage">
<img class="site-logo" src="assets/toolkit/images/icons/pa-keystone-large.png" alt="PA Keystone Logo">
<span class="site-name desktop-only">
Title of the Website
</span>
</a>
</div>
<div class="top-bar-right show-for-large">
<ul class="dropdown menu" data-dropdown-menu="" role="menubar">
<li aria-haspopup="true" aria-label="One" class="has-submenu is-dropdown-submenu-parent opens-right" data-is-click="false" role="menuitem">
<a href="#!">Link 1</a>
<ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" role="menubar">
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 1</a>
</li>
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 2</a>
</li>
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 3</a>
</li>
</ul>
</li>
<li role="menuitem">
<a href="#!">Item 2</a>
</li>
<li role="menuitem">
<a href="#!">Item 3</a>
</li>
</ul>
</div>
<div class="top-bar-right top-bar__search">
<fieldset class="form-group">
<div class="input-group" role="group">
<label for="search-input-withVariationsNav" class="show-for-sr">Search Label</label>
<input id="search-input-withVariationsNav" class="input-group-field -small " type="search" placeholder="Search">
<div class="input-group-button" role="group">
<button class="button -secondary -small">
<span class="sr-only">Search</span>
<i class="fa fa-search"></i>
</button>
</div>
</div>
</fieldset>
</div>
</div>
<div class="menu-mobile hide-for-large" id="withVariationsNav">
<nav>
<ul class="vertical menu accordion-menu -unstyled" data-accordion-menu data-submenu-toggle="true" data-multi-open="false">
<li>
<a href="#!">Link 1</a>
<ul class="menu vertical nested">
<li>
<a href="#!">Long Link Title 1</a>
</li>
<li>
<a href="#!">Long Link Title 2</a>
</li>
<li>
<a href="#!">Long Link Title 3</a>
</li>
</ul>
</li>
<li>
<a href="#!">Item 2</a>
</li>
<li>
<a href="#!">Item 3</a>
</li>
</ul>
</nav>
</div>
<div class="hero-section" style="background-image:url('assets/toolkit/images/bg/hero-bg.jpg');">
<div class="hero-section__text ">
<h1 class="section-header">
This is a hero banner section h1
</h1>
</div>
</div>
</header>A typical first pattern familiar to citizens coming to a website.
When to Use
- Always use some form of hero banner. Your project may detail a particular layout for the central background hero section, but always include the official top header, main nav, and its associated mobile styling.
- Typically, the hero banner is unique on the homepage and uniform on interior pages.
When Not to Use
- Unless specifically mandated, do not reuse the homepage hero banner on interior pages.
Usability
- Follow the usability guidelines for each individual component to ensure conformance.
- Do not turn the hero banner into a carousel.
- Only use the Secondary Button in a hero banner.
Accessibility
- Follow the accessibility guidelines for each individual component to ensure conformance.
Hero Banner Pattern Button
This is a hero banner section h1
With a Button
Select Code
<header>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<nav class="language-bar bg-gry" id="language-bar">
<a href="http://www.pa.gov/" title="PA.GOV | The Official Website for the Commonwealth of Pennsylvania.">
<img src="assets/toolkit/images/icons/pa-keystone-large.png" alt="PA Keystone Logo" class="h3 lang-logo">
</a>
<div class="language-bar-left">
<a href="http://www.pa.gov/" title="PA.GOV | The Official Website for the Commonwealth of Pennsylvania.">
<span>
An Official
<strong>Pennsylvania</strong> Government Website
</span>
</a>
</div>
<div class="text-right">
<div id="google_translate_element"></div>
<a id="btn-language" href="#!">
<i class="icon -world"></i>
<span>Translate</span>
</a>
</div>
</nav>
<div class="title-bar" data-responsive-toggle="withButtonNav" data-hide-for="large">
<button class="menu-icon" type="button" data-toggle="withButtonNav">
<span class="show-for-sr">Menu</span>
</button>
<div class="title-bar-title">menu</div>
<a class="title-bar-title__link" href="/" title="Back to Homepage" aria-label="Back to Homepage">
Title of the Website
</a>
</div>
<div class="top-bar">
<div class="top-bar-left show-for-large">
<a class="button -top-nav" href="/" title="Back to Homepage" aria-label="Back to Homepage">
<img class="site-logo" src="assets/toolkit/images/icons/pa-keystone-large.png" alt="PA Keystone Logo">
<span class="site-name desktop-only">
Title of the Website
</span>
</a>
</div>
<div class="top-bar-right show-for-large">
<ul class="dropdown menu" data-dropdown-menu="" role="menubar">
<li aria-haspopup="true" aria-label="One" class="has-submenu is-dropdown-submenu-parent opens-right" data-is-click="false" role="menuitem">
<a href="#!">Link 1</a>
<ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" role="menubar">
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 1</a>
</li>
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 2</a>
</li>
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 3</a>
</li>
</ul>
</li>
<li role="menuitem">
<a href="#!">Item 2</a>
</li>
<li role="menuitem">
<a href="#!">Item 3</a>
</li>
</ul>
</div>
<div class="top-bar-right top-bar__search">
<fieldset class="form-group">
<div class="input-group" role="group">
<label for="search-input-withButtonNav" class="show-for-sr">Search Label</label>
<input id="search-input-withButtonNav" class="input-group-field -small " type="search" placeholder="Search">
<div class="input-group-button" role="group">
<button class="button -secondary -small">
<span class="sr-only">Search</span>
<i class="fa fa-search"></i>
</button>
</div>
</div>
</fieldset>
</div>
</div>
<div class="menu-mobile hide-for-large" id="withButtonNav">
<nav>
<ul class="vertical menu accordion-menu -unstyled" data-accordion-menu data-submenu-toggle="true" data-multi-open="false">
<li>
<a href="#!">Link 1</a>
<ul class="menu vertical nested">
<li>
<a href="#!">Long Link Title 1</a>
</li>
<li>
<a href="#!">Long Link Title 2</a>
</li>
<li>
<a href="#!">Long Link Title 3</a>
</li>
</ul>
</li>
<li>
<a href="#!">Item 2</a>
</li>
<li>
<a href="#!">Item 3</a>
</li>
</ul>
</nav>
</div>
<div class="hero-section" style="background-image:url('assets/toolkit/images/bg/hero-bg.jpg');">
<div class="hero-section__text text-left">
<h1 class="section-header">
This is a hero banner section h1
</h1>
<a href=#! class="button -primary">
With a Button
</a>
</div>
</div>
</header>Hero Banner Pattern Subhead Button
Select Code
<header>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<nav class="language-bar bg-gry" id="language-bar">
<a href="http://www.pa.gov/" title="PA.GOV | The Official Website for the Commonwealth of Pennsylvania.">
<img src="assets/toolkit/images/icons/pa-keystone-large.png" alt="PA Keystone Logo" class="h3 lang-logo">
</a>
<div class="language-bar-left">
<a href="http://www.pa.gov/" title="PA.GOV | The Official Website for the Commonwealth of Pennsylvania.">
<span>
An Official
<strong>Pennsylvania</strong> Government Website
</span>
</a>
</div>
<div class="text-right">
<div id="google_translate_element"></div>
<a id="btn-language" href="#!">
<i class="icon -world"></i>
<span>Translate</span>
</a>
</div>
</nav>
<div class="title-bar" data-responsive-toggle="withSubheadButtonNav" data-hide-for="large">
<button class="menu-icon" type="button" data-toggle="withSubheadButtonNav">
<span class="show-for-sr">Menu</span>
</button>
<div class="title-bar-title">menu</div>
<a class="title-bar-title__link" href="/" title="Back to Homepage" aria-label="Back to Homepage">
Title of the Website
</a>
</div>
<div class="top-bar">
<div class="top-bar-left show-for-large">
<a class="button -top-nav" href="/" title="Back to Homepage" aria-label="Back to Homepage">
<img class="site-logo" src="assets/toolkit/images/icons/pa-keystone-large.png" alt="PA Keystone Logo">
<span class="site-name desktop-only">
Title of the Website
</span>
</a>
</div>
<div class="top-bar-right show-for-large">
<ul class="dropdown menu" data-dropdown-menu="" role="menubar">
<li aria-haspopup="true" aria-label="One" class="has-submenu is-dropdown-submenu-parent opens-right" data-is-click="false" role="menuitem">
<a href="#!">Link 1</a>
<ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" role="menubar">
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 1</a>
</li>
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 2</a>
</li>
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 3</a>
</li>
</ul>
</li>
<li role="menuitem">
<a href="#!">Item 2</a>
</li>
<li role="menuitem">
<a href="#!">Item 3</a>
</li>
</ul>
</div>
<div class="top-bar-right top-bar__search">
<fieldset class="form-group">
<div class="input-group" role="group">
<label for="search-input-withSubheadButtonNav" class="show-for-sr">Search Label</label>
<input id="search-input-withSubheadButtonNav" class="input-group-field -small " type="search" placeholder="Search">
<div class="input-group-button" role="group">
<button class="button -secondary -small">
<span class="sr-only">Search</span>
<i class="fa fa-search"></i>
</button>
</div>
</div>
</fieldset>
</div>
</div>
<div class="menu-mobile hide-for-large" id="withSubheadButtonNav">
<nav>
<ul class="vertical menu accordion-menu -unstyled" data-accordion-menu data-submenu-toggle="true" data-multi-open="false">
<li>
<a href="#!">Link 1</a>
<ul class="menu vertical nested">
<li>
<a href="#!">Long Link Title 1</a>
</li>
<li>
<a href="#!">Long Link Title 2</a>
</li>
<li>
<a href="#!">Long Link Title 3</a>
</li>
</ul>
</li>
<li>
<a href="#!">Item 2</a>
</li>
<li>
<a href="#!">Item 3</a>
</li>
</ul>
</nav>
</div>
<div class="hero-section" style="background-image:url('assets/toolkit/images/bg/hero-bg.jpg');">
<div class="hero-section__text text-left">
<h1 class="section-header">
This is a hero banner section h1
</h1>
<h2>This is a subheading if you really need it</h2>
<a href=#! class="button -secondary">
With a Button
</a>
</div>
</div>
</header>Interior Patterns
Interior Page Hero Pattern
This is a page level h1 being used in a card
This is a subheading
This is some basic intro copy if you really need to have some in the card on the standard homepage hero banner.
With a Button
Select Code
<header>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<nav class="language-bar bg-gry" id="language-bar">
<a href="http://www.pa.gov/" title="PA.GOV | The Official Website for the Commonwealth of Pennsylvania.">
<img src="assets/toolkit/images/icons/pa-keystone-large.png" alt="PA Keystone Logo" class="h3 lang-logo">
</a>
<div class="language-bar-left">
<a href="http://www.pa.gov/" title="PA.GOV | The Official Website for the Commonwealth of Pennsylvania.">
<span>
An Official
<strong>Pennsylvania</strong> Government Website
</span>
</a>
</div>
<div class="text-right">
<div id="google_translate_element"></div>
<a id="btn-language" href="#!">
<i class="icon -world"></i>
<span>Translate</span>
</a>
</div>
</nav>
<div class="title-bar" data-responsive-toggle="main-menu-interior" data-hide-for="large">
<button class="menu-icon" type="button" data-toggle="main-menu-interior">
<span class="show-for-sr">Menu</span>
</button>
<div class="title-bar-title">menu</div>
<a class="title-bar-title__link" href="/" title="Back to Homepage" aria-label="Back to Homepage">
Title of the Website
</a>
</div>
<div class="top-bar">
<div class="top-bar-left show-for-large">
<a class="button -top-nav" href="/" title="Back to Homepage" aria-label="Back to Homepage">
<img class="site-logo" src="assets/toolkit/images/icons/pa-keystone-large.png" alt="PA Keystone Logo">
<span class="site-name desktop-only">
Title of the Website
</span>
</a>
</div>
<div class="top-bar-right show-for-large">
<ul class="dropdown menu" data-dropdown-menu="" role="menubar">
<li aria-haspopup="true" aria-label="One" class="has-submenu is-dropdown-submenu-parent opens-right" data-is-click="false" role="menuitem">
<a href="#!">Link 1</a>
<ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" role="menubar">
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 1</a>
</li>
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 2</a>
</li>
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 3</a>
</li>
</ul>
</li>
<li role="menuitem">
<a href="#!">Item 2</a>
</li>
<li role="menuitem">
<a href="#!">Item 3</a>
</li>
</ul>
</div>
<div class="top-bar-right top-bar__search">
<fieldset class="form-group">
<div class="input-group" role="group">
<label for="search-input-interior" class="show-for-sr">Search Label</label>
<input id="search-input-interior" class="input-group-field -small " type="search" placeholder="Search">
<div class="input-group-button" role="group">
<button class="button -secondary -small">
<span class="sr-only">Search</span>
<i class="fa fa-search"></i>
</button>
</div>
</div>
</fieldset>
</div>
</div>
<div class="menu-mobile hide-for-large" id="main-menu-interior">
<nav>
<ul class="vertical menu accordion-menu -unstyled" data-accordion-menu data-submenu-toggle="true" data-multi-open="false">
<li>
<a href="#!">Link 1</a>
<ul class="menu vertical nested">
<li>
<a href="#!">Long Link Title 1</a>
</li>
<li>
<a href="#!">Long Link Title 2</a>
</li>
<li>
<a href="#!">Long Link Title 3</a>
</li>
</ul>
</li>
<li>
<a href="#!">Item 2</a>
</li>
<li>
<a href="#!">Item 3</a>
</li>
</ul>
</nav>
</div>
<div class="hero-section -card" style="background-image:url('assets/toolkit/images/bg/hero-bg.jpg');">
<div class="row">
<div class="column large-10 medium-12 small-12 small-centered hero-section__text text-left">
<h1 class="section-header">This is a page level h1 being used in a card</h1>
<h2>This is a subheading</h2>
<p>This is some basic intro copy if you really need to have some in the card on the standard homepage hero banner.</p>
<a href="#!" class="button -secondary">With a Button</a>
</div>
</div>
</div>
</header>When to Use
- Typically, the interior hero banner is uniform and can be used for a main page of associated content. It’s important to work with an information architect to determine when and where this pattern should be used in a site hierarchy.
When Not to Use
- Do not use in place of Hero Patterns.
Usability
- Follow the usability guidelines for each individual component to ensure conformance.
- Do not turn the interior hero banner into a carousel.
- Only use the Secondary Button in an interior hero banner.
Accessibility
- Follow the accessibility guidelines for each individual component to ensure conformance.
Multi Input Fields
Select Code
<fieldset class="form-group ">
<legend>Time Input Pattern</legend>
<div class="input-group -stack">
<label for="multiTime" class="show-for-sr">Time of Day (hh:mm)</label>
<input id="multiTime" class="input-group-field" type="text" placeholder="HH:MM" maxlength="5">
<div class="input-group-button">
<label for="multiTimeAmpm" class="show-for-sr">AM/PM</label>
<select name="multiTimeAmpm" id="multiTimeAmpm">
<option value>AM/PM</option>
<option value="value1">AM</option>
<option value="value2">PM</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="form-group -error">
<legend>Time Input Pattern (error)</legend>
<span class="form-message" role="alert" id="multiTimeErrorgroupError-message">Helpful error message</span>
<div class="input-group -stack">
<label for="multiTimeError" class="show-for-sr">Time of Day (hh:mm)</label>
<input id="multiTimeError" class="input-group-field" type="text" placeholder="HH:MM" maxlength="5">
<div class="input-group-button">
<label for="multiTimeErrorAmpm" class="show-for-sr">AM/PM</label>
<select name="multiTimeErrorAmpm" id="multiTimeErrorAmpm">
<option value>AM/PM</option>
<option value="value1">AM</option>
<option value="value2">PM</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="form-group ">
<legend>Time Input with Timezone Pattern</legend>
<div class="input-group -stack">
<label for="multiTimezone" class="show-for-sr">Time of Day (hh:mm)</label>
<input id="multiTimezone" class="input-group-field" type="text" placeholder="HH:MM" maxlength="5">
<div class="input-group-button">
<label for="multiTimezoneAmpm" class="show-for-sr">AM/PM</label>
<select name="multiTimezoneAmpm" id="multiTimezoneAmpm">
<option value>AM/PM</option>
<option value="value1">AM</option>
<option value="value2">PM</option>
</select>
</div>
<div class="input-group-button">
<label for="multiTimezoneTimezone" class="show-for-sr">Timezone</label>
<select name="multiTimezoneTimezone" id="multiTimezoneTimezone">
<option value>Timezone</option>
<option value="value1">Option A</option>
<option value="value2">Option B</option>
<option value="value3">Option C</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="form-group -error">
<legend>Time Input with Timezone Pattern (error)</legend>
<span class="form-message" role="alert" id="multiTimezoneErrorgroupError-message">Helpful error message</span>
<div class="input-group -stack">
<label for="multiTimezoneError" class="show-for-sr">Time of Day (hh:mm)</label>
<input id="multiTimezoneError" class="input-group-field" type="text" placeholder="HH:MM" maxlength="5">
<div class="input-group-button">
<label for="multiTimezoneErrorAmpm" class="show-for-sr">AM/PM</label>
<select name="multiTimezoneErrorAmpm" id="multiTimezoneErrorAmpm">
<option value>AM/PM</option>
<option value="value1">AM</option>
<option value="value2">PM</option>
</select>
</div>
<div class="input-group-button">
<label for="multiTimezoneErrorTimezone" class="show-for-sr">Timezone</label>
<select name="multiTimezoneErrorTimezone" id="multiTimezoneErrorTimezone">
<option value>Timezone</option>
<option value="value1">Option A</option>
<option value="value2">Option B</option>
<option value="value3">Option C</option>
</select>
</div>
</div>
</fieldset>A pattern for using multiple-input fields in conjunction with each other to create single-response output.
When to Use
-
To create correctly parsed strings of information. Good use cases include substituting time and date inputs in place of a calendar or clock component. The output of these inputs should be concatenated into one response.
-
For example, multi-input with three dropdowns (one for hour, one for minute, and one for AM/PM) when set would parse out to HH:HH AM/PM instead of three separate responses of HH, MM, AM/PM.
-
To set labels for multi-inputs to one label.
-
For example, the time multi-input would have one label for the entire input. “Time” would be the label, and the placeholder would indicate to the user in what part of the “Time” input they are, such as hour, minute, AM/PM.
-
To ensure multi-inputs contain only text inputs and dropdown inputs.
When Not to Use
-
Do not overuse. Only make multi-inputs you need.
-
For example, do not make and parse as one response a multi-input for First Name, Middle Initial, Last Name. Keep them separate.
-
Ask yourself if you really need a multi-input pattern. Multi-input patterns should be unique and sparingly used.
-
Multi-input patterns should not contain radio buttons, checkboxes, message inputs, and/or buttons.
Usability
- Ensure labels for multi-inputs are clear and easily understood. Test frequently to ensure user expectations.
- Avoid user confusion by ensuring you do not have disabled inputs in your multi-input patterns.
Accessibility
- Customize accessibly. Ensure customized text inputs continue to meet the accessibility requirements that apply to all form controls.
- Use a fieldset and legend for a multi-input pattern. Surround the multi-input pattern with a
<fieldset class="form-group">. The<legend>provides context for the grouping. - Use semantic ids. Each input should have a semantic id attribute, and its corresponding label should have the same value in its
for=""attribute. - The title attribute can replace
<label>.
Navigation
Main Nav
Select Code
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="large">
<button class="menu-icon" type="button" data-toggle="main-menu">
<span class="show-for-sr">Menu</span>
</button>
<div class="title-bar-title">menu</div>
<a class="title-bar-title__link" href="/" title="Back to Homepage" aria-label="Back to Homepage">
Title of the Website
</a>
</div>
<div class="top-bar">
<div class="top-bar-left show-for-large">
<a class="button -top-nav" href="/" title="Back to Homepage" aria-label="Back to Homepage">
<img class="site-logo" src="assets/toolkit/images/icons/pa-keystone-large.png" alt="PA Keystone Logo">
<span class="site-name desktop-only">
Title of the Website
</span>
</a>
</div>
<div class="top-bar-right show-for-large">
<ul class="dropdown menu" data-dropdown-menu="" role="menubar">
<li aria-haspopup="true" aria-label="One" class="has-submenu is-dropdown-submenu-parent opens-right" data-is-click="false" role="menuitem">
<a href="#!">Link 1</a>
<ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" role="menubar">
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 1</a>
</li>
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 2</a>
</li>
<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
<a href="#!">Long Link Title 3</a>
</li>
</ul>
</li>
<li role="menuitem">
<a href="#!">Item 2</a>
</li>
<li role="menuitem">
<a href="#!">Item 3</a>
</li>
</ul>
</div>
<div class="top-bar-right top-bar__search">
<fieldset class="form-group">
<div class="input-group" role="group">
<label for="search-input-main" class="show-for-sr">Search Label</label>
<input id="search-input-main" class="input-group-field -small " type="search" placeholder="Search">
<div class="input-group-button" role="group">
<button class="button -secondary -small">
<span class="sr-only">Search</span>
<i class="fa fa-search"></i>
</button>
</div>
</div>
</fieldset>
</div>
</div>
<div class="menu-mobile hide-for-large" id="main-menu">
<nav>
<ul class="vertical menu accordion-menu -unstyled" data-accordion-menu data-submenu-toggle="true" data-multi-open="false">
<li>
<a href="#!">Link 1</a>
<ul class="menu vertical nested">
<li>
<a href="#!">Long Link Title 1</a>
</li>
<li>
<a href="#!">Long Link Title 2</a>
</li>
<li>
<a href="#!">Long Link Title 3</a>
</li>
</ul>
</li>
<li>
<a href="#!">Item 2</a>
</li>
<li>
<a href="#!">Item 3</a>
</li>
</ul>
</nav>
</div>Hierarchical, horizontal wayfinding.
When to Use
- Always use this pattern for public websites. It is the definitive pattern for creating top navigation.
When Not to Use
- In rare instances, this pattern shouldn’t be used for unique services or landing pages.
Usability
- If a top link has a dropdown list of child links, the top link is activated on hover, not click.
- If a top link has a dropdown list of child links, include a chevron icon to visually indicate it has child links.
- If a top link has a dropdown list of child links, it may also link to a new page if clicked.
- Do not duplicate the top link in the list of child links.
- It is preferable to make the focus states for the main navigation the same as the hover states.
- Always include the Official Top Header pattern about the Main Navigation when creating an official pa.gov site or service.
Accessibility
- Follow accessibility guidelines for creating links and search inputs.
Main Nav Mobile
Top navigation reflowed for smaller devices.
When to Use
- Utilized when a site/service screen resolution is 900px wide and smaller.
When Not to Use
- At full-screen size where all of the navigation items can comfortably be displayed on the page.
Usability
- Only use for mobile navigation.
- Top links that have child links underneath are indented and expanded open to show the entire navigation.
Accessibility
- Follow the accessibility guidelines for links.
Search
Search Input And Associated Components
Select Code
<fieldset class="form-group">
<div class="input-group" role="group">
<label for="search-input" class="show-for-sr">Search Label</label>
<input id="search-input" class="input-group-field -small " type="search" placeholder="Search...">
<div class="input-group-button" role="group">
<button class="button -secondary -small">
<span class="sr-only">Search</span>
<i class="fa fa-search"></i>
</button>
</div>
</div>
</fieldset>A binary pattern of input and results.
When to Use
- Include the search input in the navigation as detailed in the Navigation pattern. Pages denoted for search results should use the search results component.
When Not to Use
- Always include the search input and search results page unless you are creating a one-page site.
Usability
- Unless otherwise directed, do not create a page with a dedicated search input; it is redundant from the main navigation.
- Only use the search results component for search results.
Accessibility
- Follow the accessibility guidelines for text inputs and buttons to ensure conformance with those components.
Search Input Focus
Select Code
<fieldset class="form-group">
<div class="input-group" role="group">
<label for="search-input-focus" class="show-for-sr">Search Label</label>
<input id="search-input-focus" class="input-group-field -small -focus" type="search" placeholder="Search...">
<div class="input-group-button" role="group">
<button class="button -secondary -small">
<span class="sr-only">Search</span>
<i class="fa fa-search"></i>
</button>
</div>
</div>
</fieldset>Search Result Internal
Select Code
<a class="card -search">
<div class="card-section">
<p class="card-subtitle">Title of search result that has a very long title....</p>
<p class="card-source">Source URL</p>
<div class="card-content">
<p>Metadata of the search result that usually is around 280 characters...</p>
</div>
</div>
</a>Search Result Internal Hover
Select Code
<a class="card -search -hover">
<div class="card-section">
<p class="card-subtitle">Title of search result that has a very long title....</p>
<p class="card-source">Source URL</p>
<div class="card-content">
<p>Metadata of the search result that usually is around 280 characters...</p>
</div>
</div>
</a>Search Result External
Select Code
<a class="card -search -external">
<div class="card-section">
<p class="card-subtitle">Title of search result that has a very long title....</p>
<p class="card-source">Source URL</p>
<div class="card-content">
<p>Metadata of the search result that usually is around 280 characters...</p>
</div>
<span class="show-for-sr">Opens In A New Window</span><i class="fa fa-external-link" aria-hidden="true"></i>
</div>
</a>Search Result External Hover
Select Code
<a class="card -search -hover -external">
<div class="card-section">
<p class="card-subtitle">Title of search result that has a very long title....</p>
<p class="card-source">Source URL</p>
<div class="card-content">
<p>Metadata of the search result that usually is around 280 characters...</p>
</div>
<span class="show-for-sr">Opens In A New Window</span><i class="fa fa-external-link" aria-hidden="true"></i>
</div>
</a>