A-One Design System

Previews

No matching results.

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>BANNER:</strong> Full-bleed site-wide notice strip<br>
      <strong>VARIANTS:</strong> Info | Warning | Danger — dismissible or persistent
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Sits above the page shell, edge-to-edge (in a real page it spans the full viewport width,
      outside <code>.page-container</code>) — unlike <code>.inline-notification</code>, which
      lives inside content flow as a rounded card. Use for application deadlines, maintenance
      windows, and platform-wide policy notices. Each example below is shown at content width
      for the preview; in production it stretches full-bleed.
    </p>
    <p class="tw:mb-0 tw:mt-2 tw:text-sm">
      <strong>Shell placement:</strong> first child of <code>body.app</code>, above the sidebar
      and topbar — it's in-flow, so no z-index coordination is needed, it just pushes the shell
      down by its own height:
      <code><body class="app"><div class="banner …">…</div><div data-controller="sidebar">…shell…</div></body></code>
    </p>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Deadline reminder — warning + action</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>.banner-warning:</strong> dark ink on tinted yellow (state-warning trio, passes
        AA). <code>role="status"</code> — important but not urgent enough for
        <code>role="alert"</code>. <code>.banner-action</code> is a bold underlined inline link;
        <code>.banner-close</code> dismisses just this strip.
      </p>
    </div>
    <div class="banner banner-warning" role="status" data-controller="banner"
         data-action="keydown.esc->banner#dismiss">
      <i class="fa-solid fa-triangle-exclamation tw:shrink-0" aria-hidden="true"></i>
      <div class="banner-body">
        <span>Applications for Year 7 Main Entry (2026/2027) close in 3 days — 15 September 2026.</span>
        <button type="button" class="banner-action">Complete your application</button>
      </div>
      <button type="button" class="banner-close" aria-label="Dismiss this notice" data-action="click->banner#dismiss">
        <i class="fa-regular fa-xmark" aria-hidden="true"></i>
      </button>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="banner banner-warning" role="status" data-controller="banner"><div class="banner-body">…<button class="banner-action">…</button></div><button class="banner-close" data-action="click->banner#dismiss">…</button></div></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Info notice — persistent (no close)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Persistent:</strong> omit <code>data-controller</code> and
        <code>.banner-close</code> entirely when the notice must stay visible for the whole
        session (e.g. a preview-environment disclaimer).
      </p>
    </div>
    <div class="banner banner-info" role="status">
      <i class="fa-regular fa-circle-info tw:shrink-0" aria-hidden="true"></i>
      <div class="banner-body">
        <span>This is a preview environment — no real applications are submitted here.</span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="banner banner-info" role="status"><div class="banner-body">…</div></div></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Danger — dismissible</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>.banner-danger:</strong> <code>role="alert"</code> — failures serious enough
        that screen readers should announce them immediately on render, unlike
        <code>role="status"</code>'s polite queueing.
      </p>
    </div>
    <div class="banner banner-danger" role="alert" data-controller="banner"
         data-action="keydown.esc->banner#dismiss">
      <i class="fa-solid fa-circle-exclamation tw:shrink-0" aria-hidden="true"></i>
      <div class="banner-body">
        <span>We're experiencing technical issues with document uploads. Please try again in a few minutes.</span>
      </div>
      <button type="button" class="banner-close" aria-label="Dismiss this notice" data-action="click->banner#dismiss">
        <i class="fa-regular fa-xmark" aria-hidden="true"></i>
      </button>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="banner banner-danger" role="alert" data-controller="banner">…</div></code>
    </div>
  </div>
</div>
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <%# Introductory callout %>
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>BANNER:</strong> Full-bleed site-wide notice strip<br>
      <strong>VARIANTS:</strong> Info | Warning | Danger — dismissible or persistent
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Sits above the page shell, edge-to-edge (in a real page it spans the full viewport width,
      outside <code>.page-container</code>) — unlike <code>.inline-notification</code>, which
      lives inside content flow as a rounded card. Use for application deadlines, maintenance
      windows, and platform-wide policy notices. Each example below is shown at content width
      for the preview; in production it stretches full-bleed.
    </p>
    <p class="tw:mb-0 tw:mt-2 tw:text-sm">
      <strong>Shell placement:</strong> first child of <code>body.app</code>, above the sidebar
      and topbar — it's in-flow, so no z-index coordination is needed, it just pushes the shell
      down by its own height:
      <code><body class="app"><div class="banner …">…</div><div data-controller="sidebar">…shell…</div></body></code>
    </p>
  </div>
  <%# Deadline reminder — warning + action, dismissible %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Deadline reminder — warning + action</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>.banner-warning:</strong> dark ink on tinted yellow (state-warning trio, passes
        AA). <code>role="status"</code> — important but not urgent enough for
        <code>role="alert"</code>. <code>.banner-action</code> is a bold underlined inline link;
        <code>.banner-close</code> dismisses just this strip.
      </p>
    </div>
    <div class="banner banner-warning" role="status" data-controller="banner"
         data-action="keydown.esc->banner#dismiss">
      <i class="fa-solid fa-triangle-exclamation tw:shrink-0" aria-hidden="true"></i>
      <div class="banner-body">
        <span>Applications for Year 7 Main Entry (2026/2027) close in 3 days — 15 September 2026.</span>
        <button type="button" class="banner-action">Complete your application</button>
      </div>
      <button type="button" class="banner-close" aria-label="Dismiss this notice" data-action="click->banner#dismiss">
        <i class="fa-regular fa-xmark" aria-hidden="true"></i>
      </button>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="banner banner-warning" role="status" data-controller="banner"><div class="banner-body">…<button class="banner-action">…</button></div><button class="banner-close" data-action="click->banner#dismiss">…</button></div></code>
    </div>
  </div>
  <%# Info notice — persistent, no close %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Info notice — persistent (no close)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Persistent:</strong> omit <code>data-controller</code> and
        <code>.banner-close</code> entirely when the notice must stay visible for the whole
        session (e.g. a preview-environment disclaimer).
      </p>
    </div>
    <div class="banner banner-info" role="status">
      <i class="fa-regular fa-circle-info tw:shrink-0" aria-hidden="true"></i>
      <div class="banner-body">
        <span>This is a preview environment — no real applications are submitted here.</span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="banner banner-info" role="status"><div class="banner-body">…</div></div></code>
    </div>
  </div>
  <%# Danger — dismissible, role=alert %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Danger — dismissible</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>.banner-danger:</strong> <code>role="alert"</code> — failures serious enough
        that screen readers should announce them immediately on render, unlike
        <code>role="status"</code>'s polite queueing.
      </p>
    </div>
    <div class="banner banner-danger" role="alert" data-controller="banner"
         data-action="keydown.esc->banner#dismiss">
      <i class="fa-solid fa-circle-exclamation tw:shrink-0" aria-hidden="true"></i>
      <div class="banner-body">
        <span>We're experiencing technical issues with document uploads. Please try again in a few minutes.</span>
      </div>
      <button type="button" class="banner-close" aria-label="Dismiss this notice" data-action="click->banner#dismiss">
        <i class="fa-regular fa-xmark" aria-hidden="true"></i>
      </button>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="banner banner-danger" role="alert" data-controller="banner">…</div></code>
    </div>
  </div>
</div>

No notes provided.

No params configured.