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
<article data-controller="midwest-card" class="midwest-card flippable flipped">
  <div class="wrap">
    <div class="front" data-midwest-card-target="front">
      <header>    
        <div class="flex items-center justify-between">
          <h4>Front Header</h4>
          <button data-action="midwest-card#flip" class="midwest-button variant-default size-default theme-primary" name="button">
            <span class="midwest-button-content">Flip to back</span>
            <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
              <div class="midwest-loading-icon-inner">
                <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                  <circle cx="15" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                    <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="105" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                </svg>
              </div>
            </div>
          </button>
        </div>
      </header>
      <section>
        <p>This is the front — the card starts showing the back.</p>
      </section>
    </div>
    <div class="back" data-midwest-card-target="back">
      <header>    
        <div class="flex items-center justify-between">
          <h4>Back Header (shown first)</h4>
          <button data-action="midwest-card#flip" class="midwest-button variant-default size-default theme-primary" name="button">
            <span class="midwest-button-content">Flip to front</span>
            <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
              <div class="midwest-loading-icon-inner">
                <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
                <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                  <circle cx="15" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                    <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                  <circle cx="105" cy="15" r="15">
                    <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                    <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                  </circle>
                </svg>
              </div>
            </div>
          </button>
        </div>
      </header>
      <section>    
        <p>This back side is visible on initial render because <code>flipped: true</code> was set.</p>
      </section>
    </div>
  </div>
</article>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%= midwest_card flipped: true do |card| %>
  <% card.with_header do %>
    <div class="flex items-center justify-between">
      <h4>Front Header</h4>
      <%= midwest_button "Flip to back", as: :button, **card.flippable_action %>
    </div>
  <% end %>
  <p>This is the front — the card starts showing the back.</p>
  <% card.with_back_header do %>
    <div class="flex items-center justify-between">
      <h4>Back Header (shown first)</h4>
      <%= midwest_button "Flip to front", as: :button, **card.flippable_action %>
    </div>
  <% end %>
  <% card.with_back_content do %>
    <p>This back side is visible on initial render because <code>flipped: true</code> was set.</p>
  <% end %>
<% end %>

Flipped

Pass flipped: true to render the card showing its back face on initial load. The user can flip to the front via the flip action.

No params configured.

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

Accessibility

Figma embed for Card/flipped

Annotate a preview to embed its Figma design here:

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