Module Skyline_banner_v2Source

Banners communicate status and inline messages with optional actions.

A Banner is a container view for composing multiple subviews:

• Header should always be used within a Banner, it supports a title, optional icon and arbitrary children (commonly a list of button controls)
• Section can be used for secondary, more verbose information, usually a paragraph of text. Its intended use is to be shown/hidden based on a "collapse" affordance in the header.

Non-banner child components in the Header and Section will need to be explicitly sized to look right. For Button, use the following mapping:

• If using a `Xs banner, use an `Xs Button
• If using a `Sm banner, use a `Sm Button
• If using a `Md or larger banner, use a `Md Button

Layout behavior

Banners render as block-level elements and, by default, fill the width of their container. Place them at the top of a page/section.

Example

  {%html|
    <Skyline.Banner.view>
      <Skyline.Banner.Header.text>
        <Skyline.Banner.Header.icon ~icon:%{Lucide.info} />
        A capybara has been sighted!
        <Skyline.Banner.Header.spacer />
        <Skyline.Button.view ~on_click:%{Effect.Ignore} ~variant:%{Ghost}>
          Dismiss
        </>
      </>
    </>
  |}