Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script lang="ts">
import "./AnnouncementBanner.scss";
import Link from "$lib/components/Link";
import Icon from "$lib/components/Icon";
import { url as lightbulbIcon } from "$icons/lightbulb";
import { url as arrowIcon } from "$icons/arrow_forward";
import classNames from "$lib/util/classNames";
export let ariaLabel = "Top-level announcement";
export let headerText = "Here's a site-wide announcement!";
export let linkText = "Read more here";
export let href = "/";
let classes = classNames("usa-banner", `ldaf-banner--announcement`);
</script>
<section id="top" class={classes} aria-label={ariaLabel}>
<header class="usa-banner__header">
<div class="usa-banner__inner">
<div class="grid-col-auto">
<Icon
class="usa-banner__header-flag ldaf-banner__lightbulb-icon"
src={lightbulbIcon}
alt="Lightbulb icon"
width={16}
height={11}
/>
</div>
<div class="grid-col-fill tablet:grid-col-auto ldaf-banner--announcement-text">
<p class="usa-banner__header-text">{headerText}</p>
<Link {href}>{linkText}<Icon src={arrowIcon} class="ldaf-banner__arrow-icon" /></Link>
</div>
</div>
</header>
</section>
|