common-design-patterns-compare.html


<!doctype html>

<!--[if lt IE 9]>
<html class="no-js lt-ie9" dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!--<![endif]-->
<head>
    
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Common design patterns for Canada.ca - Canada.ca</title>
<meta content="width=device-width,initial-scale=1" name="viewport">


	<link rel="schema.dcterms" href="http://purl.org/dc/terms/"/>
	
		<meta name="description" content="The common design patterns can be used across various templates from this Specification."/>
	
	
		<meta name="keywords" content="canada.ca, content, information, architecture, specification, templates, design, patterns, controlled, vocabulary, government, canada, common"/>
	
	
		<meta name="author" content="Treasury Board of Canada Secretariat"/>
	
	
		<meta property="dcterms.title" content="Common design patterns for Canada.ca"/>
		<meta property="dcterms:title" content="Common design patterns for Canada.ca"/>
	
	
		<meta property="dcterms.description" content="The common design patterns can be used across various templates from this Specification."/>
		<meta property="dcterms:description" content="The common design patterns can be used across various templates from this Specification."/>
	
	
		<meta property="dcterms.creator" content="Treasury Board of Canada Secretariat"/>
		<meta property="dcterms:creator" content="Treasury Board of Canada Secretariat"/>
	
	
		<meta property="dcterms.language" title="ISO639-2/T" content="eng"/>
		<meta property="dcterms:language" title="ISO639-2/T" content="eng"/>
	
	
		<meta property="dcterms.subject" title="gccore" content="IN Information and Communications"/>
		<meta property="dcterms:subject" title="gccore" content="IN Information and Communications"/>
	
	
		<meta property="dcterms.issued" title="W3CDTF" content="2017-10-05"/>
		<meta property="dcterms:issued" title="W3CDTF" content="2017-10-05"/>
	
	
		<meta property="dcterms.modified" title="W3CDTF" content="2017-10-05"/>
		<meta property="dcterms:modified" title="W3CDTF" content="2017-10-05"/>
	
	
		<meta property="dcterms.spatial" content="Canada"/>
		<meta property="dcterms:spatial" content="Canada"/>
	
	
		<meta property="dcterms.type" content="guidance"/>
		<meta property="dcterms:type" content="guidance"/>
	
	
		<meta name="dcterms.source" content="aem"/>
	
	
		<meta name="dcterms.identifier" content="Treasury_Board_of_Canada_Secretariat"/>
	
	
<script src="//assets.adobedtm.com/caacec67651710193d2331efef325107c23a0145/satelliteLib-78cf42deb149c9766cbaaa6151e252b9b67c0200.js"></script>


<link rel="stylesheet" href="/etc/designs/canada/clientlib-all.min.css" type="text/css">


<link rel="stylesheet" href="/etc/designs/canada/wet-boew/css/wet-boew.min.css"/>
<link rel="stylesheet" href="/etc/designs/canada/wet-boew/css/theme.css"/>

<!--[if gte IE 9 | !IE ]><!-->
<link href="/etc/designs/canada/wet-boew/assets/favicon.ico" rel="icon" type="image/x-icon"/>
<!--<![endif]-->

<!--[if lt IE 9]>
<link href="/etc/designs/canada/wet-boew/assets/favicon.ico" rel="shortcut icon" />
<link rel="stylesheet" href="/etc/designs/canada/wet-boew/css/ie8-wet-boew.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/etc/designs/canada/wet-boew/js/ie8-wet-boew.min.js"></script>
<![endif]-->

<noscript><link rel="stylesheet" href="/etc/designs/canada/wet-boew/css/noscript.min.css"/></noscript>
<script>dataLayer = []; dataLayer1 = [];</script>
</head>

<body vocab="http://schema.org/" typeof="WebPage">


<noscript><iframe title="Google Tag Manager GCWeb" src="//www.googletagmanager.com/ns.html?id=GTM-TLGQ9K" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer1'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer1','GTM-TLGQ9K');</script>


        <div class="par iparys_inherited">

    
        <div class="global-header"><!-- Accessibility -->
<ul id="wb-tphp">
    <li class="wb-slc"><a class="wb-sl" href="#wb-cont">Skip to main content</a></li>
    <li class="wb-slc visible-sm visible-md visible-lg"><a class="wb-sl" href="#wb-info">Skip to &#34;About this site&#34;</a></li>
    
</ul>

<header role="banner">
<div id="wb-bnr" class="container">

    
    <section id="wb-lng" class="visible-md visible-lg text-right">
    <h2 class="wb-inv">Language selection</h2>
    <div class="row">
        <div class="col-md-12">
            <ul class="list-inline margin-bottom-none">
                <li>
                    <a lang="fr" href="/fr/secretariat-conseil-tresor/services/communications-gouvernementales/specifications-contenu-architecture-information-canada/configurations-conception-communes.html">
                        Fran&ccedil;ais
                        
                    </a>
                </li>
                
                
            </ul>
        </div>
    </div>
</section>
    <div class="row">

        <div class="brand col-xs-8 col-sm-9 col-md-6">
            <a href="/en.html">
                <object type="image/svg+xml" tabindex="-1" data="/etc/designs/canada/wet-boew/assets/sig-blk-en.svg"></object>
                <span class="wb-inv">Government of Canada</span>
            </a>
        </div>


        <section id="wb-srch" class="col-xs-6 text-right visible-md visible-lg">
            <h2 class="wb-inv">Search</h2>
            
<form action="/en/sr/srb.html" method="get" name="cse-search-box" role="search" class="form-inline">
<div class="form-group">
<label for="wb-srch-q" class="wb-inv">Search website</label>
<input name="cdn" value="canada" type="hidden"/>
<input name="st" value="s" type="hidden"/>
<input name="num" value="10" type="hidden"/>
<input name="langs" value="en" type="hidden"/>
<input name="st1rt" value="1" type="hidden"/>
<input name="s5bm3ts21rch" value="x" type="hidden"/>

	<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="27" maxlength="150" placeholder="Search Canada.ca"/>
    

<input type="hidden" name="_charset_" value="UTF-8"/>

<datalist id="wb-srch-q-ac">
<!--[if lte IE 9]><select><![endif]-->
<!--[if lte IE 9]></select><![endif]-->
</datalist>
</div>
<div class="form-group submit">
<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button>

</div>
</form>

        </section>


        <section class="wb-mb-links col-xs-4 col-sm-3 visible-sm visible-xs" id="wb-glb-mn">
            <h2>Search and menus</h2>
            <ul class="list-inline text-right chvrn">
                <li>
                    <a href="#mb-pnl" title="Search and menus" aria-controls="mb-pnl" class="overlay-lnk" role="button">
                <span class="glyphicon glyphicon-search">
                    <span class="glyphicon glyphicon-th-list">
                        <span class="wb-inv">Search and menus</span>
                    </span>
                </span>
                    </a>
                </li>
            </ul>
            <div id="mb-pnl"></div>
        </section>
    </div>
</div>


<nav role="navigation" id="wb-sm" class="wb-menu visible-md visible-lg" data-trgt="mb-pnl" typeof="SiteNavigationElement">
         <div class="pnl-strt container nvbar">
        <h2 class="wb-inv">Topics menu</h2>
        <div class="row">
            
            <ul class="list-inline menu" role="menubar">
                <li>
                    
                        
                            <a href="/en/services/jobs.html" class="item">Jobs</a>
                        
                    
                    <ul id="jobs" class="sm list-unstyled" role="menu">
                        
                        <li>
                            
                            <a href="http://www.jobbank.gc.ca/home-eng.do?lang=eng" role="menuitem">Job Bank</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/jobs/opportunities.html" role="menuitem">Find a job</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/jobs/training.html" role="menuitem">Training</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="http://www.canada.ca/business-management" role="menuitem">Hire and manage employees</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="http://www.canada.ca/start-business" role="menuitem">Starting a business</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/jobs/workplace.html" role="menuitem">Workplace standards</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/finance/pensions.html" role="menuitem">Pensions and retirement</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="http://www.canada.ca/ei" role="menuitem">Employment insurance</a>
                        </li>
                    
                        <li class="slflnk">
                            <a href="/en/services/jobs.html" role="menuitem">Jobs – More</a>
                        </li>
                        
                    </ul>
                </li>
            
                <li>
                    
                        
                            <a href="/en/services/immigration-citizenship.html" class="item">Immigration</a>
                        
                    
                    <ul id="immigration" class="sm list-unstyled" role="menu">
                        
                        <li>
                            
                            <a href="/en/immigration-refugees-citizenship/services/application.html" role="menuitem">My application</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/immigration-refugees-citizenship/services/visit-canada.html" role="menuitem">Visit</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/immigration-refugees-citizenship/services/immigrate-canada.html" role="menuitem">Immigrate</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/immigration-refugees-citizenship/services/work-canada.html" role="menuitem">Work</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/immigration-refugees-citizenship/services/study-canada.html" role="menuitem">Study</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/immigration-refugees-citizenship/services/canadian-citizenship.html" role="menuitem">Citizenship</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/immigration-refugees-citizenship/services/new-immigrants.html" role="menuitem">New immigrants</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/immigration-refugees-citizenship/services/canadians.html" role="menuitem">Canadians</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/immigration-refugees-citizenship/services/refugees.html" role="menuitem">Refugees and asylum</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/immigration-citizenship/enforcement-violations.html" role="menuitem">Enforcement and violations</a>
                        </li>
                    
                        <li class="slflnk">
                            <a href="/en/services/immigration-citizenship.html" role="menuitem">Immigration – More</a>
                        </li>
                        
                    </ul>
                </li>
            
                <li>
                    
                        
                            <a href="http://travel.gc.ca/" class="item">Travel</a>
                        
                    
                    <ul id="travel" class="sm list-unstyled" role="menu">
                        
                        <li>
                            
                            <a href="http://travel.gc.ca/travelling/advisories" role="menuitem">Travel Advice and Advisories</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="http://travel.gc.ca/canadian-tourism" role="menuitem">Canadian attractions, events and experiences</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/immigration-refugees-citizenship/services/canadian-passports.html" role="menuitem">Canadian passports</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="http://travel.gc.ca/travelling" role="menuitem">Travelling abroad</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="http://travel.gc.ca/air" role="menuitem">Air travel</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="http://travel.gc.ca/returning" role="menuitem">Returning to Canada</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="http://travel.gc.ca/assistance" role="menuitem">Assistance abroad</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="http://travel.gc.ca/stay-connected" role="menuitem">Stay connected</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="http://www.canada.ca/visit" role="menuitem">Visit Canada</a>
                        </li>
                    
                        <li class="slflnk">
                            <a href="http://travel.gc.ca/" role="menuitem">Travel – More</a>
                        </li>
                        
                    </ul>
                </li>
            
                <li>
                    
                        
                            <a href="/en/services/business.html" class="item">Business</a>
                        
                    
                    <ul id="business" class="sm list-unstyled" role="menu">
                        
                        <li>
                            
                            <a href="/en/services/business/start.html" role="menuitem">Starting a business</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/business/grants.html" role="menuitem">Business grants and financing</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/business/taxes.html" role="menuitem">Business taxes</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/business/federal-corporations.html" role="menuitem">Federal corporations</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/business/hire.html" role="menuitem">Hiring and managing employees</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/business/trade.html" role="menuitem">International trade and investment</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/business/permits.html" role="menuitem">Permits, licences and regulations</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/business/doing-business.html" role="menuitem">Doing business with government</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/science/innovation.html" role="menuitem">R&amp;D and innovation</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/business/research.html" role="menuitem">Research and business intelligence</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/business/ip.html" role="menuitem">Intellectual property and copyright</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/business/maintaingrowimprovebusiness.html" role="menuitem">Maintaining your business</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/business/protecting.html" role="menuitem">Protecting your business</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/business/bankruptcy.html" role="menuitem">Insolvency for business</a>
                        </li>
                    
                        <li class="slflnk">
                            <a href="/en/services/business.html" role="menuitem">Business – More</a>
                        </li>
                        
                    </ul>
                </li>
            
                <li>
                    
                        
                            <a href="/en/services/benefits.html" class="item">Benefits</a>
                        
                    
                    <ul id="benefits" class="sm list-unstyled" role="menu">
                        
                        <li>
                            
                            <a href="/en/services/benefits/ei.html" role="menuitem">Employment Insurance</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/benefits/family.html" role="menuitem">Family benefits</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/benefits/publicpensions.html" role="menuitem">Public pensions</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/benefits/education.html" role="menuitem">Education and training</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/benefits/housing.html" role="menuitem">Housing benefits</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/benefits/disability.html" role="menuitem">Disability benefits</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="http://www.canadabenefits.gc.ca" role="menuitem">Benefits finder</a>
                        </li>
                    
                        <li class="slflnk">
                            <a href="/en/services/benefits.html" role="menuitem">Benefits – More</a>
                        </li>
                        
                    </ul>
                </li>
            
                <li>
                    
                        
                            <a href="/en/services/health.html" class="item">Health</a>
                        
                    
                    <ul id="health" class="sm list-unstyled" role="menu">
                        
                        <li>
                            
                            <a href="/en/services/health/food-nutrition.html" role="menuitem">Food and nutrition</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/public-health/services/diseases.html" role="menuitem">Diseases and conditions</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/public-health/topics/immunization-vaccines.html" role="menuitem">Vaccines and immunization</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/health/drug-health-products.html" role="menuitem">Drug and health products</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/health/product-safety.html" role="menuitem">Product safety</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/health/health-risks-safety.html" role="menuitem">Health risks and safety</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/health/healthy-living.html" role="menuitem">Healthy living</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/health/aboriginal-health.html" role="menuitem">Indigenous health</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/health/health-system-services.html" role="menuitem">Health system and services</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/health/science-research-data.html" role="menuitem">Science, research and data</a>
                        </li>
                    
                        <li class="slflnk">
                            <a href="/en/services/health.html" role="menuitem">Health – More</a>
                        </li>
                        
                    </ul>
                </li>
            
                <li>
                    
                        
                            <a href="/en/services/taxes.html" class="item">Taxes</a>
                        
                    
                    <ul id="taxes" class="sm list-unstyled" role="menu">
                        
                        <li>
                            
                            <a href="/en/services/taxes/income-tax.html" role="menuitem">Income Tax</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/taxes/gsthst.html" role="menuitem">GST/HST</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/taxes/payroll.html" role="menuitem">Payroll</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/taxes/business-number.html" role="menuitem">Business number</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/taxes/savings-and-pension-plans.html" role="menuitem">Savings and pension plans</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/taxes/child-and-family-benefits.html" role="menuitem">Child and family benefits</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/taxes/excise-taxes-duties-and-levies.html" role="menuitem">Excise taxes, duties, and levies</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/taxes/charities.html" role="menuitem">Charities and giving</a>
                        </li>
                    
                        <li class="slflnk">
                            <a href="/en/services/taxes.html" role="menuitem">Taxes  – More</a>
                        </li>
                        
                    </ul>
                </li>
            
                <li>
                    
                        
                            <a href="/en/services.html" class="item">More services</a>
                        
                    
                    <ul id="moreservices" class="sm list-unstyled" role="menu">
                        
                        <li>
                            
                            <a href="/en/services/environment.html" role="menuitem">Environment and natural resources</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/defence.html" role="menuitem">National security and defence</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/culture.html" role="menuitem">Culture, history and sport</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/policing.html" role="menuitem">Policing, justice and emergencies</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/transport.html" role="menuitem">Transport and infrastructure</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="http://international.gc.ca/world-monde/index.aspx?lang=eng" role="menuitem">Canada and the world</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/finance.html" role="menuitem">Money and finances</a>
                        </li>
                    
                        
                        <li>
                            
                            <a href="/en/services/science.html" role="menuitem">Science and innovation</a>
                        </li>
                    
                        <li class="slflnk">
                            <a href="/en/services.html" role="menuitem">All services</a>
                        </li>
                        
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>


    <nav role="navigation" id="wb-bc" property="breadcrumb"><h2 class="wb-inv">You are here:</h2><div class="container"><div class="row"><ol class="breadcrumb">
<li><a href='/en.html'>Home</a></li>
<li><a href='/en/government/about.html'>About Canada.ca</a></li>
<li><a href='/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification.html'>Canada.ca Content and Information Architecture Specification</a></li>
</ol></div></div></nav>


</header>
<div data-ajax-replace="/bin/canada/alert/messages.en.html" class="original"></div>
</div>

    
</div>

    
<!--/* Hide Nav; Hide Right Rail /*-->

    <main role="main" property="mainContentOfPage" class="container">
        

    <h1 property="name" id="wb-cont" dir="ltr">
Common design patterns for Canada.ca</h1>


        <div><div class="mwsgeneric-base-html parbase section">


    <p class="gc-byline"><strong>From <a href="/en/treasury-board-secretariat.html">Treasury Board of Canada Secretariat</a></strong></p>
<nav role="navigation" class="mrgn-bttm-lg">
  <h2 class="wb-inv">Document navigation</h2>
  <ul class="pager">
    <li class="previous"><a href="/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/templates-detailed-specifications/generic-destination-pages.html" rel="prev">Previous<span class="wb-inv">: Generic destination pages for Canada.ca</span></a></li>
    <li class="toc"><a href="/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification.html">Table of contents</a></li>
    <li class="next"><a href="/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/performance-requirements.html" rel="next">Next<span class="wb-inv">: Performance requirements for Canada.ca</span></a></li>
  </ul>
</nav>
<p>This section contains common design patterns to be used across various templates from this Specification.</p>
<p>For navigation patterns at the destination level of the site, see the <a href="/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/headers-footers-navigation.html#inpage">In-page navigation</a> section.</p>

<table class="wb-tables table table-striped table-hover small" data-wb-tables="{ &quot;ordering&quot; : false , &quot;paging&quot; : false }">
  <thead>
  <tr class="active">
    <th scope="col">Common pattern name</th>
    <th scope="col">When to use this pattern</th>
    <th scope="col">Type of pattern</th>
    <th scope="col">Working example – In a Canada.ca page</th>
    <th scope="col">Web Experience Toolkit </th>
  </tr>
  </thead>
  
  <tbody>
  <tr>
    <td><a href="#buttons">Buttons</a></td>
    <td>Use to encourage a person to take action</td>
    <td>Interaction </td>
    <td>&nbsp;</td>
    <td><a href="http://wet-boew.github.io/wet-boew-styleguide/v4/design/buttons-en.html">WET: Buttons</a></td>
  </tr>
  <tr>
    <td><a href="#carousels">Carousels</a></td>
    <td>Use to promote multiple different    activities, initiatives, programs, and services</td>
    <td>Page element; Multimedia</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/theme-en.html">Theme page template</a></td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/demos/tabs/tabs-carousel-en.html">WET carousels</a> – use style 2</td>
  </tr>
  <tr>
    <td>
      <a href="#charts-graphs">Charts and    graphs</a></td>
    <td>Use as visualization techniques for    communicating data or statistics</td>
    <td>Multimedia</td>
    <td>&nbsp;</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/docs/ref/charts/charts-en.html">WET: Charts and graphs</a></td>
  </tr>
  <tr>
    <td><a href="#collapsible-content">Collapsible    content</a></td>
    <td>Use to hide secondary content until    requested</td>
    <td>Interaction </td>
    <td>&nbsp;</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/demos/details/details-en.html">Details/summary polyfill (expandable/collapsible content)</a></td>
  </tr>
  <tr>
    <td><a href="#contact-information">Contact    information</a></td>
    <td>Use to present contact information    on Canada.ca page</td>
    <td>Page element</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/institution-contact-en.html">Institutional contact template</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#feature-tiles">Context-specific features</a>
      </td>
    <td>Use to promote activities,    initiatives, programs, and services</td>
    <td>Page element; Multimedia</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/theme-en.html">Theme template</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#contextual-alerts">Contextual    alerts</a></td>
    <td>Use to present important new    information that needs to appear in a pre-existing context</td>
    <td>Multimedia</td>
    <td>&nbsp;</td>
    <td><a href="http://wet-boew.github.io/wet-boew-styleguide/v4/design/alerts-en.html">Alerts</a></td>
  </tr>
  <tr>
    <td><a href="#contributors">Contributors</a></td>
    <td>Use to link to institutions or    organizations that support the content on the page</td>
    <td>Page element</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/topic-en.html">Topic template</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#tables">Data tables</a></td>
    <td>Use to communicate data</td>
    <td>Multimedia</td>
    <td>&nbsp;</td>
    <td>
      <a href="http://wet-boew.github.io/themes-dist/GCWeb/docs/ref/tables/tables-en.html">WET: Tables</a></td>
  </tr>
  <tr>
    <td><a href="#disclaimer-overlay">Disclaimer    overlay</a></td>
    <td>Use to display privacy statements    and similar forms of disclaimer</td>
    <td>Interaction</td>
    <td>&nbsp;</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/demos/lightbox/lightbox-en.html">WET: Lightbox</a></td>
  </tr>
  <tr>
    <td><a href="#download-links">Download    links</a></td>
    <td>Use to reference and link to    non-HTML files</td>
    <td>Multimedia</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/components-en.html">Components examples</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#icons">Icons</a></td>
    <td>Use as symbols to communicate    actions or states</td>
    <td>Multimedia</td>
    <td>&nbsp;</td>
    <td><a href="http://wet-boew.github.io/wet-boew-styleguide/v4/design/icons-en.html">WET: Icons</a></td>
  </tr>
  <tr>
    <td><a href="#images">Images</a></td>
    <td>Use to complement or enhance text</td>
    <td>Multimedia</td>
    <td>&nbsp;</td>
    <td><a href="http://wet-boew.github.io/wet-boew-styleguide/v4/design/images-en.html">WET: images</a></td>
  </tr>
  <tr>
    <td><a href="#institutional-byline">Institutional    byline</a></td>
    <td>Use to link to the institution    responsible for the content </td>
    <td>Page element</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/content-en.html">Content page</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#interactive-questions">Interactive    questions</a></td>
    <td>Use to present a sequence of simple    questions that leads to answer needed to continue or complete task</td>
    <td>Interaction</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#latest-news">Latest    news</a></td>
    <td>Use to feature the most recent news    items</td>
    <td>Page element</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/institution-en.html">Institutional profile template</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#more-information">More    information for</a></td>
    <td>Use to connect to a related    government-wide audience</td>
    <td>Page element</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/topic-en.html">Topic template</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#most-requested">Most    requested</a></td>
    <td>Use to feature top tasks related to    the page it is on</td>
    <td>Page element</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/topic-en.html">Topic template</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#multimedia">Multimedia (video and audio)</a></td>
    <td>Use to complement or enhance text</td>
    <td>Multimedia</td>
    <td>&nbsp;</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/docs/ref/multimedia/multimedia-en.html">WET: Multimedia Player</a></td>
  </tr>
  <tr>
    <td><a href="#feature-banner">Promotional    feature banner</a></td>
    <td>Use to promote government-wide and    institution-specific activities, initiatives, programs, and services.</td>
    <td>Multimedia</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#related-links">Related links</a></td>
    <td>Use to list links to content    related to the page</td>
    <td>Page element</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#services-information">Services    and information</a></td>
    <td>Use to present sets of links with    accompanying descriptions</td>
    <td>Page element</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/topic-en.html">Topic template</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#social-media-channels">Social media channels block (follow box)</a></td>
    <td>Use to allow people to follow    official Government of Canada social media accounts from various social media    platforms</td>
    <td>Page element</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/topic-en.html">Topic template</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#social-media-feeds">Social    media feeds widget</a></td>
    <td>Use to embed the latest posts from    official Government of Canada social media accounts</td>
    <td>Page element; Multimedia</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/widgets-en.html">Stay connected</a>  </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#what-we-are-doing">What we    are doing</a></td>
    <td>Use to link to content that    provides background or explanations of GC activities in support of creating    or improving public policy</td>
    <td>Page element</td>
    <td><a href="http://wet-boew.github.io/themes-dist/GCWeb/topic-en.html">Topic template</a></td>
    <td>&nbsp;</td>
  </tr>
  </tbody>
</table>


<section>
  <h2 id="buttons">Buttons</h2>
  <p>Buttons are clickable objects intended to encourage a person to take action.</p>
  <section>
    <h3>When to use this pattern</h3>
    <p>Use the button pattern to execute actions or commands that will change the system state at the front or back end, for example “Add comment,” “Submit,” “Send.”</p>
    <p>Use buttons when:</p>
    <ul>
      <li>helping a person into or       through a transaction such as “Feedback”</li>
         <li>invoking functionality, for       example “Share this page”</li>
         <li>providing a persistent set       of UI controls across a series of pages, for example “previous”, “next”,       or “back to table of contents”</li>
    </ul>
 
    <p>Do not use buttons when:</p>
    <ul>
      <li>an ordinary text link will       do the job just as well, like when providing a single, simple link to       another page</li>
    </ul>
 
    <p>Buttons are used to activate system controls, or to draw attention to prominent actions on the page. Limit their use accordingly, to prevent their visual impact from being worn by overuse.</p>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>Use a high-contrast button       colour for primary actions, and aim to have only one primary action per       page</li>
      <li>Only use primary action       buttons when they truly represent the primary action on the page</li>
      <ul type="circle">
        <li>for example, never use it        for “more information” or “see our FAQs”</li>
      </ul>
      <li>When possible, avoid using a       secondary action</li>
      <ul type="circle">
        <li>if a secondary action is        required, use background colour that provides lower contrast than the        primary action</li>
      </ul>
      <li>On forms, avoid including       unrelated buttons at the bottom of the page such as “Share this page”</li>
      <li>Retain adequate space around       buttons. Do not place them in line with text</li>
      <li>The default alignment is       flush left</li>
      <li>Use       only&nbsp;WET&nbsp;button styles</li>
    </ul>
 
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 1. Buttons pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/buttons-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the button pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="carousels">Carousels</h2>
  <p>Responsive carousels are in-page components used to promote multiple different activities, initiatives, programs, and services within the same content space.</p>
  <section>
    <h3>When to use this pattern </h3>
    <ul>
      <li>Use this component to promote timely, current activities and initiatives</li>
      <li>Do not use this component when a person’s flow must not be interrupted, as in a transactional process</li>
      <li>Do not duplicate content from other promotional components on the page</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>Responsive carousels are a set of 2 to 4 rotating slides that refresh on page load, with user-controls to rotate through the slides and to toggle to auto-rotation</li>
      <li>The default controls for stepping through the slides are thumbnails for large screens and forward/back buttons, including an “Item X of X” message for small screens</li>
      <li>When auto-play is activated, the default slide for the start of auto-rotation is slide one</li>
      <li>The default timing for auto-rotation is 9 seconds per slide</li>
      <li>The default style for transitioning between slides is horizontal sliding transition, starting from the right edge</li>
      <li>Carousels may be implemented at various sizes, ranging from a single column to the full width of the screen</li>
      <li>Each slide is made up of a combination of text and imagery, with the option to add a button link</li>
      <li>Both text and imagery must be linked, but all links in the carousel slide must point to the same destination</li>
      <li>Any call to action must be described in the hyperlink text or button link</li>
      <li>A maximum of 65 characters is allowed for all of the text on a carousel slide (including link label)</li>
      <li>Textual elements must be coded as HTML text—do not embed text into imagery</li>
      <li>Use the defined presentation classes included in the Canada.ca <abbr title="Web Experience Toolkit">WET</abbr> theme</li>
      <li>For image sizing details, consult the <a href="http://wet-boew.github.io/themes-dist/GCWeb/index-en.html">Canada.ca GitHub page</a></li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 2. Carousels pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/carousels-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the full-width carousel pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="charts-graphs">Charts and graphs</h2>
  <p>Charts and graphs are visualization techniques for communicating data or statistics.</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Use charts and graphs to communicate data more efficiently than in text or tables, when there are multiple data points to be presented</li>
      <li>Do not use charts and graphs when the data set is simple enough to be presented as a table, such as when there are few data points</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>Where possible, use <abbr title="Web Experience Toolkit">WET</abbr> 4 charts and graphs, rather than flat images</li>
      <li>Always include data points as tabular data accompanying charts or graphs
        <ul>
          <li>it is recommended to provide an expandable table with tabular data immediately underneath the figure</li>
        </ul>
      </li>
      <li>Size and place charts and graphs appropriately for the context they are in 
        <ul>
          <li>they must appear connected to the related content</li>
        </ul>
      </li>
      <li>Do not place charts and graphs in line with text blocks such as in a paragraph; rather, place them in between text blocks</li>
      <li>Maximize available space to enhance readability</li>
      <li>Keep charts and graphs as simple as possible</li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 3. Charts and graphs pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/charts-and-graphs-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the charts and graphs pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="collapsible-content">Collapsible content</h2>
  <p>The collapsible content pattern allows secondary content to be hidden until requested. The pattern consists of a trigger link that shows or hides the collapsible content.</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Use to prevent secondary content (that must still appear on the page) from getting in the way of the primary task</li>
      <li>Use only for content that is clearly of a secondary nature (for example, when only applicable to a small minority of your audience, or additional details that are beyond the core purpose of the page)</li>
      <li>Never use for content that is essential to the primary task of the page</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>The collapsed content is revealed (expanded) or hidden (collapsed) by following a trigger link</li>
      <li>Label the trigger link as a call to action that sets clear expectations for what people will find when the content is expanded (for example, “View background documentation”)</li>
      <li>Do not use a heading (H3, H4, etc.) as the trigger link, as some assistive technology will not recognize headings when used as trigger links</li>
      <li>On initial view of the page, content must be collapsed by default</li>
      <li>Limit application of this pattern on individual pages to avoid making layouts unnecessarily complex</li>
      <li>Use only the <a href="http://wet-boew.github.io/wet-boew/demos/details/details-en.html"><abbr title="Web Experience Toolkit">WET</abbr> Details/Summary component</a> for this pattern</li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Examples</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 4. Collapsible content pattern (closed state)</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/collapsible-content-pattern-closed-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the Web Experience Toolkit (WET) details/summary widget on a page on Canada.ca. The details/summary widget is shown in its default closed state. Details on this graphic can be found in the surrounding text."></figure>
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 5. Collapsible content pattern (open state)</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/collapsible-content-pattern-open-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the WET details/summary widget on a page on Canada.ca. The details/summary widget is shown in its open state. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="contact-information">Contact information</h2>
  <p>There  are 2 patterns for presenting contact information on Canada.ca pages. The contact information pattern is a standardized block that presents the street or mailing address, email address and telephone numbers, while the contact links pattern presents links to contact pages.</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Present contact information consistently in a variety of contexts</li>
      <li>Provide access to multiple contact options.</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>The heading is “Contact us”</li>
      <li>Do not add borders to this block 
        <ul>
          <li>the aim is to reduce visual noise and avoid “banner blindness” (where people automatically interpret content in boxes as ads)</li>
        </ul>
      </li>
      <li>For the contact address pattern:
        <ul>
          <li>when street or mailing address information is available, place it first, followed by other contact channels</li>
          <li>follow the <a href="/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html">Canada.ca Content Style Guide</a> when writing text for this block</li>
          <li>label telephone, email, TTY, etc., numbers appropriately, for example “Telephone:” for a telephone number</li>
          <li>where possible, the email link must point to a web form rather than presenting a mailto link</li>
        </ul>
      </li>
      <li>For the contact links pattern:
        <ul>
          <li>use standard link styles</li>
          <li>use bullets, not numbered lists</li>
          <li>links point to contact pages (see the <a href="/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/templates-detailed-specifications/contact-us-pages.html">Contact us templates</a> section)</li>
        </ul>
      </li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Examples</h3>
    </header>
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-6">
          <figure class="mrgn-bttm-sm">
            <figcaption class="text-center"><b>Figure 6. Contact address pattern</b></figcaption>
            <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/contact-address-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the contact address pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
        </div>
        <div class="col-sm-6">
          <figure class="mrgn-bttm-sm">
            <figcaption class="text-center"><b>Figure 7. Contact links pattern</b></figcaption>
            <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/contact-links-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the contact links pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
        </div>
      </div>
    </div>
  </section>
</section>


<section>
  <h2 id="feature-tiles">Context-specific features</h2>

  <p>Context-specific features  are in-page components used to promote government activities, initiatives,  programs and services.</p>
<section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Use this component to promote government activities, initiatives, programs and services that       are relevant to the page on which they appear</li>
         <li>Do not use this component to promote activities and       initiatives that are not relevant to their context</li>
         <li>Do not use this component when a person's flow must not be       interrupted, as in a transactional process</li>
         <li>Do not duplicate content or links from other components on       the page</li>
    </ul>
  </section>
  <section>

    <h3>How to use this pattern</h3>
    <ul>
      <li>Context-specific features always comprise a link and an       image, with optional header and description text</li>
  
      <li>On navigation templates (such as theme or topic pages), use 2 or 3 features side-by-side, with each link placed above the image and the description placed underneath the image</li>
      <li>On destination templates (such as generic pages), limit use       to a single feature with the image placed to the left of the link and       description</li>
      <li>On navigation  pages, always use a header. The default wording for this block is “Features.”  Use more specific headings where possible to provide stronger context for a person</li>
      <li>On destination pages, use of a header is optional. When using       a header, always use a specific wording to provide context </li>

      <li>Position context-specific features   after the main content of the page, but before the footer section</li>
      <li>Use a maximum of 40 characters for the hyperlink text</li>
      <li>If the image is linked,&nbsp;it must point to the same destination as the text  link</li>
      <li>Do not use the images to display text 
        <ul>
          <li>text on feature images may be difficult to read on a small screen </li>
          <li>images may instead focus on photography and illustration </li>
          <li>incidental snippets of text, such as text appearing on photographed objects, wordmarks in logos, #hashtags, etc., are acceptable</li>
        </ul>
      </li>
      <li>Keep the description text short and concise 
        <ul>
          <li>1 or 2 lines is ideal </li>
          <li>do not exceed 3 lines of text (which works out to approximately 145 characters with spaces)</li>
        </ul>
      </li>
      <li>The description link text and  header must be different 
        <ul>
          <li>do not repeat multi-word phrases in any of the header,        link or description text</li>
        </ul>
      </li>
      <li>Use the defined presentation classes included in the Canada.ca <abbr title="Web Experience Toolkit">WET</abbr> theme</li>
      <li>For image sizing details, consult the <a href="http://wet-boew.github.io/themes-dist/GCWeb/index-en.html">Canada.ca GitHub page</a></li>
    </ul>
  </section>
  
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Destination page example with a single feature</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 8. Promotional feature tiles pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/promotional-feature-tiles-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating a the context-specific feature pattern with  a single heading, image, link and description on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
  
    <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Navigation page example with three features</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 9. Promotional feature tiles pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/promotional-feature-tiles1-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the context-specific features pattern with a group of 3 sets of links, images and descriptions placed under a single heading on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
   
   
</section>


<section>
  <h2 id="contextual-alerts">Contextual alerts</h2>
  <p>Alerts are notice boxes for important new information that needs to appear in a pre-existing context.</p>
  <section>
    <h3>When to use this pattern</h3>
    <p>Use contextual alerts to:</p>
    <ul>
      <li>bring a person’s attention to an important change at the page or subsection level like service or site outage, recent changes to a process or service</li>
      <li>provide feedback in response to a user-action, for example confirm success, notify a person of errors</li>
    </ul>
    <p>Do not use contextual alerts:</p>
    <ul>
      <li>to provide information about a normal step in a process or task; or</li>
      <li>to simply add emphasis to content</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>Place the alert in the appropriate context, according to the following specifications: 
        <ul>
          <li>if the alert applies to the entire site, place it at the top of the page above the main heading</li>
          <li>for an alert that applies strictly to the page, place it underneath the page heading</li>
          <li>when the alert applies to only a subsection of the page, place it at the most appropriate place within that subsection like underneath the subsection heading, or between 2 paragraphs</li>
        </ul>
      </li>
      <li>Style the alert based on the significance of the content of the alert, using the following scheme:
        <ul>
          <li>blue—for informational content, such as relevant information or helpful tips</li>
          <li>green—to convey success, such as to confirm a submission or the completion of a task</li>
          <li>yellow—for warnings, such as system outages or problems</li>
          <li>red—to notify a person of errors, such as an invalid submission of data in a form</li>
        </ul>
      </li>
      <li>Use only <abbr title="Web Experience Toolkit">WET</abbr> alert styles</li>
      <li>written for a grade 6-8 reading level</li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 10. Contextual alerts pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/contextual-alerts-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the contextual alert pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="contributors">Contributors</h2>
  <section>
    <h3>When to use this pattern</h3>
    <p>Links to institutions or organizations that support the content on the page.</p>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>Lists supporting institutions and provides links to their respective institutional profiles (or organization profiles or Partnering and collaborative arrangement profiles, as applicable)</li>
      <li>Link text is the institutions’ applied title</li>
      <li>Label the heading “Contributors”</li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 11. Contributors pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/contributors-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the contributors pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="tables">Data tables</h2>
  <p>Data tables are a means for efficiently communicating data in rows and columns.</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Use data tables to present data</li>
      <li>Do not use data tables to force layout for text</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>Use defined presentation classes for tables included in <abbr title="Web Experience Toolkit">WET</abbr></li>
      <li>Ensure each column treats only one data facet</li>
      <li>Where possible, use <abbr title="Web Experience Toolkit">WET</abbr> 4 tables to enable sorting and filtering controls 
        <ul>
          <li>this is recommended when there are more than 12 rows</li>
        </ul>
      </li>
      <li>Add optional pagination controls for any table with more than 12 rows</li>
      <li>Never include tabular data as an image</li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 12. Data tables pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/data-tables-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the data table pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="disclaimer-overlay">Disclaimer overlay</h2>
  <p>The disclaimer overlay pattern ensures that terms of use, privacy statements and similar forms of disclaimer are available where required, but do not obstruct access to the main content of the page. It consists of a trigger link that activates a dismissible overlay where the disclaimer text appears.</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Use where disclaimers (privacy statements, terms of use, etc.) are required, to avoid linking away from the current page</li>
      <li>Never use for content that is essential to completing the primary task of the page</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>Label the trigger link with “Terms and conditions,” “Privacy statement,” or similar</li>
      <li>When triggered, the overlay displays the disclaimer content in a secondary window (modal dialogue)</li>
      <li>Disclaimer overlays must only include one action, which is to close them – this action is enabled by a clickable “X” in the upper right corner and a button labeled “Close” at the bottom of the overlay </li>
      <li>Closing the overlay returns a person to the page containing the link that was used to activate it</li>
      <li>Until the overlay is dismissed, the window under the disclaimer overlay is inert; people cannot interact with content outside of the overlay window (to avoid issues with assistive technology interpreting what is displayed)</li>
      <li>Use only <a href="http://wet-boew.github.io/wet-boew/demos/overlay/overlay-en.html"><abbr title="Web Experience Toolkit">WET</abbr> Centred popup (Lightbox)</a> for this pattern</li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 13. Disclaimer overlay pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/disclaimer-overlay-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the Web Experience Toolkit (WET) centered overlay pop-up, being used to display disclaimers and legal information on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="download-links">Download links</h2>
  <p>Download links are used for referencing and linking to non-HTML files on Canada.ca web pages.</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Only use this pattern for non-HTML files like <abbr title="Portable Document Format">PDF</abbr>s and Excel documents that  already have an HTML equivalent</li>
      <li>Do not use this pattern when linking to HTML pages</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>Include a thumbnail or generic image indicating that this link is to a non-HTML resource</li>
      <li>Include the name of the non-HTML file as a text link</li>
      <li>Include file type and file size information in parentheses</li>
      <li>Do not place the download links block in line with text blocks, for example within a paragraph; instead, place it in between text blocks</li>
      <li>The default alignment is flush left</li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 14. Download links pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/download-links-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the download link pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="icons">Icons</h2>
  <p>Icons are symbols for communicating actions or states on Canada.ca.</p>
  <section>
    <h3>When to use this pattern</h3>
    <p>Use the following icons when assisting people with site functionality:</p>
    <ul>
      <li>buttons</li>
      <li>alerts</li>
      <li>form fields</li>
      <li>external or email links</li>
      <li>links to non-HTML files like a <abbr title="Portable Document Format">PDF</abbr> or Excel files</li>
    </ul>
    <p>Do not use icons:</p>
    <ul>
      <li>to add decoration to navigation labels or headings</li>
      <li>to style links internal to Canada.ca</li>
      <li>to add emphasis to text</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>Do not use 2 icons in the same context</li>
      <li>Ensure icons are always accompanied by a text label</li>
      <li>Place an icon in line with its associated text label</li>
      <li>Only use the defined icon sets included with <abbr title="Web Experience Toolkit">WET</abbr></li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 15. Icons pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/icons-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the icon pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="images">Images</h2>
  <p>Images are visual content that complements or enhances text, including photographs, graphics, drawings, or diagrams.</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Avoid unnecessary decoration on Canada.ca – only use imagery when it provides more information than can be provided through text alone </li>
      <li>Refer to the <a href="/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html#toc9">Canada.ca Content Style Guide for details on when to use images</a></li>
      <li>Do not use images as stand-alone clickable elements providing navigation or functionality </li>
      <li>Images must be clickable when accompanied by text links, but are secondary to the links</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>Size and place images appropriately for the context they are in
        <ul>
          <li>images must appear connected to the content, and complement it</li>
        </ul>
      </li>
      <li>Do not place images in line with text blocks, for example within a paragraph; instead, place them in between text blocks</li>
      <li>Where images include people, they should reflect Canada’s diverse population</li>
      <li>Images must appear square or rectangular;  round or oval images may not be used</li>
      <li>Where captions and attributions are required, place them immediately under the image they refer to</li>
      <li>Images must only be clickable when accompanied by a text link to the same destination. 
        <ul>
          <li>in such cases, the default position for text links is immediately above the image</li>
        </ul>
      </li>
      <li>Align links, captions or attributions with the left edge of the image they refer to</li>
      <li>Do not use images or videos copied from other websites</li>
    </ul>
  </section>
  <section>
    <h3>Licensing</h3>
    <ul>
      <li>Institutions are responsible for the proper use of images purchased through a licensing agreement
        <ul>
          <li>if the image is licensed only to one institution, it can only be used by that institution on Canada.ca </li>
          <li>read the licensing agreement carefully for any other restrictions on the use of purchased images</li>
        </ul>
      </li>
      <li>Verify that you have the appropriate rights to publish images on Canada.ca. Specifically:
        <ul>
          <li>get a signed release from a person (or legal guardian) before you publish any image of him or her</li>
          <li>have documentation showing you have the appropriate rights to publish licensed (or rights-managed) images</li>
        </ul>
      </li>
      <li>Images that are no longer licensed for use by an institution must be removed from Canada.ca</li>
      <li>Purchase the highest-resolution available for an image,  to be able to use the image in any size </li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 16. Images pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/images-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the image pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="institutional-byline">Institutional byline</h2>
  <p>The institutional byline provides people with a link to the institution or institutions responsible for the content.</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Use only on destination pages such as service initiation or generic pages; do not use on navigation pages like themes, topic pages, institutional/organizational profiles</li>
      <li>Use only once on the page to provide a link to the institution, organization or similar entity responsible for the content</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>The link to the institution or organization is introduced by the word “From:”</li>
      <li>Only links pointing to institutional profile pages, organizational profile pages, or partnering/collaborative arrangement profile pages are permitted</li>
      <li>The link label must be the same as the name that appears on the institutional or organizational profile page being linked to</li>
      <li>Where more than one institution is responsible for the page on which the byline appears, use commas to separate the links</li>
      <li>Position the institutional byline directly underneath the page title, aligned to the left</li>
      <li>Use standard paragraph and link styles</li>
      <li>Do not place this block in line with other text blocks or layout elements; it stands alone</li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 17. Institutional byline pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/institutional-byline-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the institutional byline pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="interactive-questions">Interactive questions</h2>
  <p>The interactive questions pattern is used to present people with a sequence of simple questions that leads to the specific answer they need to continue with or complete their task. The interactive questions pattern can be used to help people understand eligibility criteria, applicability of rules, or compliance requirements that depend on specific situations or conditions.</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Use to guide people to an appropriate answer by asking them a series of questions</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>Use defined presentation classes for the field flow interface included in <abbr title="Web Experience Toolkit">WET</abbr></li>
    </ul>
    <section>
      <h4>Introducing interactive questions</h4>
      <ul>
        <li>The heading for this pattern must express the goal of the set of interactive questions
          <ul>
            <li>for example, “Find out if you can renew your passport online”</li>
          </ul>
        </li>
        <li>Optionally provide an overview of the results people can expect from completing the interactive questionnaire</li>
        <li>Optionally provide brief instructions above the questions</li>
      </ul>
    </section>
    <section>
      <h4>Presenting questions</h4>
      <ul>
        <li>Keep the number of questions to a minimum (no more than 7 per sequence)</li>
        <li>Each question must be written to a person reading it (use “you” and “your”)</li>
        <li>Present choices or options immediately after each question, ensuring they are written as possible answers to the question above</li>
        <li>When presenting choices, use standard form controls like radio buttons, checkboxes, and drop-down menus; ensure you cover off all possible choices</li>
        <li>Where possible, pre-select the most common or optimal choice</li>
      </ul>
    </section>
    <section>
      <h4>Grouping questions</h4>
      <ul>
        <li>Present questions one at a time to keep focus on the current question; keep each subsequent question on the same page in the same place as the previous question</li>
        <li>Always place questions in context (for example, on the eligibility page within the <a href="/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/templates-detailed-specifications/service-initiation-pages.html">Service Initiation template</a>)</li>
      </ul>
    </section>
    <section>
      <h4>Moving through the sequence of questions</h4>
      <ul>
        <li>Always use buttons for navigating though the sequence of questions  (buttons labeled “continue” or “next” to trigger the next question or the answer)</li>
        <li>Ensure people are able to go back to undo or change an earlier selection, via buttons or links (such as a link labeled “change your selection”)</li>
        <li>Any buttons used for navigating through the questions must be labeled appropriately for the context (for example, “Continue” might make sense in one situation, but a clearer choice in another might be, “Find out if you’re eligible”)</li>
        <li>When interactive questions are combined with the <a href="/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/headers-footers-navigation.html#ordered-multi-page-navigation">multi-page navigation pattern</a> (such as in a service initiation template), avoid using “next” to avoid confusion between the 2 types of buttons </li>
      </ul>
    </section>
    <section>
      <h4>Presenting answers</h4>
      <ul>
        <li>Always summarize the choices people have made and ensure they can go back to undo or change an earlier selection</li>
        <li>Explain the answer clearly and simply</li>
        <li>Provide links to the next action that people should take based on the answer they are given</li>
      </ul>
    </section>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 18. Interactive questions pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/interactive-questions-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating a demonstration of the interactive questions pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="latest-news">Latest news</h2>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Features the most recent news items posted by the institution, organization or entity</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>It features the most recent news items posted by the entity</li>
      <li>The heading is labelled “Latest”</li>
      <li>2 of the featured news items must include an image, a headline hyperlink, additional information and a description text:
        <ul>
          <li>can include promotional content, and be prioritized at the institution’s discretion</li>
          <li>keep description text short and concise</li>
          <li>if more than 2 images are required, images may be displayed in carousel format</li>
          <li>if using the carousel format refer to <a href="#carousels">Carousels</a> in Common design patterns</li>
        </ul>
      </li>
      <li>The types of news products that must be listed as text-only are limited to only those available through news.gc.ca:
        <ul>
          <li>media advisories</li>
          <li>backgrounders</li>
          <li>news releases</li>
          <li>speeches</li>
          <li>statements</li>
        </ul>
      </li>
      <li>Consult the <a href="http://wet-boew.github.io/themes-dist/GCWeb/index-en.html">Canada.ca GitHub page</a> for details on image sizing</li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Examples</h3>
    </header>
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-6">
          <figure class="mrgn-bttm-sm">
            <figcaption class="text-center"><b>Figure 19. Latest news pattern: 2 images</b></figcaption>
            <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/latest-news-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the latest news pattern with 2 images on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
        </div>
        <div class="col-sm-6">
          <figure class="mrgn-bttm-sm">
            <figcaption class="text-center"><b>Figure 20. Latest news pattern: carousel</b></figcaption>
            <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/latest-news-pattern-carousel-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the latest news pattern with carousel on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
        </div>
      </div>
    </div>
  </section>
</section>
<section>
  <h2 id="more-information">More information for</h2>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>It is used to connect to a related government-wide audience page or to an audience topic page</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>It is used to connect the topic page to a related government-wide audience page or to an audience topic page. Government-wide audiences are:
      <ul>
           <li>Indigenous peoples</li>
           <li>youth</li>
           <li>veterans </li>
      </ul></li>
      <li>For more details on Government of Canada audiences go to <a href="/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/templates-detailed-specifications/audience-pages.html">Audience pages</a></li>
      <li>Label the heading “More information for”</li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 21. More information for pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/more-information-for-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the more information for pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="most-requested">Most requested</h2>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Features top tasks related to the page it is on </li>
      <li>For example, on a topic page or organizational profile it will list the top tasks related to that topic or organization, based on metrics and user-research</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>It lists top tasks specific to the page it is on based on page-view metrics and user-research.</li>
      <li>A maximum of 7 links is allowed</li>
      <li>Items can only link to destination content, or related topic links that do not already appear on the page</li>
      <li>Link titles may not consist of program or publication names, unless these are meaningful to their target audience</li>
      <li>Label the heading “Most requested”</li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 22. Most requested for pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/most-requested-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the most requested pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="multimedia">Multimedia (video and audio)</h2>
  <p>Multimedia is time-based media of a visual or auditory nature that complements or enhances text, including video clips and audio recordings.</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Avoid unnecessary decoration on Canada.ca – only use multimedia content when it provides more information than can be provided through text alone </li>
      <li>Refer to the <a href="/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html#wp6-4">Canada.ca Content Style Guide for details on when to use video or audio multimedia content</a></li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>Size and place multimedia appropriately for the context it is in. Embedded multimedia must appear connected to the content, and complement it</li>
      <li>Do not place multimedia in line with text blocks, for example within a paragraph; place them in between text blocks instead</li>
      <li>Where multimedia includes people, it should reflect Canada’s diverse population</li>
      <li>Embedded multimedia must appear square or rectangular </li>
      <li>Use only the <abbr title="Web Experience Toolkit">WET</abbr> multimedia player, which provides accessible playback controls</li>
      <li>Always include descriptive transcripts accompanying multimedia content – place the link to the transcript immediately under the multimedia </li>
      <li>The link must point to a separate page for longer transcripts or open a details-summary element for shorter transcripts</li>
      <li>Where additional captions and attributions are required, place them immediately under the link to the transcript for the multimedia that they refer to</li>
      <li>Align links, captions or attributions with the left edge of the embedded multimedia that they refer to</li>
      <li>Avoid using multimedia from sources outside the Government of Canada</li>
    </ul>
  </section>
  <section>
    <h3>Licensing</h3>
    <ul>
      <li>Institutions are responsible for the proper use of multimedia purchased through a licensing agreement </li>
      <li>If the multimedia is licensed only to one institution, it can only be used by that institution on Canada.ca </li>
      <li>Read the licensing agreement carefully for any other restrictions on the use of purchased multimedia</li>
      <li>Verify that you have the appropriate rights to publish multimedia on Canada.ca, specifically:
        <ul>
          <li>get a signed release from a person (or legal guardian) before you publish any representation of him or her</li>
          <li>have documentation showing you have the appropriate rights to publish licensed (or rights-managed) multimedia</li>
        </ul>
      </li>
      <li>Multimedia that is no longer licensed for use by an institution must be removed from Canada.ca</li>
    </ul>
  </section>
  <section>
    <section class="panel panel-primary">
      <header class="panel-heading">
        <h3 class="panel-title">Example</h3>
      </header>
      <div class="panel-body">
        <figure class="mrgn-bttm-sm">
          <figcaption class="text-center"><b>Figure 23. Multimedia player pattern</b></figcaption>
          <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/video-multimedia-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the multimedia player pattern embedded on a generic page on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
      </div>
    </section>
    <section>
      <h4>1: <abbr title="Web Experience Toolkit">WET</abbr> media player</h4>
      <p><span class="label label-danger">Mandatory</span></p>
      <p>The video and audio player components of the Web Experience Toolkit have been developed and tested to meet Canada.ca coding and accessibility standards. No other multimedia players are permitted on Canada.ca.</p>
    </section>
    <section>
      <h4>2: Transcript</h4>
      <p><span class="label label-danger">Mandatory</span></p>
      <p>All video and audio posted to Canada.ca must include a written transcript immediately following the <abbr title="Web Experience Toolkit">WET</abbr> player.</p>
      <p>Shorter transcripts should be placed on the same page following the player, while longer transcripts can be hidden inside a details/summary element or placed on a separate page. When placing the transcript on a separate page, a link must appear in this spot which leads to the page containing the transcript.</p>
    </section>
    <section>
      <h4>3: Captions or descriptions</h4>
      <p><span class="label label-info">Optional</span></p>
      <p>Captions, descriptions or attributions associated with multimedia content must be placed after the link to the transcript, left-aligned to the edge of the <abbr title="Web Experience Toolkit">WET</abbr> player.</p>
    </section>
  </section>
</section>
<section>
  <h2 id="feature-banner">Promotional feature banner</h2>
  <p>Promotional feature banners are in-page components used to promote government-wide and institution-specific activities, initiatives, programs, and services.</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Use this component to promote timely, current activities and initiatives</li>
      <li>Only use this component on navigation or landing pages; do not use with destination content</li>
      <li>Do not use this component when a person’s flow must not be interrupted, as in a transactional process</li>
      <li>Do not duplicate content from other promotional components on the page</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>Promotional feature banners are full-width, narrow-height components that comprise text, imagery, and links</li>
      <li>A maximum of 65 characters is allowed for all text (including link label)</li>
      <li>Both text and imagery must be linked, but all links in the feature banner must point to the same destination; alternatively, the entire container must operate as a single linked area</li>
      <li>Textual elements must be coded as HTML text—do not embed text into imagery</li>
      <li>To ensure responsiveness at varying screen sizes, do not use a single static image for this component</li>
      <li>Use the defined presentation classes included in the Canada.ca <abbr title="Web Experience Toolkit">WET</abbr> theme</li>
      <li>For image sizing details, consult the <a href="http://wet-boew.github.io/themes-dist/GCWeb/index-en.html">Canada.ca GitHub page</a></li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 24. Promotional feature banner pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/promotional-feature-banner-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the promotional feature banner pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>

<section>
  <h2 id="related-links">Related links</h2>
  <p>The related links pattern is a list of links to content that is related to the page on which it appears</p>

  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Use this pattern to provide links to content that is directly relevant to the content on the current page</li>
      <li>Do not use the related links pattern when a person’s flow must not be interrupted such as in a transactional process</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>Position the list of links after the main content of the page, but before the footer section 
        <ul>
          <li>a consistent location at the bottom of the content area helps a person recognize the function of this pattern</li>
        </ul>
      </li>
      <li>The default heading is “Related links” 
        <ul>
          <li>use more specific headings where possible to provide stronger context for a person</li>
        </ul>
      </li>
      <li>Do not add borders to this block 
        <ul>
          <li>the aim is to reduce visual noise and avoid “banner blindness” (where people automatically interpret content in boxes as ads)</li>
        </ul>
      </li>
      <li>Use standard link styles</li>
      <li>Use bullets, not numbered lists</li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 25. Related links pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/related-links-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the related links pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="services-information">Services and information</h2>
  <p>Services and information is a pattern for presenting sets of links with accompanying descriptions (also known as doormat). Each link with its description provides an accurate and concise description of what a person will find on the destination page. Together, these sets of links and descriptions provide clear and distinct choices for people trying to complete their task.</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Use this pattern to provide links to topics or destination content related to the page it is on</li>
      <li>Use when the primary purpose of the page is to provide clear choices to navigate to tasks</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <section>
      <h4>Content requirements</h4>
      <ul>
        <li>Content for each link and description pairing is written for a grade 6-8 reading level</li>
        <li>Keep punctuation simple</li>
        <li>Use popular keywords that the target audience will likely know and use; base choices on research and evidence</li>
        <li>Don’t use acronyms or abbreviations unless most people know these better than the long-form equivalent</li>
        <li>See the <a href="/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html">Canada.ca Content Style Guide</a> for more information on how to write content for this pattern</li>
      </ul>
    </section>
    <section>
      <h4>Link requirements</h4>
      <ul>
        <li>Link text must make sense within the context of the page
          <ul>
            <li>It does not need to exactly match the destination page title</li>
            <li>It does not need to be unique across Canada.ca</li>
            <li>It must be descriptive, unique within the page, and clearly distinguishable from the other links on the page</li>
            <li>Don’t end linked text with punctuation (for example, “How do you apply for funding?”)</li>
            <li>The linked text must speak to a person (for example, “Apply for funding”)</li>
          </ul>
        </li>
        <li>The optimal character limit for links is 45 characters (with spaces) for both official languages, but can extend to 75 characters (with spaces)</li>
        <li>Use only standard link styles as defined in the Web Experience Toolkit (WET)</li>
      </ul>
    </section>
    <section>
      <h4>Link descriptions</h4>
      <ul>
        <li>The link description complements the link it accompanies to provide greater detail and clarity about the scope of the link itself
          <ul>
            <li>Recommended style is to list keywords or keyword phrases separated by commas; full sentences are not required</li>
            <li>Don’t use introductory phrases such as “Includes…”, “Information on…” or “Learn more about…”</li>
            <li>Don’t include links</li>
            <li>Don’t include promotional messaging</li>
          </ul>
        </li>
        <li>The character limit for link descriptions is 120 characters (with spaces) in both official languages</li>
        <li>Drop-down menus are permitted in place of a link description in specific circumstances:
          <ul>
            <li>When used to provide access to a large number of items at the same level (for example, lists of countries or species)</li>
            <li>When the destination page consists primarily of a list of links, and so can be completely replaced by the drop-down menu</li>
          </ul>
        </li>
        <li>Use only standard presentation styles as defined in <abbr title="Web Experience Toolkit">WET</abbr></li>
      </ul>
    </section>
    <section>
      <h4>Grouping sets of links with accompanying descriptions</h4>
      <p>The following styles may be used:</p>
      <ul>
        <li>Demand-based
          <ul>
            <li>Prioritization is based on demand (for example, based on web metrics), with higher demand links appearing ahead of lower demand ones</li>
          </ul>
        </li>
        <li>Sequential
          <ul>
            <li>Use sequential, numbered doormats when links must be followed in a step-by-step order (for example, confirming eligibility, registering and then charging for GST/HST)</li>
            <li>Use to allow people to skip over optional/non-applicable steps or steps they have previously completed</li>
          </ul>
        </li>
        <li>Subheadings
          <ul>
            <li>Use to group links and descriptions that are very similar, in cases where it wouldn’t make sense to move the group into a sub-topic page</li>
            <li>Use to avoid information overload; ideally no more than 9 links with descriptions per subheading</li>
          </ul>
        </li>
        <li>Combinations of the above, as appropriate; however, limit application to avoid overly complex sets of links and descriptions</li>
      </ul>
      <p>In all cases, priority sequencing is as follows:</p>
      <ul>
        <li>In a single column layout, the priority sequencing is top to bottom</li>
        <li>In using across multiple columns, the priority sequencing is from left to right, then top to bottom</li>
      </ul>
    </section>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Examples</h3>
    </header>
    <div class="panel-body">
      <div class="row">
        <div class="col-sm-6">
          <figure class="mrgn-bttm-sm">
            <figcaption class="text-center"><b>Figure 26. Doormat links in 2 columns pattern</b></figcaption>
            <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/services-and-information-2column-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating a set of doormat links in 2 columns on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
        </div>
        <div class="col-sm-6">
          <figure class="mrgn-bttm-sm">
            <figcaption class="text-center"><b>Figure 27. Doormat links in single column pattern</b></figcaption>
            <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/services-and-information-1column-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating a set of doormat links in a single column on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="row mrgn-tp-sm">
        <div class="col-sm-6">
          <figure class="mrgn-bttm-sm">
            <figcaption class="text-center"><b>Figure 28. Sequential doormat links in single column pattern</b></figcaption>
            <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/services-and-information-sequential-eng.jpg" class="img-responsive center-block" alt="Screenshot showing a set of sequential doormat links in a single column. Details on this graphic can be found in the surrounding text."></figure>
        </div>
        <div class="col-sm-6">
          <figure class="mrgn-bttm-sm">
            <figcaption class="text-center"><b>Figure 29. Doormat links in 2 columns grouped with headings pattern</b></figcaption>
            <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/services-and-information-headings-eng.jpg" class="img-responsive center-block" alt="Screenshot showing a set of doormat links in 2 columns, grouped with headings on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
        </div>
      </div>
    </div>
  </section>
</section>
<section>
  <h2 id="social-media-channels">Social media channels block (follow box)</h2>
  <p>The social media channels block (“follow box”) is an in-page component that allows people to follow official Government of Canada social media accounts from various social media platforms.</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Use the follow box on pages where official <abbr title="Government of Canada">GC</abbr> social media accounts are relevant to the current context</li>
      <li>Do not use this component when a person’s flow must not be interrupted, as in a transactional process</li>
      <li>Do not duplicate content from other promotional components on the page</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>The social media channels follow box is made up of the heading “Follow” and icons linking to official <abbr title="Government of Canada">GC</abbr> social media accounts or  RSS feeds that are relevant to the page</li>
      <li>Accounts referred to in the follow box must be fully compliant with the <a href="https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=30682">Directive on the Management of Communications</a></li>
      <li>Display a maximum of 7 icons aligned in a horizontal row, using the standard icon set available in the Canada.ca <abbr title="Web Experience Toolkit">WET</abbr> theme</li>
      <li>Use only one icon per social media platform; if there is more than one account from a single platform
        <ul>
          <li>make them available via a clickable drop-down menu</li>
          <li>populate the drop-down menu with up to 8 text links, using the names of the accounts as labels</li>
          <li>if more than 8 links are required, include a “view all” link as the final item in the list; this link must point to the relevant section of the Canada.ca social media gallery, where all relevant accounts will be listed</li>
        </ul>
      </li>
      <li>Position the follow box so that it does not interfere with the primary content of the page</li>
      <li>Emphasize the box shape of this component by using a background colour that is darker than the surrounding page area’s background colour</li>
      <li>Use the defined presentation classes included in the Canada.ca <abbr title="Web Experience Toolkit">WET</abbr> theme</li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 30. Social media channels block (follow box) pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/social-media-channels-block-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the social media channels block (follow box) pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="social-media-feeds">Social media feeds widget</h2>
  <p>The social media feeds widget is an in-page component that allows the latest posts from official Government of Canada social media accounts to be embedded on Canada.ca pages</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Use the social media feeds widget on pages where official <abbr title="Government of Canada">GC</abbr> social media accounts are relevant to the current context</li>
      <li>Do not use this component when a person’s flow must not be interrupted, as in a transactional process</li>
      <li>Do not duplicate content from other promotional components on the page</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <ul>
      <li>The social media feeds widget consists of a heading with panels for up to 3 social media accounts, each featuring a feed of recent posts</li>
      <li>The default heading for this widget is “Stay connected”</li>
      <li>Each feed panel includes
        <ul>
          <li>a heading that indicates which social media platform the account’s feed is drawn from, for example Facebook or YouTube</li>
          <li>a feed of the recent posts from that account, arranged in reverse chronological order</li>
          <li>the 3 most recent posts as the default setting, with a link to the account from which the feed is drawn to allow people to see more</li>
        </ul>
      </li>
      <li>Use the defined presentation classes included in the Canada.ca <abbr title="Web Experience Toolkit">WET</abbr> theme</li>
    </ul>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 31. Social media feeds widget pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/social-media-feeds-widget-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the social media feeds widget pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<section>
  <h2 id="what-we-are-doing">What we are doing</h2>
  <p>What we are doing is a pattern that presents links to content that provides background or explanations of <abbr title="Government of Canada">GC</abbr> activities in support of creating or improving public policy.</p>
  <section>
    <h3>When to use this pattern</h3>
    <ul>
      <li>Use this pattern to provide relevant links to content that falls within the <a href="/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/conceptual-overview-user-navigation-key-templates.html#institution-categories">program and policy development</a> user-need category</li>
      <li>Use when the primary purpose of the page is to provide navigation choices</li>
    </ul>
  </section>
  <section>
    <h3>How to use this pattern</h3>
    <section>
      <h4>Content requirements</h4>
      <ul>
        <li>Label the heading “What we are doing”</li>
        <li>Organize links by content type; label subheadings only using content type names (see <a href="/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/content-types.html">Content types for Canada.ca</a>)</li>
        <li>Provide links to only the following content types:
          <ul>
            <li>from the Research, statistics and data category:
              <ul>
                <li>assessments</li>
                <li>datasets</li>
                <li>research</li>
                <li>statistics</li>
                <li>surveys</li>
              </ul>
            </li>
            <li>from the Consultations and engagement category:
              <ul>
                <li>consultations</li>
              </ul>
            </li>
            <li>from the News, promotions and public awareness category:
              <ul>
                <li>backgrounders</li>
                <li>news releases</li>
                <li>speeches</li>
                <li>statements</li>
              </ul>
            </li>
            <li>from the Corporate information category:
              <ul>
                <li>program results</li>
              </ul>
            </li>
            <li>from the Government-wide reporting category:
              <ul>
                <li>audits</li>
              </ul>
            </li>
          </ul>
        </li>
        <li>With the permitted types above, only include links to content that provides a view into the work that the government is doing to evaluate, improve or change programs, policies and services; for example, only a news release that announces a new funding program (whereas a news release that announces funding being awarded under and existing program would not be included here)</li>
        <li>Only include links that are relevant to the page on which this pattern appears</li>
        <li>Never provide links to content types that fall under the following content type categories:
          <ul>
            <li>services, like forms or service initiation (instead, place links to this content under services and information or most requested)</li>
            <li>contact us, such as emergency contact or find an office (instead, place links to this content under the appropriate contact page or pattern, or most requested, if a high-demand task)</li>
            <li>policy and guidance (instead, place links to this content under services and information, most requested or corporate information)</li>
            <li>treaties, laws and regulations (instead, place links to this content on the transparency page under corporate information, services and information or most requested, if a high-demand task)</li>
            <li>navigation and administration like navigation pages, website terms and conditions</li>
          </ul>
        </li>
      </ul>
    </section>
    <section>
      <h4>Presentation requirements</h4>
      <ul>
        <li>When there are more than 3 subheadings, continue on a second row</li>
        <li>A minimum of 2 links per subheading is required</li>
        <li>A maximum of 4 links per subheading is allowed</li>
        <li>When the number of links exceeds 4, provide a link to “All related [content type name]”</li>
      </ul>
    </section>
  </section>
  <section class="panel panel-primary">
    <header class="panel-heading">
      <h3 class="panel-title">Example</h3>
    </header>
    <div class="panel-body">
      <figure class="mrgn-bttm-sm">
        <figcaption class="text-center"><b>Figure 32. What we are doing pattern</b></figcaption>
        <img src="/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/what-we-are-doing-pattern-eng.jpg" class="img-responsive center-block" alt="Screenshot illustrating the what we are doing pattern on Canada.ca. Details on this graphic can be found in the surrounding text."></figure>
    </div>
  </section>
</section>
<nav role="navigation" class="mrgn-bttm-lg">
  <h2 class="wb-inv">Document navigation</h2>
  <ul class="pager">
    <li class="previous"><a href="/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/templates-detailed-specifications/generic-destination-pages.html" rel="prev">Previous<span class="wb-inv">: Template: Generic destination pages for Canada.ca</span></a></li>
    <li class="toc"><a href="/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification.html">Table of contents</a></li>
    <li class="next"><a href="/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/performance-requirements.html" rel="next">Next<span class="wb-inv">: Performance requirements for Canada.ca</span></a></li>
  </ul>
</nav>


</div>

</div>
        <div class="row pagedetails">

    <details class="brdr-0 col-sm-6 col-lg-4 mrgn-tp-sm">
        
<summary class="btn btn-default text-center">Report a problem or mistake on this page</summary>
<div class="clearfix"></div>
<div class="well row">
    <div><div class="gc-rprt-prblm">
    <div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl">			
			<form id="gc-rprt-prblm-form" action="/gc/services/generateemail" method="post">
            <input type="hidden" name="pageTitle" value="Common design patterns for Canada.ca">
            <input type="hidden" name="submissionPage" value="/content/canadasite/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/common-design-patterns.html">
            <input type="hidden" name="lang" value="en">
            <input type="hidden" name="pageOwner" value="gc:institutions/treasury-board-secretariat">
            <input id="emailTemplate" name="emailTemplate" type="hidden" value="reportaproblem/rap"> 
            <input name="subject" type="hidden" value="Report a problem or mistake on this page">
            <fieldset>
                <legend><span class="field-name">Please select all that apply:</span></legend>
                 <div class="checkbox">
                    <label for="problem1"><input name="problem1" id="problem1" type="checkbox" value="Yes" data-reveal="#broken" data-gc-analytics-rap="A link, button or video is not working-Un lien, un bouton ou une vidéo ne fonctionne pas">A link, button or video is not working</label>
                    <input name="problem1" type="hidden" value="No">
                </div>
                <div class="checkbox">
                    <label for="problem2"><input name="problem2" id="problem2" type="checkbox" value="Yes" data-reveal="#spelling" data-gc-analytics-rap="It has a spelling mistake-Il y a une erreur d'orthographe ou de grammaire">It has a spelling mistake</label>
                    <input name="problem2" type="hidden" value="No">
                </div>
                <div class="checkbox">
                    <label for="problem3"><input name="problem3" id="problem3" type="checkbox" value="Yes" data-reveal="#wrong" data-gc-analytics-rap="Information is missing-Les renseignements sont incomplets">Information is missing</label>
                    <input name="problem3" type="hidden" value="No">
               </div>
                <div class="checkbox">
                    <label for="problem4"><input name="problem4" id="problem4" type="checkbox" value="Yes" data-reveal="#outdated" data-gc-analytics-rap=" Information is outdated or wrong-L'information n'est plus à jour ou est erronée">Information is outdated or wrong</label>
                    <input name="problem4" type="hidden" value="No">
                </div>
                <div class="checkbox">
                    <label for="problem5"><input name="problem5" id="problem5" type="checkbox" value="Yes" data-reveal="#find" data-gc-analytics-rap=" Login error when trying to access an account (e.g. My Service Canada Account)-Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte (ex. Mon dossier Service Canada)">Login error when trying to access an account (e.g. My Service Canada Account)</label>
                    <input name="problem5" type="hidden" value="No">
                </div>
   					<ul>
					<li class="checkbox">
                        <label for="problem6a"><input name="problem6" id="problem6a" type="checkbox" value="Yes" data-reveal="#find" data-gc-analytics-rap="GC Key access-Accès CléGC">GC Key access</label>
                        <input name="problem6" type="hidden" value="No">
                     </li>
					<li class="checkbox">
                        <label for="problem7"><input name="problem7" id="problem7" type="checkbox" value="Yes" data-reveal="#find" data-gc-analytics-rap="SecureKey Concierge (Banking Credential) access-Accès SecureKey Service de Concierge (justificatifs d'identité bancaires)">SecureKey Concierge (Banking Credential) access </label>
                        <input name="problem7" type="hidden" value="No">
                     </li>
					<li class="checkbox">
                        <label for="problem8"><input name="problem8" id="problem8" type="checkbox" value="Yes" data-reveal="#find" data-gc-analytics-rap="Personal Access Code (PAC) problems or EI Access Code (AC) problems-Problème avec le Code d'accès personnel (CAP) ou avec le Code d'accès (CA) de l'assurance emploi">Personal Access Code (PAC) problems or EI Access Code (AC) problems</label>
                        <input name="problem8" type="hidden" value="No">
                     </li>	
					<li class="checkbox">
                        <label for="problem9"><input name="problem9" id="problem9" type="checkbox" value="Yes" data-reveal="#find" data-gc-analytics-rap="Social Insurance Number (SIN) validation problems-Problème lié à la validation du numéro d'assurance sociale (NAS)">Social Insurance Number (SIN) validation problems</label>
                        <input name="problem9" type="hidden" value="No">
                     </li>								
					<li class="checkbox">
                        <label for="problem10"><input name="problem10" id="problem10" type="checkbox" value="Yes" data-reveal="#find" data-gc-analytics-rap="Other login error not in this list-Autre erreur lors de l'ouverture de session qui ne figure pas sur cette liste">Other login error not in this list</label>
                        <input name="problem10" type="hidden" value="No">
                     </li>		 
                     </ul>
				    <div class="checkbox">
                    <label for="problem11"><input name="problem11" id="problem11" type="checkbox" value="Yes" data-reveal="#find" data-gc-analytics-rap="I can't find what I'm looking for-Je n'arrive pas à trouver ce que je cherche">I can't find what I'm looking for</label>
                    <input name="problem11" type="hidden" value="No">
                </div>
             		<div class="checkbox">
                    <label for="problem12"><input name="problem12" id="problem12" type="checkbox" value="Yes" data-reveal="#find" data-gc-analytics-rap="Other issue not in this list-Autre problème qui ne figure pas sur cette liste">Other issue not in this list</label>
                    <input name="problem12" type="hidden" value="No">
                </div>                 
                   </fieldset>
            <button data-wb5-click="postback@#gc-rprt-prblm-form@" type="submit" class="btn btn-primary wb-toggle" data-toggle='{"stateOff": "hide", "stateOn": "show", "selector": ".gc-rprt-prblm-tggl"}'>Submit</button>

        </form>
    </div>
    <div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide">
        <h3>Thank you for your help!</h3>
<p>You will not receive a reply. For enquiries,&nbsp;<a href="https://www.canada.ca/en/contact/index.html">contact us</a>.</p>

    </div>
</div></div>
</div>

    </details>

        <div class="col-sm-3 mrgn-tp-sm pull-right">
        <div class="wb-share" data-wb-share='{&#34;lnkClass&#34;: &#34;btn btn-default btn-block&#34;}'></div>
    </div>


    <div class="datemod col-xs-12 mrgn-tp-lg">
        <dl id="wb-dtmd">
    <dt>Date modified:</dt>
    <dd><time property="dateModified">2017-10-05</time></dd>
</dl>
    </div>

</div>
    </main>


        <div class="par iparys_inherited">

    
</div>

    
        <div class="par iparys_inherited">

    
        <div class="global-footer">
    <footer role="contentinfo" id="wb-info">
        <nav role="navigation" class="container wb-navcurr">
            <h2 class="wb-inv">About government</h2>
            <ul class="list-unstyled colcount-sm-2 colcount-md-3">
                
                     
                         <li><a href="/en/contact.html">Contact us</a></li>
                     
                
                        <li><a href="/en/government/dept.html">Departments and agencies</a></li>
                    
                
                        <li><a href="/en/government/publicservice.html">Public service and military</a></li>
                    
                
                        <li><a href="/en/news.html">News</a></li>
                    
                
                        <li><a href="/en/government/system/laws.html">Treaties, laws and regulations</a></li>
                    
                
                        <li><a href="/en/transparency/reporting.html">Government-wide reporting</a></li>
                    
                
                        <li><a href="http://pm.gc.ca/eng">Prime Minister</a></li>
                    
                
                        <li><a href="/en/government/system.html">How government works</a></li>
                    
                
                        <li><a href="http://open.canada.ca/en/">Open government</a></li>
                    
                
            </ul>
        </nav>
        <div class="brand">
            <div class="container">
                <div class="row">
                    <nav class="col-md-10 ftr-urlt-lnk">
                        <h2 class="wb-inv">About this site</h2>
                        <ul>
                            
                                
                                    <li><a href="/en/social.html">Social media</a></li>
                                
                            
                                    <li><a href="/en/mobile.html">Mobile applications</a></li>
                                
                            
                                    <li><a href="/en/government/about.html">About Canada.ca</a></li>
                                
                            
                                    <li><a href="/en/transparency/terms.html">Terms and conditions</a></li>
                                
                            
                                    <li><a href="/en/transparency/privacy.html">Privacy</a></li>
                                
                            
                        </ul>
                    </nav>
                    <div class="col-xs-6 visible-sm visible-xs tofpg">
                        <a href="#wb-cont">Top of page <span class="glyphicon glyphicon-chevron-up"></span></a>
                    </div>
                    <div class="col-xs-6 col-md-2 text-right">
                        <object type="image/svg+xml" tabindex="-1" role="img" data="/etc/designs/canada/wet-boew/assets/wmms-blk.svg" aria-label="Symbol of the Government of Canada"></object>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>

    
</div>

    
<script type="text/javascript">_satellite.pageBottom();</script>


<script type="text/javascript" src="/etc/clientlibs/granite/jquery.min.js"></script>
<script type="text/javascript" src="/etc/clientlibs/granite/utils.min.js"></script>
<script type="text/javascript" src="/etc/designs/canada/clientlib-publish.min.js"></script>


<!--[if gte IE 9 | !IE ]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="/etc/designs/canada/wet-boew/js/wet-boew.min.js"></script>
<!--<![endif]-->

<!--[if lt IE 9]>
<script src="/etc/designs/canada/wet-boew/js/ie8-wet-boew2.min.js"></script>
<![endif]-->

<script src="/etc/designs/canada/wet-boew/js/theme.min.js"></script>
</body>
</html>