Texas Website Banner
A banner identifying the site as an official Texas state government website. Recommended at the very top of every page, above the header.
Desktop
View HTML
<div class="txds-tx-banner">
<span class="txds-tx-banner__flag" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="12" fill="#20294F"/><rect x="3" y="7" width="7" height="10" fill="#fff"/><polygon points="6.5,9 7.5,11.5 5.5,11.5" fill="#20294F"/><rect x="10" y="7" width="11" height="5" fill="#fff"/><rect x="10" y="12" width="11" height="5" fill="#A82439"/></svg>
</span>
<p class="txds-tx-banner__text">An official website of the Texas state government.</p>
</div>Mobile
On smaller screens the text wraps and the banner gets slightly taller.
View HTML
<div class="txds-tx-banner" style="max-width:375px; justify-content:flex-start; min-height:60px;">
<span class="txds-tx-banner__flag" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="12" fill="#20294F"/><rect x="3" y="7" width="7" height="10" fill="#fff"/><polygon points="6.5,9 7.5,11.5 5.5,11.5" fill="#20294F"/><rect x="10" y="7" width="11" height="5" fill="#fff"/><rect x="10" y="12" width="11" height="5" fill="#A82439"/></svg>
</span>
<p class="txds-tx-banner__text" style="white-space:normal; line-height:16px;">An official website of the Texas state government.</p>
</div>Full Page Structure
The Texas banner, header, and navigation bar compose the full top-of-page structure:
<!-- 1. Texas Website Banner -->
<div class="txds-tx-banner">…</div>
<!-- 2. Alert Banner (if any) -->
<div class="txds-alert-banner txds-alert-banner--information">…</div>
<!-- 3. Header -->
<header class="txds-header">…</header>
<!-- 4. Navigation Bar -->
<nav class="txds-header__nav-bar">…</nav>
<!-- 5. Page Content -->
CSS Classes
| Class | Description |
|---|---|
txds-tx-banner |
Full-width banner bar (gray-60 background). |
txds-tx-banner__flag |
Texas flag icon container. |
txds-tx-banner__text |
Official website statement text. |