Strip

Props

Source apps/www/src/sections/Strip.astro @ gitt.one

---
/**
 * Strip — a narrow brand-coloured band with one line of uppercase text: the
 *   welcome line under the hero, a slogan between sections.
 *
 * Use for: separating and branding — one sentence the page should say out
 *   loud.
 * Not for: anything with a button (<CtaCentered>); it is not a call to action,
 *   there is nothing to click.
 * Children: none.
 * Theme: "brand" (default) the primary gradient; "dark" a stone band.
 */
interface Props {
  /** the line of text */
  title: string;
  /** "brand" gradient, "dark" stone */
  theme?: 'brand' | 'dark';
}
const { title, theme = 'brand' } = Astro.props;
---

<aside class:list={['px-4 py-3 sm:px-6 lg:px-8', theme === 'dark' ? 'bg-stone-800' : 'bg-gradient-to-r from-primary-800 to-primary-alt-700']}>
  <p class="mx-auto max-w-7xl text-center text-sm font-semibold uppercase tracking-wide text-white">{title}</p>
</aside>