Alert Banner
alert-banner.svelteA flat banner with a drop-shadow corner for inline notices.
Demo
Usage
001 <script lang="ts">
002 import AlertBanner from '$lib/components/alert-banner.svelte';
003 </script>
004
005 <div class="flex flex-col gap-2">
006 <AlertBanner>Something needs your attention.</AlertBanner>
007 </div>
008
alert-banner.svelte
001 <script lang="ts" module>
002 import type { HTMLAttributes } from 'svelte/elements';
003
004 /** A flat banner with a drop-shadow corner, for inline notices/alerts. */
005 export type AlertBannerProps = HTMLAttributes<HTMLDivElement> & {
006 ref?: HTMLDivElement | null;
007 };
008 </script>
009
010 <script lang="ts">
011 let {
012 class: className,
013 ref = $bindable(null),
014 style,
015 children,
016 ...restProps
017 }: AlertBannerProps = $props();
018 </script>
019
020 <div bind:this={ref} class={`alert-banner ${className ?? ''}`} {style} {...restProps}>
021 {@render children?.()}
022 </div>
023
024 <style>
025 .alert-banner {
026 display: block;
027 background: var(--border-default);
028 box-shadow: 1ch 1ch 0 0 var(--border-muted);
029 padding: var(--line) 2ch;
030 font-weight: 400;
031 }
032 </style>
033