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
<!-- Three Steps -->
<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>
  </div>
  <div class="cfa-stack-sm">
    <p class="font-bold text-text-default leading-none" aria-hidden="true">Section 2 of 3</p>
    <p class="text-text-default" aria-hidden="true">Fewer sections still fill the full width</p>
    <span class="sr-only">Current section: Fewer sections still fill the full width, Section 2 of 3</span>
  </div>
</div>
<!-- Eight Steps -->
<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>
    <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 5 of 8</p>
    <p class="text-text-default" aria-hidden="true">More sections shrink to fit</p>
    <span class="sr-only">Current section: More sections shrink to fit, Section 5 of 8</span>
  </div>
</div>
1
2
3
4
5
# Three Steps
render(StepIndicatorComponent.new(current_step: 2, total_steps: 3, title: "Fewer sections still fill the full width"))
# Eight Steps
render(StepIndicatorComponent.new(current_step: 5, total_steps: 8, title: "More sections shrink to fit"))

No notes provided.

No params configured.