cob-uswds
Version:
Customized USWDS UI components and visual style guide based on City of Boston Patterns Library
46 lines (45 loc) • 1.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>COB Site Banner Test</title>
</head>
<body>
<div class="cob-site-banner" data-site-banner>
<div class="cob-site-banner__content">
<div class="cob-site-banner__left">
<img src="../img/boston-icon.svg" alt="Boston.gov Icon" class="cob-site-banner__icon" />
<span>An official website of the City of Boston.
<button class="cob-site-banner__toggle" aria-expanded="false" aria-controls="cob-site-banner-content">
Here's how you know
</button>
</span>
</div>
<div class="cob-site-banner__right">
<button class="cob-site-banner__toggle-icon" aria-expanded="false" aria-controls="cob-site-banner-content" aria-label="Here's how you know">
<span class="cob-site-banner__chevron"></span>
</button>
</div>
</div>
<div class="cob-site-banner__details" id="cob-site-banner-content" hidden>
<div class="cob-site-banner__details-inner">
<div class="cob-site-banner__info">
<img src="../img/boston-icon.svg" alt="" class="cob-site-banner__info-icon" />
<div>
<strong>Official websites use .boston.gov</strong>
<p>A .boston.gov website belongs to an official government organization in the City of Boston.</p>
</div>
</div>
<div class="cob-site-banner__info">
<img src="../img/https-icon.svg" alt="" class="cob-site-banner__info-icon" />
<div>
<strong>Secure .gov websites use HTTPS</strong>
<p>A lock () or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>