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
<article data-controller="midwest-card" class="midwest-card flippable"> <div class="wrap"> <div class="front" data-midwest-card-target="front"> <header> <div class="flex items-center justify-between"> <h4>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 me!</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>Front section content.</p> </section> <footer> <div class="flex items-center justify-between"> <h4>Footer</h4> <button class="bg-theme-6 hover:bg-theme-7 text-white font-bold py-1 px-3 rounded">Neat</button> </div> </footer> </div> <div class="back" data-midwest-card-target="back"> <header> <div class="flex items-center justify-between"> <h4>Back 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 me 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> <h4>Back Section</h4> <h4>Back Section</h4> <h4>Back Section</h4> <h4>Back Section</h4> <button class="bg-theme-6 hover:bg-theme-7 text-white font-bold py-1 px-3 rounded">Neat</button> </section> <footer> <div class="flex items-center justify-between"> <h4>Back Footer</h4> <button class="bg-theme-6 hover:bg-theme-7 text-white font-bold py-1 px-3 rounded">Neat</button> </div> </footer> </div> </div></article>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
<%= midwest_card do |card| %> <% card.with_header do %> <div class="flex items-center justify-between"> <h4>Header</h4> <%= midwest_button "Flip me!", as: :button, **card.flippable_action %> </div> <% end %> <p>Front section content.</p> <% card.with_footer do %> <div class="flex items-center justify-between"> <h4>Footer</h4> <button class="bg-theme-6 hover:bg-theme-7 text-white font-bold py-1 px-3 rounded">Neat</button> </div> <% end %> <% card.with_back_header do %> <div class="flex items-center justify-between"> <h4>Back Header</h4> <%= midwest_button "Flip me back!", as: :button, **card.flippable_action %> </div> <% end %> <% card.with_back_content do %> <h4>Back Section</h4> <h4>Back Section</h4> <h4>Back Section</h4> <h4>Back Section</h4> <button class="bg-theme-6 hover:bg-theme-7 text-white font-bold py-1 px-3 rounded">Neat</button> <% end %> <% card.with_back_footer do %> <div class="flex items-center justify-between"> <h4>Back Footer</h4> <button class="bg-theme-6 hover:bg-theme-7 text-white font-bold py-1 px-3 rounded">Neat</button> </div> <% end %><% end %>No notes provided.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Card/flippable
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."