Banners

Page-top promo strip in light / dark / brand color variants, optional CTA, optional dismiss button.

Preview

GeneriCon 2023 Join us in Denver from June 7 – 9.

React preview

LiveView (HEEx)

alias DesignSystem.UI.Banners
alias Phoenix.LiveView.JS

<Banners.banner
  color="brand"
  id="launch-banner"
  on_dismiss={JS.hide(to: "#launch-banner")}
>
  <:message>
    <strong class="font-semibold">Launch sale</strong>
    Save 20% through Friday.
  </:message>
  <:cta href={~p"/pricing"}>Shop now</:cta>
</Banners.banner>

React (JSX)

import { useState } from "react"
import { Banner } from "../ui/index.mjs"

function LaunchBanner() {
  const [open, setOpen] = useState(true)
  if (!open) return null
  return (
    <Banner
      color="brand"
      message={<><strong>Launch sale.</strong> Save 20% through Friday.</>}
      cta="Shop now"
      ctaHref="/pricing"
      onDismiss={() => setOpen(false)}
    />
  )
}