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
<div class="Polaris-LegacyCard Polaris-LegacyCard--withoutTitle"> <div class="Polaris-ResourceList__ResourceListWrapper"> <ul class="Polaris-ResourceList"> <li data-controller="polaris-resource-item" class="Polaris-ResourceItem__ListItem"> <div class="Polaris-ResourceItem__ItemWrapper"> <div data-action="click->polaris-resource-item#open" style="cursor: default;" class="Polaris-ResourceItem"> <a class="Polaris-ResourceItem__Link" tabindex="0" href="customers/341" data-polaris-unstyled="true" data-polaris-resource-item-target="link"></a> <div style="--pc-box-border-color: transparent;--pc-box-border-style: solid;--pc-box-padding-block-end-xs: var(--p-space-3);--pc-box-padding-block-start-xs: var(--p-space-3);--pc-box-padding-inline-end-xs: var(--p-space-3);--pc-box-padding-inline-start-xs: var(--p-space-3);position: relative;z-index: var(--pc-resource-item-content-stacking-order)" class="Polaris-Box"> <div style="--pc-horizontal-grid-grid-template-columns-xs: 1fr auto" class="Polaris-HorizontalGrid"> <div style="--pc-horizontal-grid-gap-xs: var(--p-space-3);--pc-horizontal-grid-grid-template-columns-xs: auto 1fr" class="Polaris-HorizontalGrid"> <div style="--pc-horizontal-stack-align: ;--pc-horizontal-stack-wrap: wrap;--pc-horizontal-stack-gap-xs: var(--p-space-3)" class="Polaris-HorizontalStack"> <span role="img" aria-label="Mae Jemison" class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--shapeRound"> <span class="Polaris-Avatar__Initials"> <svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40"> <path fill="currentColor" d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"></path> </svg> </span> </span> </div> <div style="--pc-horizontal-stack-align: ;--pc-horizontal-stack-block-align: center;--pc-horizontal-stack-wrap: wrap;--pc-horizontal-stack-gap-xs: var(--p-space-2)" class="Polaris-HorizontalStack"> <div style="--pc-box-border-color: transparent;--pc-box-border-style: solid;--pc-box-padding-block-end-xs: var(--p-space-0);--pc-box-padding-block-start-xs: var(--p-space-0);--pc-box-padding-inline-end-xs: var(--p-space-2);--pc-box-padding-inline-start-xs: var(--p-space-0);--pc-box-width: 100%" class="Polaris-Box"> <h3> <span class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--semibold"> Mae Jemison </span> </h3> <div>Decatur, USA</div> </div> </div> </div> <div class="Polaris-ResourceItem__Actions"> <div data-buttongroup-segmented="true" class="Polaris-ButtonGroup Polaris-ButtonGroup--segmented"> <div class="Polaris-ButtonGroup__Item"><a href="customers/341/latest-order" data-controller="polaris-button" class="Polaris-Button Polaris-Button--sizeSlim"> <span class="Polaris-Button__Content"> <div class="Polaris-Button__Text"> View latest order </div> </span> </a></div> </div> </div> </div> </div> </div> </div> </li> <li data-controller="polaris-resource-item" class="Polaris-ResourceItem__ListItem"> <div class="Polaris-ResourceItem__ItemWrapper"> <div data-action="click->polaris-resource-item#open" style="cursor: default;" class="Polaris-ResourceItem"> <a class="Polaris-ResourceItem__Link" tabindex="0" href="customers/256" data-polaris-unstyled="true" data-polaris-resource-item-target="link"></a> <div style="--pc-box-border-color: transparent;--pc-box-border-style: solid;--pc-box-padding-block-end-xs: var(--p-space-3);--pc-box-padding-block-start-xs: var(--p-space-3);--pc-box-padding-inline-end-xs: var(--p-space-3);--pc-box-padding-inline-start-xs: var(--p-space-3);position: relative;z-index: var(--pc-resource-item-content-stacking-order)" class="Polaris-Box"> <div style="--pc-horizontal-grid-grid-template-columns-xs: 1fr auto" class="Polaris-HorizontalGrid"> <div style="--pc-horizontal-grid-gap-xs: var(--p-space-3);--pc-horizontal-grid-grid-template-columns-xs: auto 1fr" class="Polaris-HorizontalGrid"> <div style="--pc-horizontal-stack-align: ;--pc-horizontal-stack-wrap: wrap;--pc-horizontal-stack-gap-xs: var(--p-space-3)" class="Polaris-HorizontalStack"> <span role="img" aria-label="Ellen Ochoa" class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--shapeRound"> <span class="Polaris-Avatar__Initials"> <svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40"> <path fill="currentColor" d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"></path> </svg> </span> </span> </div> <div style="--pc-horizontal-stack-align: ;--pc-horizontal-stack-block-align: center;--pc-horizontal-stack-wrap: wrap;--pc-horizontal-stack-gap-xs: var(--p-space-2)" class="Polaris-HorizontalStack"> <div style="--pc-box-border-color: transparent;--pc-box-border-style: solid;--pc-box-padding-block-end-xs: var(--p-space-0);--pc-box-padding-block-start-xs: var(--p-space-0);--pc-box-padding-inline-end-xs: var(--p-space-2);--pc-box-padding-inline-start-xs: var(--p-space-0);--pc-box-width: 100%" class="Polaris-Box"> <h3> <span class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--semibold"> Ellen Ochoa </span> </h3> <div>Los Angeles, USA</div> </div> </div> </div> <div class="Polaris-ResourceItem__Actions"> <div data-buttongroup-segmented="true" class="Polaris-ButtonGroup Polaris-ButtonGroup--segmented"> <div class="Polaris-ButtonGroup__Item"><a href="customers/256/latest-order" data-controller="polaris-button" class="Polaris-Button Polaris-Button--sizeSlim"> <span class="Polaris-Button__Content"> <div class="Polaris-Button__Text"> View latest order </div> </span> </a></div> </div> </div> </div> </div> </div> </div> </li> </ul> </div></div>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
<% items = [ { url: 'customers/341', name: 'Mae Jemison', location: 'Decatur, USA', latest_order_url: 'customers/341/latest-order', }, { url: 'customers/256', name: 'Ellen Ochoa', location: 'Los Angeles, USA', latest_order_url: 'customers/256/latest-order', },] %><%= polaris_card(sectioned: false) do %> <%= polaris_resource_list do %> <% items.each do |item| %> <% actions = item[:latest_order_url] ? [ { content: 'View latest order', url: item[:latest_order_url], } ] : nil %> <%= polaris_resource_item(url: item[:url]) do |c| %> <% c.with_media do %> <%= polaris_avatar(customer: true, name: item[:name]) %> <% end %> <% c.with_shortcut_actions do |shortcut_action| %> <% actions.each do |action| %> <% shortcut_action.with_button(url: action[:url], content: action[:content]) %> <% end %> <% end %> <h3> <%= polaris_text_style(variation: :strong) { item[:name] } %> </h3> <div><%= item[:location] %></div> <% end %> <% end %> <% end %><% end %>No notes provided.
No params configured.