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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<ol class="midwest-timeline is-compact" aria-label="Account activity">
  <li class="midwest-timeline-item">
    <div class="midwest-timeline-item-connector" aria-hidden="true">
      <span class="midwest-timeline-item-dot">
        <span class="midwest-avatar size-sm theme-blue shape-circle" title="You tabbed on an Avatar for Will Riley">
          <div class="letter" title="Will Riley">
            WR
          </div>
        </span>
      </span>
      <span class="midwest-timeline-item-line"></span>
    </div>
    <div class="midwest-timeline-item-card">
      <div style="display: flex; align-items: baseline; gap: 0.375rem; flex-wrap: wrap;">
        <span class="midwest-badge size-default theme-green">
          <span class="value">New account</span>
        </span>
        <strong style="font-size: 0.875rem;">Account created</strong>
      </div>
      <p style="margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--gray-8);">Mar 12 · signed up via Google OAuth</p>
    </div>
  </li>
  <li class="midwest-timeline-item">
    <div class="midwest-timeline-item-connector" aria-hidden="true">
      <span class="midwest-timeline-item-dot">
        <span class="midwest-avatar size-sm theme-green shape-circle" title="You tabbed on an Avatar for Amy Kim">
          <div class="letter" title="Amy Kim">
            AK
          </div>
        </span>
      </span>
      <span class="midwest-timeline-item-line"></span>
    </div>
    <div class="midwest-timeline-item-card">
      <div style="display: flex; align-items: baseline; gap: 0.375rem; flex-wrap: wrap;">
        <span class="midwest-badge size-default theme-primary">
          <span class="value">Profile</span>
        </span>
        <strong style="font-size: 0.875rem;">Profile updated</strong>
      </div>
      <p style="margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--gray-8);">Mar 14 · changed display name and avatar</p>
    </div>
  </li>
  <li class="midwest-timeline-item">
    <div class="midwest-timeline-item-connector" aria-hidden="true">
      <span class="midwest-timeline-item-dot">
        <span class="midwest-avatar size-sm theme-blue shape-circle" title="You tabbed on an Avatar for Will Riley">
          <div class="letter" title="Will Riley">
            WR
          </div>
        </span>
      </span>
      <span class="midwest-timeline-item-line"></span>
    </div>
    <div class="midwest-timeline-item-card">
      <div style="display: flex; align-items: baseline; gap: 0.375rem; flex-wrap: wrap;">
        <span class="midwest-badge size-default theme-green">
          <span class="value">Billing</span>
        </span>
        <strong style="font-size: 0.875rem;">Subscription upgraded</strong>
      </div>
      <p style="margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--gray-8);">Mar 20 · Free → Pro plan</p>
    </div>
  </li>
  <li class="midwest-timeline-item">
    <div class="midwest-timeline-item-connector" aria-hidden="true">
      <span class="midwest-timeline-item-dot">
        <span class="midwest-avatar size-sm theme-indigo shape-circle" title="You tabbed on an Avatar for Jake Sullivan">
          <div class="letter" title="Jake Sullivan">
            JS
          </div>
        </span>
      </span>
      <span class="midwest-timeline-item-line"></span>
    </div>
    <div class="midwest-timeline-item-card">
      <div style="display: flex; align-items: baseline; gap: 0.375rem; flex-wrap: wrap;">
        <span class="midwest-badge size-default theme-orange">
          <span class="value">Security</span>
        </span>
        <strong style="font-size: 0.875rem;">API key generated</strong>
      </div>
      <p style="margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--gray-8);">Apr 2 · key ending in •••• 9f3a</p>
    </div>
  </li>
  <li class="midwest-timeline-item">
    <div class="midwest-timeline-item-connector" aria-hidden="true">
      <span class="midwest-timeline-item-dot">
        <span class="midwest-avatar size-sm theme-blue shape-circle" title="You tabbed on an Avatar for Will Riley">
          <div class="letter" title="Will Riley">
            WR
          </div>
        </span>
      </span>
      <span class="midwest-timeline-item-line"></span>
    </div>
    <div class="midwest-timeline-item-card">
      <div style="display: flex; align-items: baseline; gap: 0.375rem; flex-wrap: wrap;">
        <span class="midwest-badge size-default theme-orange">
          <span class="value">Security</span>
        </span>
        <strong style="font-size: 0.875rem;">Password changed</strong>
      </div>
      <p style="margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--gray-8);">Apr 8 · via Security settings</p>
    </div>
  </li>
  <li class="midwest-timeline-item">
    <div class="midwest-timeline-item-connector" aria-hidden="true">
      <span class="midwest-timeline-item-dot">
        <span class="midwest-avatar size-sm theme-green shape-circle" title="You tabbed on an Avatar for Amy Kim">
          <div class="letter" title="Amy Kim">
            AK
          </div>
        </span>
      </span>
      <span class="midwest-timeline-item-line"></span>
    </div>
    <div class="midwest-timeline-item-card">
      <div style="display: flex; align-items: baseline; gap: 0.375rem; flex-wrap: wrap;">
        <span class="midwest-badge size-default theme-yellow">
          <span class="value">Admin</span>
        </span>
        <strong style="font-size: 0.875rem;">Role elevated</strong>
      </div>
      <p style="margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--gray-8);">Apr 10 · granted admin permissions by Jake S.</p>
    </div>
  </li>
</ol>
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
<%#
  Activity feed — compact layout with per-actor avatars and categorised badges.
  The avatar lives in the icon slot so it replaces the dot entirely.
  midwest_badge labels the action category; midwest_avatar identifies the actor.
%>
<% events = [
  { name: 'Will Riley',    color: :blue,   badge: ['New account',      :success], title: 'Account created',      detail: 'Mar 12 · signed up via Google OAuth' },
  { name: 'Amy Kim',       color: :green,  badge: ['Profile',          :default], title: 'Profile updated',      detail: 'Mar 14 · changed display name and avatar' },
  { name: 'Will Riley',    color: :blue,   badge: ['Billing',          :success], title: 'Subscription upgraded', detail: 'Mar 20 · Free → Pro plan' },
  { name: 'Jake Sullivan', color: :indigo, badge: ['Security',         :warning], title: 'API key generated',    detail: 'Apr 2 · key ending in •••• 9f3a' },
  { name: 'Will Riley',    color: :blue,   badge: ['Security',         :warning], title: 'Password changed',     detail: 'Apr 8 · via Security settings' },
  { name: 'Amy Kim',       color: :green,  badge: ['Admin',            :alert],   title: 'Role elevated',        detail: 'Apr 10 · granted admin permissions by Jake S.' }
] %>
<%= midwest_timeline(compact: true, label: 'Account activity') do |t| %>
  <% events.each do |evt| %>
    <% t.with_item do |item| %>
      <% item.with_icon { midwest_avatar(name: evt[:name], size: :sm, shape: :circle, color: evt[:color]) } %>
      <div style="display: flex; align-items: baseline; gap: 0.375rem; flex-wrap: wrap;">
        <%= midwest_badge(evt[:badge][0], state: evt[:badge][1]) %>
        <strong style="font-size: 0.875rem;"><%= evt[:title] %></strong>
      </div>
      <p style="margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--gray-8);"><%= evt[:detail] %></p>
    <% end %>
  <% end %>
<% end %>

Activity Feed

compact: true strips card borders and tightens spacing — ideal for dense activity logs. Per-item dot colour can be customised by passing an inline CSS custom-property override via the style attribute.

No params configured.

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

Accessibility

Figma embed for Timeline/activity_feed

Annotate a preview to embed its Figma design here:

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