Backpack
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
<table class="lookbook-table">
  <thead>
    <tr>
      <th>Color</th>
      <th colspan="3"><code>default</code></th>
      <th colspan="3"><code>green</code></th>
      <th colspan="3"><code>orange</code></th>
      <th colspan="3"><code>red</code></th>
    </tr>
    <tr>
      <th>Size</th>
      <th><code>1</code></th>
      <th><code>2</code></th>
      <th><code>3</code></th>
      <th><code>1</code></th>
      <th><code>2</code></th>
      <th><code>3</code></th>
      <th><code>1</code></th>
      <th><code>2</code></th>
      <th><code>3</code></th>
      <th><code>1</code></th>
      <th><code>2</code></th>
      <th><code>3</code></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th><code>solid</code></th>
      <td><span class="Badge Badge-variant-solid Badge-size-1">Badge</span></td>
      <td><span class="Badge Badge-variant-solid Badge-size-2">Badge</span></td>
      <td><span class="Badge Badge-variant-solid Badge-size-3">Badge</span></td>
      <td><span class="Badge Badge-variant-solid Badge-size-1" data-accent-color="green">Badge</span></td>
      <td><span class="Badge Badge-variant-solid Badge-size-2" data-accent-color="green">Badge</span></td>
      <td><span class="Badge Badge-variant-solid Badge-size-3" data-accent-color="green">Badge</span></td>
      <td><span class="Badge Badge-variant-solid Badge-size-1" data-accent-color="orange">Badge</span></td>
      <td><span class="Badge Badge-variant-solid Badge-size-2" data-accent-color="orange">Badge</span></td>
      <td><span class="Badge Badge-variant-solid Badge-size-3" data-accent-color="orange">Badge</span></td>
      <td><span class="Badge Badge-variant-solid Badge-size-1" data-accent-color="red">Badge</span></td>
      <td><span class="Badge Badge-variant-solid Badge-size-2" data-accent-color="red">Badge</span></td>
      <td><span class="Badge Badge-variant-solid Badge-size-3" data-accent-color="red">Badge</span></td>
    </tr>
    <tr>
      <th><code>soft</code></th>
      <td><span class="Badge Badge-variant-soft Badge-size-1">Badge</span></td>
      <td><span class="Badge Badge-variant-soft Badge-size-2">Badge</span></td>
      <td><span class="Badge Badge-variant-soft Badge-size-3">Badge</span></td>
      <td><span class="Badge Badge-variant-soft Badge-size-1" data-accent-color="green">Badge</span></td>
      <td><span class="Badge Badge-variant-soft Badge-size-2" data-accent-color="green">Badge</span></td>
      <td><span class="Badge Badge-variant-soft Badge-size-3" data-accent-color="green">Badge</span></td>
      <td><span class="Badge Badge-variant-soft Badge-size-1" data-accent-color="orange">Badge</span></td>
      <td><span class="Badge Badge-variant-soft Badge-size-2" data-accent-color="orange">Badge</span></td>
      <td><span class="Badge Badge-variant-soft Badge-size-3" data-accent-color="orange">Badge</span></td>
      <td><span class="Badge Badge-variant-soft Badge-size-1" data-accent-color="red">Badge</span></td>
      <td><span class="Badge Badge-variant-soft Badge-size-2" data-accent-color="red">Badge</span></td>
      <td><span class="Badge Badge-variant-soft Badge-size-3" data-accent-color="red">Badge</span></td>
    </tr>
    <tr>
      <th><code>surface</code></th>
      <td><span class="Badge Badge-variant-surface Badge-size-1">Badge</span></td>
      <td><span class="Badge Badge-variant-surface Badge-size-2">Badge</span></td>
      <td><span class="Badge Badge-variant-surface Badge-size-3">Badge</span></td>
      <td><span class="Badge Badge-variant-surface Badge-size-1" data-accent-color="green">Badge</span></td>
      <td><span class="Badge Badge-variant-surface Badge-size-2" data-accent-color="green">Badge</span></td>
      <td><span class="Badge Badge-variant-surface Badge-size-3" data-accent-color="green">Badge</span></td>
      <td><span class="Badge Badge-variant-surface Badge-size-1" data-accent-color="orange">Badge</span></td>
      <td><span class="Badge Badge-variant-surface Badge-size-2" data-accent-color="orange">Badge</span></td>
      <td><span class="Badge Badge-variant-surface Badge-size-3" data-accent-color="orange">Badge</span></td>
      <td><span class="Badge Badge-variant-surface Badge-size-1" data-accent-color="red">Badge</span></td>
      <td><span class="Badge Badge-variant-surface Badge-size-2" data-accent-color="red">Badge</span></td>
      <td><span class="Badge Badge-variant-surface Badge-size-3" data-accent-color="red">Badge</span></td>
    </tr>
    <tr>
      <th><code>outline</code></th>
      <td><span class="Badge Badge-variant-outline Badge-size-1">Badge</span></td>
      <td><span class="Badge Badge-variant-outline Badge-size-2">Badge</span></td>
      <td><span class="Badge Badge-variant-outline Badge-size-3">Badge</span></td>
      <td><span class="Badge Badge-variant-outline Badge-size-1" data-accent-color="green">Badge</span></td>
      <td><span class="Badge Badge-variant-outline Badge-size-2" data-accent-color="green">Badge</span></td>
      <td><span class="Badge Badge-variant-outline Badge-size-3" data-accent-color="green">Badge</span></td>
      <td><span class="Badge Badge-variant-outline Badge-size-1" data-accent-color="orange">Badge</span></td>
      <td><span class="Badge Badge-variant-outline Badge-size-2" data-accent-color="orange">Badge</span></td>
      <td><span class="Badge Badge-variant-outline Badge-size-3" data-accent-color="orange">Badge</span></td>
      <td><span class="Badge Badge-variant-outline Badge-size-1" data-accent-color="red">Badge</span></td>
      <td><span class="Badge Badge-variant-outline Badge-size-2" data-accent-color="red">Badge</span></td>
      <td><span class="Badge Badge-variant-outline Badge-size-3" data-accent-color="red">Badge</span></td>
    </tr>
  </tbody>
</table>
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
<%
props = Components::Badge.literal_properties
%>
<table class="lookbook-table">
  <thead>
    <tr>
      <th>Color</th>
      <% props[:color].type.each do |color| %>
        <th colspan="<%= props[:size].type.to_a.size %>"><code><%= color || :default %></code></th>
      <% end %>
    </tr>
    <tr>
      <th>Size</th>
      <% props[:color].type.each do %>
        <% props[:size].type.each do |size| %>
          <th><code><%= size %></code></th>
        <% end %>
      <% end %>
    </tr>
  </thead>
  <tbody>
    <% props[:variant].type.each do |variant| %>
      <tr>
        <th><code><%= variant %></code></th>
        <% props[:color].type.each do |color| %>
          <% props[:size].type.each do |size| %>
            <td><%= render Components::Badge.new(variant:, size:, color:) { "Badge" } %></td>
          <% end %>
        <% end %>
      </tr>
    <% end %>
  </tbody>
</table>

No notes provided.

No params configured.