Infobox

Informational message boxes for info, success, warning, and error states in @bnotk/dsx.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/infobox.css">

Or use the full bundle:

<link rel="stylesheet" href="@bnotk/dsx/css/index.css">

Classes

Class	Purpose
`.dsx-infobox`	Base message container
`.dsx-infobox--info` / `--success` / `--warning` / `--error`	Semantic color variants
`.dsx-infobox__icon`	Fixed-size icon area
`.dsx-infobox__content`	Flexible content column
`.dsx-infobox__title`	Semibold title row
`.dsx-infobox__close`	Unstyled close button

Visual behavior

Base infoboxes use a grey border and background with var(--ds2-space-4) padding.
Semantic variants swap border and background colors to blue, green, amber, or red tints.
Icons inherit the semantic accent color from the variant.
The close button is icon/text-only and darkens on hover.

Example

<div class="dsx-infobox dsx-infobox--info" role="status">
  <div class="dsx-infobox__icon" aria-hidden="true">
    <svg class="dsx-icon dsx-icon--sm" viewBox="0 0 16 16">
      <path fill="currentColor" d="M7.78125 4.5 7.82617 4.50151C8.1676 4.52461 8.4375 4.80897 8.4375 5.15625 8.4375 5.51862 8.14362 5.8125 7.78125 5.8125 7.41888 5.8125 7.125 5.51862 7.125 5.15625 7.125 4.80897 7.3949 4.52461 7.73633 4.50151L7.78125 4.5Z" />
      <path fill="currentColor" d="M7.5625 6.6875C8.02837 6.6875 8.40939 7.05188 8.43601 7.5111L8.4375 7.5625V9.75C8.4375 9.97718 8.61123 10.1643 8.8329 10.1855L8.875 10.1875H9.3125C9.55412 10.1875 9.75 10.3834 9.75 10.625 9.75 10.8524 9.57649 11.0393 9.35463 11.0605L9.3125 11.0625H8.875C8.17108 11.0625 7.5962 10.5077 7.56393 9.81177L7.5625 9.75V7.5625H7.125C6.88338 7.5625 6.6875 7.36662 6.6875 7.125 6.6875 6.89759 6.86101 6.7107 7.08287 6.6895L7.125 6.6875H7.5625Z" />
      <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M8 1C4.13413 1 1 4.13413 1 8 1 11.8659 4.13413 15 8 15 11.8659 15 15 11.8659 15 8 15 4.13413 11.8659 1 8 1ZM8 1.875C11.3826 1.875 14.125 4.61737 14.125 8 14.125 11.3826 11.3826 14.125 8 14.125 4.61737 14.125 1.875 11.3826 1.875 8 1.875 4.61737 4.61737 1.875 8 1.875Z" />
    </svg>
  </div>
  <div class="dsx-infobox__content">
    <div class="dsx-infobox__title">Heads up</div>
    <p>Changes are saved automatically every 30 seconds.</p>
  </div>
</div>

Accessibility notes

Use role="status" for passive messages and role="alert" for urgent errors.
Ensure the close button has type="button" and an accessible label.
Keep the message text explicit; do not rely on the icon or color alone.