JohnsonCounty/income_badges.html at main · CommunityScale/JohnsonCounty · GitHub

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
<!-- <30% -->
<span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-gray-400 ring-inset">
  <svg class="size-3" viewBox="0 0 6 6" aria-hidden="true" style="fill:#374a6f">
    <rect width="6" height="6" />
  </svg>
  <span class="text-gray-900">&lt;30%</span>
</span>

<!-- 30–60% -->
<span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-gray-400 ring-inset">
  <svg class="size-3" viewBox="0 0 6 6" aria-hidden="true" style="fill:#6676b8">
    <rect width="6" height="6" />
  </svg>
  <span class="text-gray-900">30–60%</span>
</span>

<!-- 60–80% -->
<span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-gray-400 ring-inset">
  <svg class="size-3" viewBox="0 0 6 6" aria-hidden="true" style="fill:#7d8ad1">
    <rect width="6" height="6" />
  </svg>
  <span class="text-gray-900">60–80%</span>
</span>

<!-- 80–100% -->
<span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-gray-400 ring-inset">
  <svg class="size-3" viewBox="0 0 6 6" aria-hidden="true" style="fill:#9ca9ed">
    <rect width="6" height="6" />
  </svg>
  <span class="text-gray-900">80–100%</span>
</span>

<!-- 100–120% -->
<span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-gray-400 ring-inset">
  <svg class="size-3" viewBox="0 0 6 6" aria-hidden="true" style="fill:#b5c4fa">
    <rect width="6" height="6" />
  </svg>
  <span class="text-gray-900">100–120%</span>
</span>

<!-- >120% -->
<span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-gray-400 ring-inset">
  <svg class="size-3" viewBox="0 0 6 6" aria-hidden="true" style="fill:#d4e5ff">
    <rect width="6" height="6" />
  </svg>
  <span class="text-gray-900">&gt;120%</span>
</span>