x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<article data-controller="midwest-card" class="midwest-card"> <div class="wrap"> <header> <div class="flex items-center justify-between"> <h4>Header</h4> <button class="bg-theme-6 hover:bg-theme-7 text-white font-bold py-1 px-3 rounded">Neat</button> </div> </header> <section> <p>Section content goes here.</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></article>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%= midwest_card do |card| %> <% card.with_header do %> <div class="flex items-center justify-between"> <h4>Header</h4> <button class="bg-theme-6 hover:bg-theme-7 text-white font-bold py-1 px-3 rounded">Neat</button> </div> <% end %> <p>Section content goes here.</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 %><% end %>Default
This is the minimum code needed to make a card.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Card/default
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."