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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<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>LIST GROUP:</strong> Settled vertical list of rows sharing one outer surface<br>
      <strong>VARIANTS:</strong> Static | Action (links) | Active/Disabled | Flush (inside .card) | Numbered
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Use for settings/navigation lists, document checklists, and activity feeds — anywhere a
      set of peer rows needs one shared border and background rather than individually spaced
      cards. For a single free-standing block of content, use <code>.card</code> instead.
    </p>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Static</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Plain rows:</strong> non-interactive content, e.g. a document checklist.
      </p>
    </div>
    <div class="tw:max-w-md">
      <ul class="list-group">
        <li class="list-group-item">Birth certificate</li>
        <li class="list-group-item">Proof of address (dated within 3 months)</li>
        <li class="list-group-item">Passport-style photo</li>
        <li class="list-group-item">Previous school report</li>
        <li class="list-group-item">Immunisation record</li>
      </ul>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><ul class="list-group"><li class="list-group-item">…</li></ul></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Action (links)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>.list-group-item-action:</strong> hover fills <code>line-muted</code> and inks
        link-blue; each row is keyboard-focusable with a visible ring.
      </p>
    </div>
    <div class="tw:max-w-md">
      <ul class="list-group">
        <li>
          <a href="#" class="list-group-item list-group-item-action">View application</a>
        </li>
        <li>
          <a href="#" class="list-group-item list-group-item-action">Download offer letter</a>
        </li>
        <li>
          <a href="#" class="list-group-item list-group-item-action">Update contact details</a>
        </li>
        <li>
          <a href="#" class="list-group-item list-group-item-action">Contact admissions team</a>
        </li>
      </ul>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><a href="…" class="list-group-item list-group-item-action">…</a></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Active & disabled</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>.active:</strong> link-blue ink + <code>link-subtle</code> wash marks the current
        step — a plain <code><li></code>, not a link or button, so it never carries
        <code>.list-group-item-action</code> (no hover/cursor affordance for something that
        isn't clickable). <strong>.disabled:</strong> muted, non-interactive — a step not yet
        reachable.
      </p>
    </div>
    <div class="tw:max-w-md">
      <ol class="list-group">
        <li class="list-group-item">1. Personal details — complete</li>
        <li class="list-group-item active" aria-current="true">2. Parent/guardian details</li>
        <li class="list-group-item disabled" aria-disabled="true">3. Supporting documents</li>
        <li class="list-group-item disabled" aria-disabled="true">4. Review & submit</li>
      </ol>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><li class="list-group-item active" aria-current="true">…</li></code> ·
      <code><li class="list-group-item disabled" aria-disabled="true">…</li></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Flush (inside a card)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>.list-group-flush:</strong> drops the outer border/radius so the list sits
        flush inside a <code>.card</code>'s own surface — pair with <code>.card-body.tw:p-0</code>.
      </p>
    </div>
    <div class="card tw:max-w-md">
      <div class="card-header">Recent activity</div>
      <div class="card-body tw:p-0">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Application submitted — 3 Aug 2026</li>
          <li class="list-group-item">Documents verified — 5 Aug 2026</li>
          <li class="list-group-item">Interview scheduled — 12 Aug 2026</li>
        </ul>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="card-body tw:p-0"><ul class="list-group list-group-flush">…</ul></div></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Numbered</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>.list-group-numbered:</strong> CSS-counter number prefix — no manual "1. " text.
      </p>
    </div>
    <div class="tw:max-w-md">
      <ol class="list-group list-group-numbered">
        <li class="list-group-item">Create your ApplicaaOne account</li>
        <li class="list-group-item">Add your child's details</li>
        <li class="list-group-item">Upload the required documents</li>
        <li class="list-group-item">Submit your application for review</li>
      </ol>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><ol class="list-group list-group-numbered"><li class="list-group-item">…</li></ol></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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<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>LIST GROUP:</strong> Settled vertical list of rows sharing one outer surface<br>
      <strong>VARIANTS:</strong> Static | Action (links) | Active/Disabled | Flush (inside .card) | Numbered
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Use for settings/navigation lists, document checklists, and activity feeds — anywhere a
      set of peer rows needs one shared border and background rather than individually spaced
      cards. For a single free-standing block of content, use <code>.card</code> instead.
    </p>
  </div>
  <%# Static list %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Static</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Plain rows:</strong> non-interactive content, e.g. a document checklist.
      </p>
    </div>
    <div class="tw:max-w-md">
      <ul class="list-group">
        <li class="list-group-item">Birth certificate</li>
        <li class="list-group-item">Proof of address (dated within 3 months)</li>
        <li class="list-group-item">Passport-style photo</li>
        <li class="list-group-item">Previous school report</li>
        <li class="list-group-item">Immunisation record</li>
      </ul>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><ul class="list-group"><li class="list-group-item">…</li></ul></code>
    </div>
  </div>
  <%# Links / actionable %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Action (links)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>.list-group-item-action:</strong> hover fills <code>line-muted</code> and inks
        link-blue; each row is keyboard-focusable with a visible ring.
      </p>
    </div>
    <div class="tw:max-w-md">
      <ul class="list-group">
        <li>
          <a href="#" class="list-group-item list-group-item-action">View application</a>
        </li>
        <li>
          <a href="#" class="list-group-item list-group-item-action">Download offer letter</a>
        </li>
        <li>
          <a href="#" class="list-group-item list-group-item-action">Update contact details</a>
        </li>
        <li>
          <a href="#" class="list-group-item list-group-item-action">Contact admissions team</a>
        </li>
      </ul>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><a href="…" class="list-group-item list-group-item-action">…</a></code>
    </div>
  </div>
  <%# Active / disabled %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Active & disabled</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>.active:</strong> link-blue ink + <code>link-subtle</code> wash marks the current
        step — a plain <code><li></code>, not a link or button, so it never carries
        <code>.list-group-item-action</code> (no hover/cursor affordance for something that
        isn't clickable). <strong>.disabled:</strong> muted, non-interactive — a step not yet
        reachable.
      </p>
    </div>
    <div class="tw:max-w-md">
      <ol class="list-group">
        <li class="list-group-item">1. Personal details — complete</li>
        <li class="list-group-item active" aria-current="true">2. Parent/guardian details</li>
        <li class="list-group-item disabled" aria-disabled="true">3. Supporting documents</li>
        <li class="list-group-item disabled" aria-disabled="true">4. Review & submit</li>
      </ol>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><li class="list-group-item active" aria-current="true">…</li></code> ·
      <code><li class="list-group-item disabled" aria-disabled="true">…</li></code>
    </div>
  </div>
  <%# Flush inside a card %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Flush (inside a card)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>.list-group-flush:</strong> drops the outer border/radius so the list sits
        flush inside a <code>.card</code>'s own surface — pair with <code>.card-body.tw:p-0</code>.
      </p>
    </div>
    <div class="card tw:max-w-md">
      <div class="card-header">Recent activity</div>
      <div class="card-body tw:p-0">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Application submitted — 3 Aug 2026</li>
          <li class="list-group-item">Documents verified — 5 Aug 2026</li>
          <li class="list-group-item">Interview scheduled — 12 Aug 2026</li>
        </ul>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="card-body tw:p-0"><ul class="list-group list-group-flush">…</ul></div></code>
    </div>
  </div>
  <%# Numbered %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Numbered</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>.list-group-numbered:</strong> CSS-counter number prefix — no manual "1. " text.
      </p>
    </div>
    <div class="tw:max-w-md">
      <ol class="list-group list-group-numbered">
        <li class="list-group-item">Create your ApplicaaOne account</li>
        <li class="list-group-item">Add your child's details</li>
        <li class="list-group-item">Upload the required documents</li>
        <li class="list-group-item">Submit your application for review</li>
      </ol>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><ol class="list-group list-group-numbered"><li class="list-group-item">…</li></ol></code>
    </div>
  </div>
</div>

No notes provided.

No params configured.