Banner Box

Props

• label: string (optional) -- accessible name applied via aria-label if needed
• children: slot (required) -- the banner box content
• ...restProps: unknown -- additional attributes spread onto the <div> element

Keyboard Interactions

• None (passive layout element)

ARIA

• No additional ARIA attributes required; the parent Banner provides the landmark role and aria-live region
• Optional aria-label via label prop if the box needs an accessible name

Composition

BannerBox is a child of Banner:

Banner
  └── BannerBox (flexbox horizontal row)
        ├── message content
        └── action buttons

When to Use

• Use inside a Banner to create a horizontal flexbox container for banner content
• Use to arrange banner text and action buttons side by side in a single row
• Use to group an icon, a message, and a dismiss or action button within a Banner
• Use when the Banner needs a consistent horizontal layout across different banner types
• Use to separate content zones within a Banner, such as left-aligned text and right-aligned controls

When Not to Use

• Do not use outside a Banner -- use a standard <div> or layout component for non-banner horizontal layouts
• Do not use for medical banners -- use MedicalBannerBox inside MedicalBanner instead
• Do not use for vertical stacking of banner content -- apply column-direction styles directly to the Banner or use multiple BannerBox elements

Headless

This headless component provides a <div> with a .banner-box class for consumer CSS targeting. The consumer is responsible for all flexbox styling including display: flex, flex-direction: row, alignment, gap, and any responsive behavior.

Styles

The consumer provides all CSS styling. The component renders with a .banner-box class for targeting. Typical consumer styles include display: flex; flex-direction: row; align-items: center; gap: 1rem;. No default styles are included -- this is a fully headless component.

Testing

• Verify the component renders a <div> element with class banner-box
• Verify it renders children content
• Verify pass-through attributes are applied to the <div>

Advice

• Designers: Use BannerBox to create a horizontal layout within banners. Consider responsive behavior -- the consumer may want to switch to vertical stacking on narrow screens.
• Developers: Apply display: flex; flex-direction: row; to .banner-box in your CSS. Use align-items: center for vertical centering and gap for spacing between items.

Implementation Notes

• Renders a <div> element with class banner-box
• Intended to be placed inside a Banner component
• Consumer applies flexbox horizontal styles via the .banner-box CSS class
• Uses children slot for flexible content rendering
• Spreads restProps onto the <div> element for consumer extensibility

Related components

• announcement-banner — a banner highlighting important messages for all users
• banner — a prominent message bar across the top of a page
• government-banner — a banner identifying a website as belonging to a government, with an expandable details panel
• medical-banner — a prominent message bar across the top of a page, with medical information
• medical-banner-box — a medical banner box that is inside a medical-banner component, using flexbox horizontal, with medical information
• medical-banner-box-for-advice — a medical record banner box for advice information e.g. contacts, contexts, plans, etc.

References

• Parent component: Banner
• CSS Flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout