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
<article data-controller="midwest-card" class="midwest-card horizontal">
  <div class="wrap">
    <header>    <img class="w-full h-full object-cover object-center" height="600" width="400" src="https://placekitten.com/600/400">
    </header>
    <section>
      <div data-controller="midwest-prose" class="midwest-prose prose">
        <h1 class="font-bold text-4xl">Kitties</h1>
        <p class="mb-4">Check em out</p>
        <button class="bg-theme-6 hover:bg-theme-7 text-white font-bold py-1 px-3 rounded">Neat</button>
      </div>
    </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
16
<%= midwest_card(horizontal: true) do |card| %>
  <% card.with_header do %>
    <img class="w-full h-full object-cover object-center" height="600" width="400" src="https://placekitten.com/600/400">
  <% end %>
  <%= midwest_prose do %>
    <h1 class="font-bold text-4xl">Kitties</h1>
    <p class="mb-4">Check em out</p>
    <button class="bg-theme-6 hover:bg-theme-7 text-white font-bold py-1 px-3 rounded">Neat</button>
  <% end %>
  <% 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 %>

No notes provided.

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/horizontal

Annotate a preview to embed its Figma design here:

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