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

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.

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="example-menu-1" data-hide-for="large">
		<button class="menu-icon" type="button" data-toggle="example-menu-1">
			<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="#0">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="#0">Long Link Title 1</a>
						</li>
						<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
							<a href="#0">Long Link Title 2</a>
						</li>
						<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
							<a href="#0">Long Link Title 3</a>
						</li>
					</ul>
				</li>
				<li role="menuitem">
					<a href="#0">Link 2</a>
				</li>
				<li role="menuitem">
					<a href="#0">Link 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" class="show-for-sr">Search</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>
		</div>
	</div>
	<div class="menu-mobile hide-for-large" id="example-menu-1">
		<nav>
			<ul class="vertical menu accordion-menu -unstyled" data-accordion-menu data-submenu-toggle="true">
				<li>
					<a href="#!">Item 1</a>
					<ul class="menu vertical nested">
						<li>
							<a href="#!">Item 1A</a>
						</li>
						<li><a href="#!">Item 1B</a></li>
						<li><a href="#!">Item 1C</a></li>
					</ul>
				</li>
				<li>
					<a href="#!">Item 2</a>
					<ul class="menu vertical nested">
						<li><a href="#!">Item 2A</a></li>
						<li><a href="#!">Item 2B</a></li>
					</ul>
				</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>

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="example-menu-1" data-hide-for="large">
		<button class="menu-icon" type="button" data-toggle="example-menu-1">
			<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="#0">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="#0">Long Link Title 1</a>
						</li>
						<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
							<a href="#0">Long Link Title 2</a>
						</li>
						<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
							<a href="#0">Long Link Title 3</a>
						</li>
					</ul>
				</li>
				<li role="menuitem">
					<a href="#0">Link 2</a>
				</li>
				<li role="menuitem">
					<a href="#0">Link 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" class="show-for-sr">Search</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>
		</div>
	</div>
	<div class="menu-mobile hide-for-large" id="example-menu-1">
		<nav>
			<ul class="vertical menu accordion-menu -unstyled" data-accordion-menu data-submenu-toggle="true">
				<li>
					<a href="#!">Item 1</a>
					<ul class="menu vertical nested">
						<li>
							<a href="#!">Item 1A</a>
						</li>
						<li><a href="#!">Item 1B</a></li>
						<li><a href="#!">Item 1C</a></li>
					</ul>
				</li>
				<li>
					<a href="#!">Item 2</a>
					<ul class="menu vertical nested">
						<li><a href="#!">Item 2A</a></li>
						<li><a href="#!">Item 2B</a></li>
					</ul>
				</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 -secondary">with a button</a>
		</div>
	</div>
</header>

Hero Banner Pattern Subhead Button

This is a hero banner section h1

This is a subheading if you really need it

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="example-menu-1" data-hide-for="large">
		<button class="menu-icon" type="button" data-toggle="example-menu-1">
			<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="#0">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="#0">Long Link Title 1</a>
						</li>
						<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
							<a href="#0">Long Link Title 2</a>
						</li>
						<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
							<a href="#0">Long Link Title 3</a>
						</li>
					</ul>
				</li>
				<li role="menuitem">
					<a href="#0">Link 2</a>
				</li>
				<li role="menuitem">
					<a href="#0">Link 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" class="show-for-sr">Search</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>
		</div>
	</div>
	<div class="menu-mobile hide-for-large" id="example-menu-1">
		<nav>
			<ul class="vertical menu accordion-menu -unstyled" data-accordion-menu data-submenu-toggle="true">
				<li>
					<a href="#!">Item 1</a>
					<ul class="menu vertical nested">
						<li>
							<a href="#!">Item 1A</a>
						</li>
						<li><a href="#!">Item 1B</a></li>
						<li><a href="#!">Item 1C</a></li>
					</ul>
				</li>
				<li>
					<a href="#!">Item 2</a>
					<ul class="menu vertical nested">
						<li><a href="#!">Item 2A</a></li>
						<li><a href="#!">Item 2B</a></li>
					</ul>
				</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

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.

This is a page level h1 being used in a card

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="example-menu-1" data-hide-for="large">
		<button class="menu-icon" type="button" data-toggle="example-menu-1">
			<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="#0">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="#0">Long Link Title 1</a>
						</li>
						<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
							<a href="#0">Long Link Title 2</a>
						</li>
						<li class="is-submenu-item is-dropdown-submenu-item" role="menuitem">
							<a href="#0">Long Link Title 3</a>
						</li>
					</ul>
				</li>
				<li role="menuitem">
					<a href="#0">Link 2</a>
				</li>
				<li role="menuitem">
					<a href="#0">Link 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" class="show-for-sr">Search</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>
		</div>
	</div>
	<div class="menu-mobile hide-for-large" id="example-menu-1">
		<nav>
			<ul class="vertical menu accordion-menu -unstyled" data-accordion-menu data-submenu-toggle="true">
				<li>
					<a href="#!">Item 1</a>
					<ul class="menu vertical nested">
						<li>
							<a href="#!">Item 1A</a>
						</li>
						<li><a href="#!">Item 1B</a></li>
						<li><a href="#!">Item 1C</a></li>
					</ul>
				</li>
				<li>
					<a href="#!">Item 2</a>
					<ul class="menu vertical nested">
						<li><a href="#!">Item 2A</a></li>
						<li><a href="#!">Item 2B</a></li>
					</ul>
				</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>This is a page level h1 being used in a card</h1>
				<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>