HEEx
<div class="w-58">
<ConnieUI.Navigation.notification_card
id="catalog-notification-card"
dismiss={JS.push("dismiss_safari_warning")}
>
<strong>Your Safari version is outdated.</strong> Connie may not work as expected.
</ConnieUI.Navigation.notification_card>
</div>
Variant matrix
Every combination of one or two attributes, side by side.
Controls
Set by the example
dismiss
Docs
Renders a notification card for the sidebar navigation.
Similar to the banner component but styled to match the sidebar's featured_card.
Use for important alerts that should appear in the navigation sidebar.
## Examples
<.notification_card id="nav-alert" color="warning" dismiss={JS.hide(to: "#nav-alert")}>
<strong>Experiencing slowness in Safari?</strong>
Try Chrome for a smoother Connie experience.
</.notification_card>
| Attribute | Type | Default | Description |
|---|---|---|---|
| No data found. | |||
| id | :string | nil |
|
| color | :string | "warning" |
error | warning | orange | success
|
| dismiss | {:struct, Phoenix.LiveView.JS} | nil |
|
| desktop_only | :boolean | false |
Hide on touch devices (iPad in desktop mode)
|
| Slot | Slot attributes | Description |
|---|---|---|
| No data found. | ||
| inner_block * | ||