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
127
128
129
130
131
132
133
134
135
136
137
138
139
<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>COURSE REQUIREMENTS + ELIGIBILITY (4.2 · NEW):</strong> engine-driven from coded D3 rules<br>
      <strong>COMPOSES:</strong> CourseRequirementsTableComponent · EligibilityExplainerComponent · badge-eligibility · sticky-cta
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Everything below is derived from <code>Scan::Eligibility.evaluate</code> — the hero badge, the table cells and the
      "Am I eligible?" breakdown all trace to the same rules, so they can never disagree. Met = success chip, near-miss =
      warning chip (never red). The engine reports the honest <strong>3 of 4</strong> (the portfolio is an alternative, not a gate).
    </p>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Coded requirements — engine output</h2>
    <div class="tw:flex tw:items-center tw:gap-2.5 tw:mb-5">
      <h3 class="tw:text-[22px] tw:font-extrabold tw:text-neutral-900 tw:tracking-tight tw:my-0">Design and Technology — GCE A Level</h3>
      <a href="#am-i-eligible" class="badge-eligibility badge-eligibility-not-eligible"><i class="fa-light fa-arrow-trend-up tw:mr-1" aria-hidden="true"></i>Likely eligible</a>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:lg:grid-cols-[1fr_360px] tw:gap-6 tw:items-start">
      <div class="tw:flex tw:flex-col tw:gap-4">
        <div class="card">
          <div class="card-body">
            <h4 class="tw:text-lg tw:font-bold tw:text-neutral-900 tw:mt-0 tw:mb-1">Entry requirements</h4>
            <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:mb-3">From the scan’s coded rules — replaces today’s freetext paragraph.</p>
            <div class="tw:grid tw:grid-cols-[1.4fr_1fr_0.9fr] tw:content-start tw:bg-white tw:border tw:border-line-card tw:rounded-md tw:overflow-hidden">
              <div class="comparison-row-header">Requirement</div>
              <div class="comparison-row-header">Rule</div>
              <div class="comparison-row-header">You</div>
              <div class="comparison-row">
                <div class="comparison-row-label">GCSE passes</div>
                <div class="comparison-row-value">≥ 6 at grade 5+</div>
                <div class="comparison-row-value">
                  <span class="badge badge-success-subtle badge-sm"><i class="fa-solid fa-check tw:mr-1" aria-hidden="true"></i>7 passes</span>
                </div>
              </div>
              <div class="comparison-row">
                <div class="comparison-row-label">English</div>
                <div class="comparison-row-value">Grade 5+</div>
                <div class="comparison-row-value">
                  <span class="badge badge-success-subtle badge-sm"><i class="fa-solid fa-check tw:mr-1" aria-hidden="true"></i>6</span>
                </div>
              </div>
              <div class="comparison-row">
                <div class="comparison-row-label">Maths</div>
                <div class="comparison-row-value">Grade 5+</div>
                <div class="comparison-row-value">
                  <span class="badge badge-success-subtle badge-sm"><i class="fa-solid fa-check tw:mr-1" aria-hidden="true"></i>5</span>
                </div>
              </div>
              <div class="comparison-row">
                <div class="comparison-row-label">Art (subject)</div>
                <div class="comparison-row-value">Grade 6+</div>
                <div class="comparison-row-value">
                  <span class="badge badge-warning-subtle badge-sm tw:text-yellow-900"><i class="fa-solid fa-triangle-exclamation tw:mr-1" aria-hidden="true"></i>5 · near miss</span>
                </div>
              </div>
              <div class="comparison-row">
                <div class="comparison-row-label">Alternative route</div>
                <div class="comparison-row-value">Portfolio may substitute</div>
                <div class="comparison-row-value tw:text-neutral-400">—</div>
              </div>
            </div>
            <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-x-2.5 tw:gap-y-1 tw:mt-3 tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">
              <span class="tw:inline-flex tw:items-center tw:gap-1 tw:text-green-700">
                <i class="fa-solid fa-circle-check" aria-hidden="true"></i>Verified 16 Jul 2026
              </span>
              <span aria-hidden="true">·</span>
              <a href="https://greenford.ealing.sch.uk/sixth-form/entry" class="tw:inline-flex tw:items-center tw:gap-1 tw:text-neutral-500 tw:cursor-help tw:hover:text-link"
       data-controller="tooltip" data-tooltip-content-value="greenford.ealing.sch.uk/sixth-form/entry">
                <i class="fa-light fa-link" aria-hidden="true"></i>Source
              </a>
            </div>
            <p class="tw:mb-0 tw:mt-3 tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">
              <strong>a11y:</strong> near-miss chip uses <code>tw:text-yellow-900</code> (7.59:1 AA) — DS default <code>badge-warning-subtle</code> is 3.34:1 and is flagged for a token fix.
            </p>
          </div>
        </div>
        <div class="card card-highlight" id="am-i-eligible">
          <div class="card-body">
            <div class="tw:flex tw:items-center tw:justify-between tw:gap-3 tw:mb-2.5">
              <h3 class="tw:text-base tw:font-bold tw:text-neutral-900 tw:my-0">Am I eligible?</h3>
              <span class="badge-eligibility badge-eligibility-not-eligible"><i class="fa-light fa-arrow-trend-up tw:mr-1" aria-hidden="true"></i>Likely eligible</span>
            </div>
            <div class="tw:flex tw:items-center tw:gap-3 tw:mb-3">
              <div class="tw:flex tw:gap-1 tw:flex-1" role="img" aria-label="3 of 4 requirements met">
                <span class="tw:h-1.5 tw:flex-1 tw:rounded-full tw:bg-green-600"></span>
                <span class="tw:h-1.5 tw:flex-1 tw:rounded-full tw:bg-green-600"></span>
                <span class="tw:h-1.5 tw:flex-1 tw:rounded-full tw:bg-green-600"></span>
                <span class="tw:h-1.5 tw:flex-1 tw:rounded-full tw:bg-neutral-300"></span>
              </div>
              <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">
                <i class="fa-solid fa-circle-check tw:text-green-600" aria-hidden="true"></i>3 of 4 met
              </span>
            </div>
            <div class="tw:flex tw:items-start tw:gap-2 tw:rounded-md tw:border tw:border-state-warning-border tw:bg-state-warning-bg tw:px-3 tw:py-2">
              <i class="fa-light fa-circle-arrow-up tw:text-yellow-900 tw:text-base tw:mt-0.5 tw:shrink-0" aria-hidden="true"></i>
              <p class="tw:mb-0 tw:text-body-s tw:leading-body-s tw:text-neutral-800">
                <span class="tw:font-bold tw:text-yellow-900">Just one to go — Art needs Grade 6+.</span>
                Predicted 5, one grade short — a strong application is well worth it. <span class="tw:text-neutral-600">Or apply with a portfolio instead.</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <aside class="tw:flex tw:flex-col tw:gap-3.5">
        <div class="sticky-cta">
          <h2 class="sticky-cta-title">Ready to Apply?</h2>
          <p class="sticky-cta-meta tw:mb-0">96 students applied 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>
      </aside>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Fallback — no coded rules published</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">The same engine returns <code>:unknown</code> for courses with no coded rules — freetext + an <code>-unknown</code> badge that routes to Enquire, never a fabricated verdict.</p>
    </div>
    <div class="tw:max-w-[620px]">
      <div class="tw:flex tw:items-center tw:gap-2.5 tw:mb-3">
        <h3 class="tw:text-lg tw:font-bold tw:text-neutral-900 tw:my-0">Fine Art — GCE A Level</h3>
        <span class="badge-eligibility badge-eligibility-unknown"><i class="fa-light fa-circle-question tw:mr-1" aria-hidden="true"></i>Requirements not published</span>
      </div>
      <div class="card">
        <div class="card-body">
          <h4 class="tw:text-lg tw:font-bold tw:text-neutral-900 tw:mt-0 tw:mb-2.5">Entry Requirements</h4>
          <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-800 tw:mb-4">This provider hasn’t published structured entry requirements for this course yet. Enquire and the school will confirm what they look for.</p>
          <button class="btn btn-primary" type="button"><i class="fa-light fa-envelope tw:mr-2" aria-hidden="true"></i>Enquire about entry requirements</button>
        </div>
      </div>
    </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
<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>COURSE REQUIREMENTS + ELIGIBILITY (4.2 · NEW):</strong> engine-driven from coded D3 rules<br>
      <strong>COMPOSES:</strong> CourseRequirementsTableComponent · EligibilityExplainerComponent · badge-eligibility · sticky-cta
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Everything below is derived from <code>Scan::Eligibility.evaluate</code> — the hero badge, the table cells and the
      "Am I eligible?" breakdown all trace to the same rules, so they can never disagree. Met = success chip, near-miss =
      warning chip (never red). The engine reports the honest <strong>3 of 4</strong> (the portfolio is an alternative, not a gate).
    </p>
  </div>
  <%
    reqs = Scan::CourseRequirements.new(
      course_id: 987, coded: true,
      rules: { min_gcse_passes: 6, min_grade: 5, english: 5, maths: 5,
               subject_specific: [{ subject: "Art", min_grade: 6 }], alternatives: ["portfolio"] },
      source_url: "https://greenford.ealing.sch.uk/sixth-form/entry",
      source_label: "greenford.ealing.sch.uk/sixth-form/entry", verified_at: "16 Jul 2026"
    )
    student = Scan::StudentProfile.new(gcse_passes: 7, english: 6, maths: 5, subjects: { "Art" => 5 })
    result  = Scan::Eligibility.evaluate(reqs, student)
    badge   = Scan::EligibilityBadge.for(result.verdict)
  %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Coded requirements — engine output</h2>
    <div class="tw:flex tw:items-center tw:gap-2.5 tw:mb-5">
      <h3 class="tw:text-[22px] tw:font-extrabold tw:text-neutral-900 tw:tracking-tight tw:my-0">Design and Technology — GCE A Level</h3>
      <a href="#am-i-eligible" class="badge-eligibility <%= badge[:klass] %>"><i class="fa-light <%= badge[:icon] %> tw:mr-1" aria-hidden="true"></i><%= badge[:label] %></a>
    </div>
    <div class="tw:grid tw:grid-cols-1 tw:lg:grid-cols-[1fr_360px] tw:gap-6 tw:items-start">
      <div class="tw:flex tw:flex-col tw:gap-4">
        <div class="card">
          <div class="card-body">
            <h4 class="tw:text-lg tw:font-bold tw:text-neutral-900 tw:mt-0 tw:mb-1">Entry requirements</h4>
            <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:mb-3">From the scan’s coded rules — replaces today’s freetext paragraph.</p>
            <%= render Consumer::CourseRequirementsTableComponent.new(result: result, requirements: reqs) %>
            <p class="tw:mb-0 tw:mt-3 tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">
              <strong>a11y:</strong> near-miss chip uses <code>tw:text-yellow-900</code> (7.59:1 AA) — DS default <code>badge-warning-subtle</code> is 3.34:1 and is flagged for a token fix.
            </p>
          </div>
        </div>
        <%= render Consumer::EligibilityExplainerComponent.new(result: result) %>
      </div>
      <aside class="tw:flex tw:flex-col tw:gap-3.5">
        <div class="sticky-cta">
          <h2 class="sticky-cta-title">Ready to Apply?</h2>
          <p class="sticky-cta-meta tw:mb-0">96 students applied 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>
      </aside>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Fallback — no coded rules published</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">The same engine returns <code>:unknown</code> for courses with no coded rules — freetext + an <code>-unknown</code> badge that routes to Enquire, never a fabricated verdict.</p>
    </div>
    <%
      reqs_uncoded = Scan::CourseRequirements.new(course_id: 654, coded: false)
      result_uncoded = Scan::Eligibility.evaluate(reqs_uncoded, student)
      badge_uncoded = Scan::EligibilityBadge.for(result_uncoded.verdict)
    %>
    <div class="tw:max-w-[620px]">
      <div class="tw:flex tw:items-center tw:gap-2.5 tw:mb-3">
        <h3 class="tw:text-lg tw:font-bold tw:text-neutral-900 tw:my-0">Fine Art — GCE A Level</h3>
        <span class="badge-eligibility <%= badge_uncoded[:klass] %>"><i class="fa-light <%= badge_uncoded[:icon] %> tw:mr-1" aria-hidden="true"></i><%= badge_uncoded[:label] %></span>
      </div>
      <div class="card">
        <div class="card-body">
          <h4 class="tw:text-lg tw:font-bold tw:text-neutral-900 tw:mt-0 tw:mb-2.5">Entry Requirements</h4>
          <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-800 tw:mb-4">This provider hasn’t published structured entry requirements for this course yet. Enquire and the school will confirm what they look for.</p>
          <button class="btn btn-primary" type="button"><i class="fa-light fa-envelope tw:mr-2" aria-hidden="true"></i>Enquire about entry requirements</button>
        </div>
      </div>
    </div>
  </div>
</div>

No notes provided.

No params configured.