Component Library 2.17.5 (configured with Dummy App)
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="alert-banner" role="region" aria-label="Alerts" hidden="hidden" data-controller="alert-banner" data-alert-banner-interval-value="10000" data-alert-banner-signature-value="1,2,3|2026-10-27T09:00:00Z" data-alert-banner-venue-id-value="12" data-severity="high">
  <div class="alert-banner__inner">
    <div class="alert-banner__alerts" aria-live="off" data-alert-banner-target="alerts">
      <p class="alert-banner__alert" data-alert-banner-target="alert" data-severity="high">
        <span class="alert-banner__severity-icon" aria-hidden="true"><span class="material-symbols-outlined report" data-recite-translate-skip="true"></span></span>
        <a class="alert-banner__link" href="https://example.com/news">
          The main pool is closed for maintenance <span class="alert-banner__more">More information</span>
        </a></p>
        
      <p class="alert-banner__alert" hidden="hidden" data-alert-banner-target="alert" data-severity="medium">
        <span class="alert-banner__severity-icon" aria-hidden="true"><span class="material-symbols-outlined warning" data-recite-translate-skip="true"></span></span>
        <a class="alert-banner__link" href="/gll_component_library/alerts/2">
          Reduced gym hours over the bank holiday <span class="alert-banner__more">More information</span>
        </a></p>
        
      <p class="alert-banner__alert" hidden="hidden" data-alert-banner-target="alert" data-severity="low">
        <span class="alert-banner__severity-icon" aria-hidden="true"><span class="material-symbols-outlined info" data-recite-translate-skip="true"></span></span>
        <span class="alert-banner__message">Car park resurfacing this weekend</span>
      </p>
    </div>
    <div class="alert-banner__controls">
      <button type="button" class="alert-banner__control alert-banner__pause" data-action="alert-banner#togglePause">
        <span class="alert-banner__control-box" aria-hidden="true"><span class="material-symbols-outlined pause" data-recite-translate-skip="true"></span><span class="material-symbols-outlined play_arrow" data-recite-translate-skip="true"></span></span>
        <span data-alert-banner-target="pauseLabel">Pause</span>
      </button>
      <button type="button" class="alert-banner__control alert-banner__next" data-action="alert-banner#next">
        <span class="alert-banner__control-box" aria-hidden="true"><span class="material-symbols-outlined chevron_right" data-recite-translate-skip="true"></span></span>
        <span>Next (<span data-alert-banner-target="counter">1/3</span>)</span>
      </button>
    </div>
  </div>
  <button type="button" class="alert-banner__close" aria-label="Close alerts" data-action="alert-banner#dismiss">
    <span class="material-symbols-outlined close" data-recite-translate-skip="true"></span>
  </button>
</div>
1
2
3
4
5
render AlertBannerComponent.new(alerts: [
  alert("1", "The main pool is closed for maintenance", "high", href: "https://example.com/news"),
  alert("2", "Reduced gym hours over the bank holiday", "medium", has_page: true),
  alert("3", "Car park resurfacing this weekend", "low")
], venue_id: 12)

No notes provided.

No params configured.

No Figma design linked. Add @figma_node_id <id> (or @figma <url>) to the preview class or scenario docstring.