<.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" />