Cfa Ui Components

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
<!-- Step One Example -->
<div class="cfa-step-indicator cfa-stack-med">
  <div class="flex gap-x-[7px]" aria-hidden="true">
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-border-secondary"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-border-secondary"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-border-secondary"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-border-secondary"></span>
  </div>
  <div class="cfa-stack-sm">
    <p class="font-bold text-text-default leading-none" aria-hidden="true">Section 1 of 5</p>
    <p class="text-text-default" aria-hidden="true">Tell us about yourself</p>
    <span class="sr-only">Current section: Tell us about yourself, Section 1 of 5</span>
  </div>
</div>
<!-- Step Two Example -->
<div class="cfa-step-indicator cfa-stack-med">
  <div class="flex gap-x-[7px]" aria-hidden="true">
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-border-secondary"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-border-secondary"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-border-secondary"></span>
  </div>
  <div class="cfa-stack-sm">
    <p class="font-bold text-text-default leading-none" aria-hidden="true">Section 2 of 5</p>
    <p class="text-text-default" aria-hidden="true">Add your dependents</p>
    <span class="sr-only">Current section: Add your dependents, Section 2 of 5</span>
  </div>
</div>
<!-- Step Three Example -->
<div class="cfa-step-indicator cfa-stack-med">
  <div class="flex gap-x-[7px]" aria-hidden="true">
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-border-secondary"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-border-secondary"></span>
  </div>
  <div class="cfa-stack-sm">
    <p class="font-bold text-text-default leading-none" aria-hidden="true">Section 3 of 5</p>
    <p class="text-text-default" aria-hidden="true">Household income</p>
    <span class="sr-only">Current section: Household income, Section 3 of 5</span>
  </div>
</div>
<!-- Step Four Example -->
<div class="cfa-step-indicator cfa-stack-med">
  <div class="flex gap-x-[7px]" aria-hidden="true">
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-border-secondary"></span>
  </div>
  <div class="cfa-stack-sm">
    <p class="font-bold text-text-default leading-none" aria-hidden="true">Section 4 of 5</p>
    <p class="text-text-default" aria-hidden="true">Review your answers</p>
    <span class="sr-only">Current section: Review your answers, Section 4 of 5</span>
  </div>
</div>
<!-- Step Five Example -->
<div class="cfa-step-indicator cfa-stack-med">
  <div class="flex gap-x-[7px]" aria-hidden="true">
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
    <span class="flex-1 min-w-px h-2 rounded-lg bg-success"></span>
  </div>
  <div class="cfa-stack-sm">
    <p class="font-bold text-text-default leading-none" aria-hidden="true">Section 5 of 5</p>
    <p class="text-text-default" aria-hidden="true">Submit</p>
    <span class="sr-only">Current section: Submit, Section 5 of 5</span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Step One Example
render(StepIndicatorComponent.new(current_step: 1, total_steps: 5, title: "Tell us about yourself"))
# Step Two Example
render(StepIndicatorComponent.new(current_step: 2, total_steps: 5, title: "Add your dependents"))
# Step Three Example
render(StepIndicatorComponent.new(current_step: 3, total_steps: 5, title: "Household income"))
# Step Four Example
render(StepIndicatorComponent.new(current_step: 4, total_steps: 5, title: "Review your answers"))
# Step Five Example
render(StepIndicatorComponent.new(current_step: 5, total_steps: 5, title: "Submit"))

No notes provided.

No params configured.