A-One Design System
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
127
128
129
130
131
132
133
134
135
136
137
<div class="tw:p-6 tw:max-w-3xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>COMPONENT:</strong> Sticky CTA (consumer-only)<br>
      <strong>VARIANTS:</strong> default | sticky-cta-sticky (scroll-sticky modifier)
    </p>
    <p class="tw:mb-0 tw:text-sm">
      The "Ready to Apply?" right-rail card from the Course Details page. Sky-blue gradient (secondary-500 →
      link-blue), white text, prominent CTA button area. Add <code>.sticky-cta-sticky</code> to make the
      card scroll-sticky beneath the consumer chrome.
    </p>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">1. Default — Ready to Apply?</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Structure:</strong> sticky-cta root → sticky-cta-title (20px extrabold) + sticky-cta-meta (13px, 0.92 opacity) + sticky-cta-action (caller emits a .btn).
      </p>
    </div>
    <div class="tw:max-w-[360px]">
      <div class="sticky-cta">
        <div class="sticky-cta-title">Ready to Apply?</div>
        <div class="sticky-cta-meta">96 students applied this quarter</div>
        <div class="sticky-cta-action">
          <button class="btn btn-block tw:font-bold tw:text-white tw:bg-primary tw:border-primary"
                  type="button">
            <i class="fa-regular fa-rocket tw:mr-1.5" aria-hidden="true"></i>
            Quick Apply
          </button>
        </div>
        <div class="sticky-cta-actions">
          <button class="sticky-cta-btn" type="button">
            <i class="fa-regular fa-bookmark tw:mr-1" aria-hidden="true"></i>
            Shortlist
          </button>
          <button class="sticky-cta-btn" type="button">
            <i class="fa-regular fa-code-compare tw:mr-1" aria-hidden="true"></i>
            Compare
          </button>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="sticky-cta"><div class="sticky-cta-title">Ready to Apply?</div><div class="sticky-cta-meta">…</div><div class="sticky-cta-action"><button class="btn btn-block">Quick Apply</button></div></div></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">2. With sticky modifier — side-by-side with scrollable content</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Sticky:</strong> Add <code>.sticky-cta-sticky</code> to make the card stick at
        <code>top: 80px</code> while the left content column scrolls. Used in the Course Details right rail.
      </p>
    </div>
    <div class="tw:flex tw:gap-6 tw:items-start" style="height: 480px; overflow-y: auto;">
      <div class="tw:flex-1 tw:space-y-4">
        <div class="card">
          <div class="card-body">
            <h3 class="h4 tw:mb-2">Course Summary</h3>
            <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">
              The A2 Art and Design course is divided into 4 units over 2 years. We aim to give students a wide range of experiences and are keen to encourage the development of strong personal qualities in each student's artwork and chosen media. Students who achieve a B and above are better equipped to cope with the demands of the subject.
            </p>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h3 class="h4 tw:mb-2">Entry Requirements</h3>
            <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">
              Achieve at least 6 passes at grade 5+ including English and Maths + 6+ in Art. Special consideration may be given for those with a suitable art portfolio.
            </p>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h3 class="h4 tw:mb-2">Assessment</h3>
            <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">
              Assessment is through a combination of coursework portfolio (60%) and externally assessed examination component (40%). Students produce a sustained project in their chosen medium.
            </p>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h3 class="h4 tw:mb-2">What you will study</h3>
            <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">
              Unit 1: Personal Investigation. Unit 2: Externally Set Assignment. Units 3 and 4 are completed in the second year and include a major personal project worth 40% of the total marks.
            </p>
          </div>
        </div>
      </div>
      <div class="tw:w-[320px] tw:shrink-0">
        <div class="sticky-cta sticky-cta-sticky">
          <div class="sticky-cta-title">Ready to Apply?</div>
          <div class="sticky-cta-meta">96 students applied this quarter</div>
          <div class="sticky-cta-action">
            <button class="btn btn-block tw:font-bold tw:text-white"
                    type="button"
                    class="tw:bg-primary tw:border-primary">
              <i class="fa-regular fa-rocket tw:mr-1.5" aria-hidden="true"></i>
              Quick Apply
            </button>
          </div>
          <div class="sticky-cta-actions">
            <button class="sticky-cta-btn" type="button">Shortlist</button>
            <button class="sticky-cta-btn" type="button">Compare</button>
          </div>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="sticky-cta sticky-cta-sticky"> … </div></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">3. Apply panel (school profile)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm"><strong>Apply panel:</strong> main CTA + 2-up secondary actions row (<code>.sticky-cta-actions</code> / <code>.sticky-cta-btn</code>), as used on the school profile right rail.</p>
    </div>
    <div class="tw:max-w-[320px]">
      <div class="sticky-cta">
        <h3 class="sticky-cta-title">Ready to Apply?</h3>
        <p class="sticky-cta-meta tw:mb-0">96 students applied in this quarter</p>
        <div class="sticky-cta-action">
          <button class="btn btn-primary btn-block" type="button">
            <i class="fa-regular fa-rocket-launch tw:mr-2" aria-hidden="true"></i>Quick Apply
          </button>
        </div>
        <div class="sticky-cta-actions">
          <button class="sticky-cta-btn" type="button">Shortlist</button>
          <button class="sticky-cta-btn" type="button">Compare</button>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="sticky-cta-actions"><button class="sticky-cta-btn">Shortlist</button>…</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
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
<div class="tw:p-6 tw:max-w-3xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>COMPONENT:</strong> Sticky CTA (consumer-only)<br>
      <strong>VARIANTS:</strong> default | sticky-cta-sticky (scroll-sticky modifier)
    </p>
    <p class="tw:mb-0 tw:text-sm">
      The "Ready to Apply?" right-rail card from the Course Details page. Sky-blue gradient (secondary-500 →
      link-blue), white text, prominent CTA button area. Add <code>.sticky-cta-sticky</code> to make the
      card scroll-sticky beneath the consumer chrome.
    </p>
  </div>
  <%# 1. Default card %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">1. Default — Ready to Apply?</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Structure:</strong> sticky-cta root → sticky-cta-title (20px extrabold) + sticky-cta-meta (13px, 0.92 opacity) + sticky-cta-action (caller emits a .btn).
      </p>
    </div>
    <div class="tw:max-w-[360px]">
      <div class="sticky-cta">
        <div class="sticky-cta-title">Ready to Apply?</div>
        <div class="sticky-cta-meta">96 students applied this quarter</div>
        <div class="sticky-cta-action">
          <button class="btn btn-block tw:font-bold tw:text-white tw:bg-primary tw:border-primary"
                  type="button">
            <i class="fa-regular fa-rocket tw:mr-1.5" aria-hidden="true"></i>
            Quick Apply
          </button>
        </div>
        <div class="sticky-cta-actions">
          <button class="sticky-cta-btn" type="button">
            <i class="fa-regular fa-bookmark tw:mr-1" aria-hidden="true"></i>
            Shortlist
          </button>
          <button class="sticky-cta-btn" type="button">
            <i class="fa-regular fa-code-compare tw:mr-1" aria-hidden="true"></i>
            Compare
          </button>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="sticky-cta"><div class="sticky-cta-title">Ready to Apply?</div><div class="sticky-cta-meta">…</div><div class="sticky-cta-action"><button class="btn btn-block">Quick Apply</button></div></div></code>
    </div>
  </div>
  <%# 2. With sticky modifier — tall content to exercise scroll %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">2. With sticky modifier — side-by-side with scrollable content</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Sticky:</strong> Add <code>.sticky-cta-sticky</code> to make the card stick at
        <code>top: 80px</code> while the left content column scrolls. Used in the Course Details right rail.
      </p>
    </div>
    <div class="tw:flex tw:gap-6 tw:items-start" style="height: 480px; overflow-y: auto;">
      <%# Left content column %>
      <div class="tw:flex-1 tw:space-y-4">
        <div class="card">
          <div class="card-body">
            <h3 class="h4 tw:mb-2">Course Summary</h3>
            <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">
              The A2 Art and Design course is divided into 4 units over 2 years. We aim to give students a wide range of experiences and are keen to encourage the development of strong personal qualities in each student's artwork and chosen media. Students who achieve a B and above are better equipped to cope with the demands of the subject.
            </p>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h3 class="h4 tw:mb-2">Entry Requirements</h3>
            <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">
              Achieve at least 6 passes at grade 5+ including English and Maths + 6+ in Art. Special consideration may be given for those with a suitable art portfolio.
            </p>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h3 class="h4 tw:mb-2">Assessment</h3>
            <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">
              Assessment is through a combination of coursework portfolio (60%) and externally assessed examination component (40%). Students produce a sustained project in their chosen medium.
            </p>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h3 class="h4 tw:mb-2">What you will study</h3>
            <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">
              Unit 1: Personal Investigation. Unit 2: Externally Set Assignment. Units 3 and 4 are completed in the second year and include a major personal project worth 40% of the total marks.
            </p>
          </div>
        </div>
      </div>
      <%# Right rail with sticky CTA %>
      <div class="tw:w-[320px] tw:shrink-0">
        <div class="sticky-cta sticky-cta-sticky">
          <div class="sticky-cta-title">Ready to Apply?</div>
          <div class="sticky-cta-meta">96 students applied this quarter</div>
          <div class="sticky-cta-action">
            <button class="btn btn-block tw:font-bold tw:text-white"
                    type="button"
                    class="tw:bg-primary tw:border-primary">
              <i class="fa-regular fa-rocket tw:mr-1.5" aria-hidden="true"></i>
              Quick Apply
            </button>
          </div>
          <div class="sticky-cta-actions">
            <button class="sticky-cta-btn" type="button">Shortlist</button>
            <button class="sticky-cta-btn" type="button">Compare</button>
          </div>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="sticky-cta sticky-cta-sticky"> … </div></code>
    </div>
  </div>
  <%# 3. Apply panel with secondary actions row %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">3. Apply panel (school profile)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm"><strong>Apply panel:</strong> main CTA + 2-up secondary actions row (<code>.sticky-cta-actions</code> / <code>.sticky-cta-btn</code>), as used on the school profile right rail.</p>
    </div>
    <div class="tw:max-w-[320px]">
      <div class="sticky-cta">
        <h3 class="sticky-cta-title">Ready to Apply?</h3>
        <p class="sticky-cta-meta tw:mb-0">96 students applied in this quarter</p>
        <div class="sticky-cta-action">
          <button class="btn btn-primary btn-block" type="button">
            <i class="fa-regular fa-rocket-launch tw:mr-2" aria-hidden="true"></i>Quick Apply
          </button>
        </div>
        <div class="sticky-cta-actions">
          <button class="sticky-cta-btn" type="button">Shortlist</button>
          <button class="sticky-cta-btn" type="button">Compare</button>
        </div>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div class="sticky-cta-actions"><button class="sticky-cta-btn">Shortlist</button>…</div></code>
    </div>
  </div>
</div>

No notes provided.

No params configured.