<.banner
  id="banner-status-status-primary"
  status="primary"
  description="I am a primary banner"
  title="Primary status"
/>
<.banner
  id="banner-status-status-error"
  status="error"
  description="I am an error banner"
  title="Error status"
/>
<.banner
  id="banner-status-status-success"
  status="success"
  description="I am a success banner"
  title="Success status"
/>
<.banner
  id="banner-status-status-warning"
  status="warning"
  description="I am a warning banner"
  title="Warning status"
/>
<.banner
  id="banner-status-status-information"
  status="information"
  description="I am an information banner"
  title="Information status"
/>

<.banner
  id="banner-icon-icon-primary"
  status="primary"
  description="I am a primary banner with a custom icon"
  title="Primary status"
>
  <:icon>
    <.alert_circle />
  </:icon>
</.banner>

<.banner
  id="banner-content-variations-without-description"
  status="primary"
  title="Title only banner"
/>
<.banner
  id="banner-content-variations-dismissible"
  status="warning"
  description="This banner can be dismissed by the user"
  title="Dismissible banner"
  dismissible
/>
<.banner
  id="banner-content-variations-long-content"
  status="information"
  description="This is a banner with much longer descriptive text that demonstrates how the component handles multiple lines of content and text wrapping behavior"
  title="Banner with longer content"
/>