<div class="@container bg-gray-90 text-white pb-4 font-public-sans">
<section aria-label="Agency identifier" class="py-4 flex flex-col @tablet:flex-row px-8 gap-4">
<a href="#" class="block focus:outline focus:outline-4 focus:outline-blue-40v">
<img src="#" alt="Agency name" class="size-10 rounded-full bg-gray-10 object-cover">
<section aria-label="Agency description">
<p class="text-gray-30">domain.gov</p>
<p class="font-bold">An official website of the
<a href="#" class="text-gray-10 hover:text-gray-5 focus:outline focus:outline-4 focus:outline-blue-40v underline">Your Agency</a>
<ul class="columns-1 @tablet:columns-2 @desktop:columns-4 space-y-2">
<a href="{{- link.href -}}" class="text-gray-30 hover:text-gray-10 focus:outline focus:outline-4 focus:outline-blue-40v underline">{{- link.title -}}</a>
<section aria-label="U.S. government information and services" class="py-4 px-8">
<p>Looking for U.S. government information and services?
<a href="#" rel="noreferrer" target="_blank" class="text-gray-10 hover:text-gray-5 focus:outline focus:outline-4 focus:outline-blue-40v underline after:icon-[material-symbols--open-in-new] after:size-4 after:align-middle after:ml-px font-bold">Visit USA.gov
<span class="sr-only">External, opens in a new tab</span>