app/views/layouts/application.html.erb
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login.gov - <%= Rails.application.config.app_name %></title>
<!-- 128x128 -->
<link rel="shortcut icon" type="image/ico" href=<%= asset_path 'favicons/favicon.ico' %>>
<!-- 192x192, as recommended for Android
http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
-->
<link rel="icon" type="image/png" sizes="192x192" href=<%= asset_path 'favicons/favicon-192.png' %>>
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
<link rel="apple-touch-icon-precomposed" href=<%= asset_path 'favicons/favicon-57.png' %>>
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href=<%= asset_path 'favicons/favicon-72.png' %>>
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href=<%= asset_path 'favicons/favicon-114.png' %>>
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href=<%= asset_path 'favicons/favicon-144.png' %>>
<%= stylesheet_link_tag 'application' %>
<%= csrf_meta_tags %>
<%= javascript_include_tag 'init.js' %>
<%= ga4_tag %>
</head>
<body>
<header>
<section>
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
</section>
<section class="usa-banner" aria-label="Official government website">
<div class="usa-accordion">
<div class="usa-banner__header">
<div class="usa-banner__inner">
<div class="grid-col-auto">
<%= image_tag 'us_flag_small.png',
class: 'usa-banner__header-flag',
alt: '',
aria: { hidden: true } %>
</div>
<div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
<p class="usa-banner__header-text">An official website of the United States government</p>
<p class="usa-banner__header-action">Here’s how you know</p>
</div>
<button class="usa-accordion__button usa-banner__button"
aria-expanded="false" aria-controls="gov-banner">
<span class="usa-banner__button-text">Here’s how you know</span>
</button>
</div>
</div>
<div class="usa-banner__content usa-accordion__content" id="gov-banner">
<div class="grid-row grid-gap-lg">
<div class="usa-banner__guidance tablet:grid-col-6">
<%= image_tag 'icon-dot-gov.svg',
alt: '',
class: 'usa-banner__icon usa-media-block__img',
role: 'img',
aria: { hidden: true } %>
<div class="usa-media-block__body">
<p>
<strong>Official websites use .gov</strong>
<br>
A <strong>.gov</strong> website belongs to an official government organization in the United States.
</p>
</div>
</div>
<div class="usa-banner__guidance tablet:grid-col-6">
<%= image_tag 'icon-https.svg',
alt: '',
class: 'usa-banner__icon usa-media-block__img',
role: 'img',
aria: { hidden: true } %>
<div class="usa-media-block__body">
<p>
<strong>Secure .gov websites use HTTPS</strong>
<br>
A <strong>lock</strong> (
<%= image_tag 'lock.svg',
alt: '',
class: 'usa-banner__lock-image',
role: 'img',
aria: { hidden: true } %>
) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<%= render 'layouts/nav'%>
</header>
<main class="usa-layout-docs usa-section" id="main-content">
<div class="grid-container">
<div class="usa-layout-docs-main_content">
<% @active_banners.each do |banner| %>
<div class="usa-alert usa-alert--info margin-bottom-105">
<div class="usa-alert__body">
<p class="usa-alert__text">
<%= sanitize(banner.message).html_safe %>
</p>
</div>
</div>
<% end %>
<%= render 'layouts/messages' %>
<%= content_for?(:content) ? yield(:content) : yield %>
</div>
</div>
</main>
<footer class="usa-footer usa-footer--slim" role="contentinfo">
<div class="grid-container usa-footer__return-to-top">
<a href="#">Return to top</a>
</div>
<div class="usa-footer__secondary-section">
<div class="grid-container">
<div class="usa-footer__logo grid-row grid-gap-2">
<div class="grid-col-auto">
<%= image_tag 'gsa-logo-rev.svg', alt: 'U.S. General Services Administration logo', class: 'usa-footer__logo-img', role: 'img' %>
</div>
</div>
</div>
</div>
</footer>
<%= javascript_include_tag 'application.js' %>
<%= javascript_include_tag 'main.js' %>
</body>
</html>