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
<article data-controller="midwest-card" class="midwest-card w-72">
  <div class="wrap">
    <header class="!p-0 overflow-hidden">      
      <div class="midwest-skeleton is-animated h-40 w-full rounded-none"></div>
    </header>
    <section>
      <div class="flex flex-col gap-3">
        <div class="midwest-skeleton is-animated h-5 w-3/4"></div>
        <div class="midwest-skeleton__lines is-animated">
          <div class="midwest-skeleton__line "></div>
          <div class="midwest-skeleton__line "></div>
          <div class="midwest-skeleton__line is-short"></div>
        </div>
      </div>
    </section>
    <footer class="flex gap-2">      
      <div class="midwest-skeleton is-animated h-9 w-20"></div>
      <div class="midwest-skeleton is-animated h-9 w-20"></div>
    </footer>
  </div>
</article>
1
2
3
4
5
6
7
8
9
10
11
12
13
<%= midwest_card(class: "w-72") do |card| %>
  <% card.with_header(class: "!p-0 overflow-hidden") do %>
    <%= midwest_skeleton(class: "h-40 w-full rounded-none") %>
  <% end %>
  <div class="flex flex-col gap-3">
    <%= midwest_skeleton(class: "h-5 w-3/4") %>
    <%= midwest_skeleton(lines: 3) %>
  </div>
  <% card.with_footer(class: "flex gap-2") do %>
    <%= midwest_skeleton(class: "h-9 w-20") %>
    <%= midwest_skeleton(class: "h-9 w-20") %>
  <% end %>
<% end %>

Card

A card-shaped placeholder suitable for content grid loading states.

No params configured.

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

Accessibility

Figma embed for Skeleton/card

Annotate a preview to embed its Figma design here:

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