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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<div class="flex flex-col gap-10">
  <div>
    <p class="text-sm font-medium text-theme-9 mb-3">Default</p>
    <div class="midwest-accordion">
      <details name="accordion-fdb8" class="midwest-accordion-item">
        <summary class="accordion-trigger">
          <span class="accordion-title">Bordered container</span>
          <span class="accordion-chevron" aria-hidden="true">
            <div class="midwest-icon ">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chevron down"><title>Chevron down</title>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"></path></svg>
              </div>
            </div>
          </span>
        </summary>
        <div class="accordion-panel">
          The default variant wraps all items in a single rounded, bordered card.
        </div>
      </details>
      <details name="accordion-fdb8" class="midwest-accordion-item">
        <summary class="accordion-trigger">
          <span class="accordion-title">Dividers between items</span>
          <span class="accordion-chevron" aria-hidden="true">
            <div class="midwest-icon ">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chevron down"><title>Chevron down</title>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"></path></svg>
              </div>
            </div>
          </span>
        </summary>
        <div class="accordion-panel">
          Each item is separated by a 1px border matching the theme color.
        </div>
      </details>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium text-theme-9 mb-3">Flush</p>
    <div class="midwest-accordion variant-flush">
      <details name="accordion-fdc0" class="midwest-accordion-item">
        <summary class="accordion-trigger">
          <span class="accordion-title">No outer border</span>
          <span class="accordion-chevron" aria-hidden="true">
            <div class="midwest-icon ">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chevron down"><title>Chevron down</title>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"></path></svg>
              </div>
            </div>
          </span>
        </summary>
        <div class="accordion-panel">
          The flush variant removes the outer container border and border-radius.
          Useful for embedding inside a card or panel.
        </div>
      </details>
      <details name="accordion-fdc0" class="midwest-accordion-item">
        <summary class="accordion-trigger">
          <span class="accordion-title">Dividers only</span>
          <span class="accordion-chevron" aria-hidden="true">
            <div class="midwest-icon ">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chevron down"><title>Chevron down</title>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"></path></svg>
              </div>
            </div>
          </span>
        </summary>
        <div class="accordion-panel">
          Items are still separated by dividers; horizontal padding is removed from triggers and panels.
        </div>
      </details>
    </div>
  </div>
  <div>
    <p class="text-sm font-medium text-theme-9 mb-3">Separated</p>
    <div class="midwest-accordion variant-separated">
      <details name="accordion-fdc8" class="midwest-accordion-item">
        <summary class="accordion-trigger">
          <span class="accordion-title">Each item is its own card</span>
          <span class="accordion-chevron" aria-hidden="true">
            <div class="midwest-icon ">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chevron down"><title>Chevron down</title>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"></path></svg>
              </div>
            </div>
          </span>
        </summary>
        <div class="accordion-panel">
          The separated variant renders each item as an independent bordered element with a gap between them.
        </div>
      </details>
      <details name="accordion-fdc8" class="midwest-accordion-item">
        <summary class="accordion-trigger">
          <span class="accordion-title">Works great in grids</span>
          <span class="accordion-chevron" aria-hidden="true">
            <div class="midwest-icon ">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chevron down"><title>Chevron down</title>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"></path></svg>
              </div>
            </div>
          </span>
        </summary>
        <div class="accordion-panel">
          Because items are independent, they can be used in more flexible layout contexts.
        </div>
      </details>
    </div>
  </div>
</div>
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
<div class="flex flex-col gap-10">
  <div>
    <p class="text-sm font-medium text-theme-9 mb-3">Default</p>
    <%= midwest_accordion do |a| %>
      <% a.with_item("Bordered container") do %>
        The default variant wraps all items in a single rounded, bordered card.
      <% end %>
      <% a.with_item("Dividers between items") do %>
        Each item is separated by a 1px border matching the theme color.
      <% end %>
    <% end %>
  </div>
  <div>
    <p class="text-sm font-medium text-theme-9 mb-3">Flush</p>
    <%= midwest_accordion(variant: :flush) do |a| %>
      <% a.with_item("No outer border") do %>
        The flush variant removes the outer container border and border-radius.
        Useful for embedding inside a card or panel.
      <% end %>
      <% a.with_item("Dividers only") do %>
        Items are still separated by dividers; horizontal padding is removed from triggers and panels.
      <% end %>
    <% end %>
  </div>
  <div>
    <p class="text-sm font-medium text-theme-9 mb-3">Separated</p>
    <%= midwest_accordion(variant: :separated) do |a| %>
      <% a.with_item("Each item is its own card") do %>
        The separated variant renders each item as an independent bordered element with a gap between them.
      <% end %>
      <% a.with_item("Works great in grids") do %>
        Because items are independent, they can be used in more flexible layout contexts.
      <% end %>
    <% end %>
  </div>
</div>

Variants

Three visual styles: default (bordered), flush (no outer border), and separated (each item is its own card).

No params configured.

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

Accessibility

Figma embed for Accordion/variants

Annotate a preview to embed its Figma design here:

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