Midwest Component Library v0.24.0

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
<div class="w-64">
  <div data-controller="midwest-horizontal-scroll" class="midwest-horizontal-scroll">
    <div class="flex gap-3 w-max px-1">
      <article data-controller="midwest-card" class="midwest-card p-4 shrink-0 w-32">
        <div class="wrap">
          <section>
            <p class="font-semibold">Item 1</p>
          </section>
        </div>
      </article>
        
      <article data-controller="midwest-card" class="midwest-card p-4 shrink-0 w-32">
        <div class="wrap">
          <section>
            <p class="font-semibold">Item 2</p>
          </section>
        </div>
      </article>
        
      <article data-controller="midwest-card" class="midwest-card p-4 shrink-0 w-32">
        <div class="wrap">
          <section>
            <p class="font-semibold">Item 3</p>
          </section>
        </div>
      </article>
        
      <article data-controller="midwest-card" class="midwest-card p-4 shrink-0 w-32">
        <div class="wrap">
          <section>
            <p class="font-semibold">Item 4</p>
          </section>
        </div>
      </article>
        
      <article data-controller="midwest-card" class="midwest-card p-4 shrink-0 w-32">
        <div class="wrap">
          <section>
            <p class="font-semibold">Item 5</p>
          </section>
        </div>
      </article>
        
      <article data-controller="midwest-card" class="midwest-card p-4 shrink-0 w-32">
        <div class="wrap">
          <section>
            <p class="font-semibold">Item 6</p>
          </section>
        </div>
      </article>
        
      <article data-controller="midwest-card" class="midwest-card p-4 shrink-0 w-32">
        <div class="wrap">
          <section>
            <p class="font-semibold">Item 7</p>
          </section>
        </div>
      </article>
        
      <article data-controller="midwest-card" class="midwest-card p-4 shrink-0 w-32">
        <div class="wrap">
          <section>
            <p class="font-semibold">Item 8</p>
          </section>
        </div>
      </article>
        
      <article data-controller="midwest-card" class="midwest-card p-4 shrink-0 w-32">
        <div class="wrap">
          <section>
            <p class="font-semibold">Item 9</p>
          </section>
        </div>
      </article>
        
      <article data-controller="midwest-card" class="midwest-card p-4 shrink-0 w-32">
        <div class="wrap">
          <section>
            <p class="font-semibold">Item 10</p>
          </section>
        </div>
      </article>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
<div class="w-64">
  <%= midwest_horizontal_scroll(shadows: false) do %>
    <div class="flex gap-3 w-max px-1">
      <% 10.times do |i| %>
        <%= midwest_card(class: 'p-4 shrink-0 w-32') do %>
          <p class="font-semibold">Item <%= i + 1 %></p>
        <% end %>
      <% end %>
    </div>
  <% end %>
</div>

No Shadows

The edge shadows can be disabled with shadows: false for cases where the container background makes fading impractical.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Horizontal Scroll/no_shadows

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."