@adia-ai/a2ui-corpus 0.7.20 → 0.7.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/chunk-embeddings.json +1 -1
- package/chunks/_index.json +2130 -807
- package/chunks/admin-shell-rounded-borderless.json +280 -0
- package/chunks/admin-shell-standard.json +303 -0
- package/chunks/avatar-stack-overflow.json +124 -0
- package/chunks/bulk-selection-actions-bar.json +161 -0
- package/chunks/card-with-empty-state.json +96 -0
- package/chunks/card-with-form.json +143 -0
- package/chunks/card-with-sparkline.json +90 -0
- package/chunks/card-with-stat-kpi.json +95 -0
- package/chunks/col-form-stack.json +93 -0
- package/chunks/col-heading-body-action.json +79 -0
- package/chunks/col-stat-label.json +72 -0
- package/chunks/cta-banner-centered.json +102 -0
- package/chunks/drawer-record-detail.json +44 -0
- package/chunks/drawer-with-create-form.json +43 -0
- package/chunks/feature-grid-three-cards.json +187 -0
- package/chunks/grid-2col-entry-cards.json +158 -0
- package/chunks/grid-kpi-4col.json +164 -0
- package/chunks/grid-responsive-kpi.json +165 -0
- package/chunks/key-value-detail-list.json +172 -0
- package/chunks/logo-cloud-trusted-by.json +235 -0
- package/chunks/marketing-page-shell.json +45 -11
- package/chunks/order-confirmation-success-card.json +177 -0
- package/chunks/rating-stars-review-summary.json +258 -0
- package/chunks/responsive-shell-sidebar.json +79 -0
- package/chunks/row-action-cluster.json +54 -0
- package/chunks/row-avatar-name-role.json +71 -0
- package/chunks/row-icon-label.json +52 -0
- package/chunks/row-spread-label-value.json +54 -0
- package/chunks/row-wrap-tags.json +112 -0
- package/chunks/stack-avatar-badge-overlay.json +53 -0
- package/chunks/stack-image-shimmer.json +51 -0
- package/chunks/stats-band-big-numbers.json +175 -0
- package/chunks/subscription-status-renewal-card.json +229 -0
- package/chunks/table-empty-state.json +116 -0
- package/chunks/table-toolbar-no-search.json +38 -0
- package/chunks/table-toolbar-with-table.json +231 -0
- package/chunks/table-with-toolbar-card.json +76 -0
- package/chunks/testimonial-pull-quote.json +129 -0
- package/chunks/usage-quota-meter-card.json +217 -0
- package/package.json +1 -1
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "feature-grid-three-cards",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "grid-ui",
|
|
5
|
+
"page": "/catalog/page-shells/app/marketing-page/marketing-page.contents.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"columns": "1 3@md",
|
|
10
|
+
"gap": "4"
|
|
11
|
+
},
|
|
12
|
+
"html": "<grid-ui columns=\"1 3@md\" gap=\"4\">\n <card-ui>\n <header><h3>94+ Primitives</h3></header>\n <section><text-ui color=\"subtle\">Battle-tested components for every surface</text-ui></section>\n </card-ui>\n <card-ui>\n <header><h3>Gen-UI Pipeline</h3></header>\n <section><text-ui color=\"subtle\">Generate UIs from natural language</text-ui></section>\n </card-ui>\n <card-ui>\n <header><h3>A2UI Runtime</h3></header>\n <section><text-ui color=\"subtle\">Agent-to-UI JSON with live rendering</text-ui></section>\n </card-ui>\n </grid-ui>",
|
|
13
|
+
"source": "catalog/page-shells/app/marketing-page/marketing-page.contents.html",
|
|
14
|
+
"metadata": {
|
|
15
|
+
"domain": "marketing",
|
|
16
|
+
"description": "Three-card feature grid — a responsive 1-up / 3-up grid of plain feature cards, each a bold heading over a one-line subtitle, no icons. The marketing 'three key features / benefits / highlights' row that sits below a landing hero.",
|
|
17
|
+
"keywords": [
|
|
18
|
+
"feature",
|
|
19
|
+
"grid",
|
|
20
|
+
"three",
|
|
21
|
+
"cards",
|
|
22
|
+
"columns",
|
|
23
|
+
"marketing",
|
|
24
|
+
"landing",
|
|
25
|
+
"features",
|
|
26
|
+
"benefits",
|
|
27
|
+
"highlights",
|
|
28
|
+
"value",
|
|
29
|
+
"props",
|
|
30
|
+
"selling",
|
|
31
|
+
"points",
|
|
32
|
+
"card",
|
|
33
|
+
"heading",
|
|
34
|
+
"subtitle",
|
|
35
|
+
"product",
|
|
36
|
+
"capabilities",
|
|
37
|
+
"responsive",
|
|
38
|
+
"3-up",
|
|
39
|
+
"grid",
|
|
40
|
+
"showcase",
|
|
41
|
+
"what",
|
|
42
|
+
"you",
|
|
43
|
+
"get",
|
|
44
|
+
"features",
|
|
45
|
+
"section",
|
|
46
|
+
"no",
|
|
47
|
+
"icons"
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
"captured_at": "2026-06-10T19:45:40.486Z",
|
|
51
|
+
"template": [
|
|
52
|
+
{
|
|
53
|
+
"id": "text",
|
|
54
|
+
"component": "Text",
|
|
55
|
+
"variant": "heading",
|
|
56
|
+
"textContent": "94+ Primitives"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"id": "header",
|
|
60
|
+
"component": "Header",
|
|
61
|
+
"children": [
|
|
62
|
+
"text"
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"id": "text-2",
|
|
67
|
+
"component": "Text",
|
|
68
|
+
"color": "subtle",
|
|
69
|
+
"textContent": "Battle-tested components for every surface"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"id": "section",
|
|
73
|
+
"component": "Section",
|
|
74
|
+
"children": [
|
|
75
|
+
"column"
|
|
76
|
+
]
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"id": "column",
|
|
80
|
+
"component": "Column",
|
|
81
|
+
"children": [
|
|
82
|
+
"text-2"
|
|
83
|
+
]
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"id": "card",
|
|
87
|
+
"component": "Card",
|
|
88
|
+
"children": [
|
|
89
|
+
"header",
|
|
90
|
+
"section"
|
|
91
|
+
]
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"id": "text-3",
|
|
95
|
+
"component": "Text",
|
|
96
|
+
"variant": "heading",
|
|
97
|
+
"textContent": "Gen-UI Pipeline"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"id": "header-2",
|
|
101
|
+
"component": "Header",
|
|
102
|
+
"children": [
|
|
103
|
+
"text-3"
|
|
104
|
+
]
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"id": "text-4",
|
|
108
|
+
"component": "Text",
|
|
109
|
+
"color": "subtle",
|
|
110
|
+
"textContent": "Generate UIs from natural language"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"id": "section-2",
|
|
114
|
+
"component": "Section",
|
|
115
|
+
"children": [
|
|
116
|
+
"column-2"
|
|
117
|
+
]
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"id": "column-2",
|
|
121
|
+
"component": "Column",
|
|
122
|
+
"children": [
|
|
123
|
+
"text-4"
|
|
124
|
+
]
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"id": "card-2",
|
|
128
|
+
"component": "Card",
|
|
129
|
+
"children": [
|
|
130
|
+
"header-2",
|
|
131
|
+
"section-2"
|
|
132
|
+
]
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"id": "text-5",
|
|
136
|
+
"component": "Text",
|
|
137
|
+
"variant": "heading",
|
|
138
|
+
"textContent": "A2UI Runtime"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"id": "header-3",
|
|
142
|
+
"component": "Header",
|
|
143
|
+
"children": [
|
|
144
|
+
"text-5"
|
|
145
|
+
]
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"id": "text-6",
|
|
149
|
+
"component": "Text",
|
|
150
|
+
"color": "subtle",
|
|
151
|
+
"textContent": "Agent-to-UI JSON with live rendering"
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"id": "section-3",
|
|
155
|
+
"component": "Section",
|
|
156
|
+
"children": [
|
|
157
|
+
"column-3"
|
|
158
|
+
]
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"id": "column-3",
|
|
162
|
+
"component": "Column",
|
|
163
|
+
"children": [
|
|
164
|
+
"text-6"
|
|
165
|
+
]
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"id": "card-3",
|
|
169
|
+
"component": "Card",
|
|
170
|
+
"children": [
|
|
171
|
+
"header-3",
|
|
172
|
+
"section-3"
|
|
173
|
+
]
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"id": "root",
|
|
177
|
+
"component": "Grid",
|
|
178
|
+
"columns": "1 3@md",
|
|
179
|
+
"gap": "4",
|
|
180
|
+
"children": [
|
|
181
|
+
"card",
|
|
182
|
+
"card-2",
|
|
183
|
+
"card-3"
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
]
|
|
187
|
+
}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "grid-2col-entry-cards",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "div",
|
|
5
|
+
"page": "/packages/web-components/components/grid/grid.examples.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-artifact-item": "",
|
|
10
|
+
"data-artifact-label": "2-column entry cards"
|
|
11
|
+
},
|
|
12
|
+
"html": "<grid-ui columns=\"1 2@sm\" gap=\"4\">\n <card-ui>\n <header>\n <h3>Quick start</h3>\n <tag-ui slot=\"action\" size=\"sm\" variant=\"success\">~1 min</tag-ui>\n </header>\n <section><p>Paste 3 lines into any HTML file. No install required.</p></section>\n </card-ui>\n <card-ui>\n <header>\n <h3>npm + Vite</h3>\n <tag-ui slot=\"action\" size=\"sm\" variant=\"info\">~5 min</tag-ui>\n </header>\n <section><p>Install the package and configure for production builds.</p></section>\n </card-ui>\n </grid-ui>",
|
|
13
|
+
"source": "packages/web-components/components/grid/grid.examples.html",
|
|
14
|
+
"metadata": {
|
|
15
|
+
"domain": "layout",
|
|
16
|
+
"description": "2-column entry card grid — feature cards in a 2-up grid. Common on landing pages and onboarding flows.",
|
|
17
|
+
"keywords": [
|
|
18
|
+
"grid",
|
|
19
|
+
"2-column",
|
|
20
|
+
"cards",
|
|
21
|
+
"features",
|
|
22
|
+
"options",
|
|
23
|
+
"entry",
|
|
24
|
+
"landing",
|
|
25
|
+
"onboarding",
|
|
26
|
+
"layout"
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
"captured_at": "2026-06-10T20:25:14.783Z",
|
|
30
|
+
"template": [
|
|
31
|
+
{
|
|
32
|
+
"id": "text",
|
|
33
|
+
"component": "Text",
|
|
34
|
+
"variant": "heading",
|
|
35
|
+
"textContent": "Quick start"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"id": "text-2",
|
|
39
|
+
"component": "Text",
|
|
40
|
+
"textContent": "~1 min",
|
|
41
|
+
"variant": "body"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"id": "tag",
|
|
45
|
+
"component": "Tag",
|
|
46
|
+
"slot": "action",
|
|
47
|
+
"size": "sm",
|
|
48
|
+
"variant": "success",
|
|
49
|
+
"children": [
|
|
50
|
+
"text-2"
|
|
51
|
+
]
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"id": "header",
|
|
55
|
+
"component": "Header",
|
|
56
|
+
"children": [
|
|
57
|
+
"text",
|
|
58
|
+
"tag"
|
|
59
|
+
]
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"id": "text-3",
|
|
63
|
+
"component": "Text",
|
|
64
|
+
"variant": "body",
|
|
65
|
+
"textContent": "Paste 3 lines into any HTML file. No install required."
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"id": "section",
|
|
69
|
+
"component": "Section",
|
|
70
|
+
"children": [
|
|
71
|
+
"column"
|
|
72
|
+
]
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"id": "column",
|
|
76
|
+
"component": "Column",
|
|
77
|
+
"children": [
|
|
78
|
+
"text-3"
|
|
79
|
+
]
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"id": "card",
|
|
83
|
+
"component": "Card",
|
|
84
|
+
"children": [
|
|
85
|
+
"header",
|
|
86
|
+
"section"
|
|
87
|
+
]
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"id": "text-4",
|
|
91
|
+
"component": "Text",
|
|
92
|
+
"variant": "heading",
|
|
93
|
+
"textContent": "npm + Vite"
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"id": "text-5",
|
|
97
|
+
"component": "Text",
|
|
98
|
+
"textContent": "~5 min",
|
|
99
|
+
"variant": "body"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"id": "tag-2",
|
|
103
|
+
"component": "Tag",
|
|
104
|
+
"slot": "action",
|
|
105
|
+
"size": "sm",
|
|
106
|
+
"variant": "info",
|
|
107
|
+
"children": [
|
|
108
|
+
"text-5"
|
|
109
|
+
]
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"id": "header-2",
|
|
113
|
+
"component": "Header",
|
|
114
|
+
"children": [
|
|
115
|
+
"text-4",
|
|
116
|
+
"tag-2"
|
|
117
|
+
]
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"id": "text-6",
|
|
121
|
+
"component": "Text",
|
|
122
|
+
"variant": "body",
|
|
123
|
+
"textContent": "Install the package and configure for production builds."
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"id": "section-2",
|
|
127
|
+
"component": "Section",
|
|
128
|
+
"children": [
|
|
129
|
+
"column-2"
|
|
130
|
+
]
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"id": "column-2",
|
|
134
|
+
"component": "Column",
|
|
135
|
+
"children": [
|
|
136
|
+
"text-6"
|
|
137
|
+
]
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"id": "card-2",
|
|
141
|
+
"component": "Card",
|
|
142
|
+
"children": [
|
|
143
|
+
"header-2",
|
|
144
|
+
"section-2"
|
|
145
|
+
]
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"id": "root",
|
|
149
|
+
"component": "Grid",
|
|
150
|
+
"columns": "1 2@sm",
|
|
151
|
+
"gap": "4",
|
|
152
|
+
"children": [
|
|
153
|
+
"card",
|
|
154
|
+
"card-2"
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
]
|
|
158
|
+
}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "grid-kpi-4col",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "div",
|
|
5
|
+
"page": "/packages/web-components/components/grid/grid.examples.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-artifact-item": "",
|
|
10
|
+
"data-artifact-label": "KPI 4-column grid"
|
|
11
|
+
},
|
|
12
|
+
"html": "<grid-ui columns=\"4\" gap=\"3\">\n <card-ui><section><stat-ui label=\"Revenue\" value=\"$12,400\" change=\"+8.4%\" trend=\"up\" icon=\"currency-dollar\"></stat-ui></section></card-ui>\n <card-ui><section><stat-ui label=\"Users\" value=\"2,840\" change=\"+12%\" trend=\"up\" icon=\"users\"></stat-ui></section></card-ui>\n <card-ui><section><stat-ui label=\"Conversion\" value=\"3.2%\" change=\"-0.3%\" trend=\"down\" icon=\"chart-line\"></stat-ui></section></card-ui>\n <card-ui><section><stat-ui label=\"Avg. Order\" value=\"$87\" change=\"+$4\" trend=\"up\" icon=\"receipt\"></stat-ui></section></card-ui>\n </grid-ui>",
|
|
13
|
+
"source": "packages/web-components/components/grid/grid.examples.html",
|
|
14
|
+
"metadata": {
|
|
15
|
+
"domain": "data",
|
|
16
|
+
"description": "4-column KPI grid — stat cards in a fixed grid layout for dashboard metrics.",
|
|
17
|
+
"keywords": [
|
|
18
|
+
"grid",
|
|
19
|
+
"kpi",
|
|
20
|
+
"stat",
|
|
21
|
+
"card",
|
|
22
|
+
"dashboard",
|
|
23
|
+
"metrics",
|
|
24
|
+
"4-column",
|
|
25
|
+
"fixed",
|
|
26
|
+
"layout"
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
"captured_at": "2026-06-10T20:25:14.783Z",
|
|
30
|
+
"template": [
|
|
31
|
+
{
|
|
32
|
+
"id": "stat",
|
|
33
|
+
"component": "Stat",
|
|
34
|
+
"change": "+8.4%",
|
|
35
|
+
"icon": "currency-dollar",
|
|
36
|
+
"label": "Revenue",
|
|
37
|
+
"trend": "up",
|
|
38
|
+
"value": "$12,400"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"id": "section",
|
|
42
|
+
"component": "Section",
|
|
43
|
+
"children": [
|
|
44
|
+
"column"
|
|
45
|
+
]
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"id": "column",
|
|
49
|
+
"component": "Column",
|
|
50
|
+
"children": [
|
|
51
|
+
"stat"
|
|
52
|
+
]
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"id": "card",
|
|
56
|
+
"component": "Card",
|
|
57
|
+
"children": [
|
|
58
|
+
"section"
|
|
59
|
+
]
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"id": "stat-2",
|
|
63
|
+
"component": "Stat",
|
|
64
|
+
"change": "+12%",
|
|
65
|
+
"icon": "users",
|
|
66
|
+
"label": "Users",
|
|
67
|
+
"trend": "up",
|
|
68
|
+
"value": "2,840"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"id": "section-2",
|
|
72
|
+
"component": "Section",
|
|
73
|
+
"children": [
|
|
74
|
+
"column-2"
|
|
75
|
+
]
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"id": "column-2",
|
|
79
|
+
"component": "Column",
|
|
80
|
+
"children": [
|
|
81
|
+
"stat-2"
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"id": "card-2",
|
|
86
|
+
"component": "Card",
|
|
87
|
+
"children": [
|
|
88
|
+
"section-2"
|
|
89
|
+
]
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"id": "stat-3",
|
|
93
|
+
"component": "Stat",
|
|
94
|
+
"change": "-0.3%",
|
|
95
|
+
"icon": "chart-line",
|
|
96
|
+
"label": "Conversion",
|
|
97
|
+
"trend": "down",
|
|
98
|
+
"value": "3.2%"
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"id": "section-3",
|
|
102
|
+
"component": "Section",
|
|
103
|
+
"children": [
|
|
104
|
+
"column-3"
|
|
105
|
+
]
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"id": "column-3",
|
|
109
|
+
"component": "Column",
|
|
110
|
+
"children": [
|
|
111
|
+
"stat-3"
|
|
112
|
+
]
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"id": "card-3",
|
|
116
|
+
"component": "Card",
|
|
117
|
+
"children": [
|
|
118
|
+
"section-3"
|
|
119
|
+
]
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"id": "stat-4",
|
|
123
|
+
"component": "Stat",
|
|
124
|
+
"change": "+$4",
|
|
125
|
+
"icon": "receipt",
|
|
126
|
+
"label": "Avg. Order",
|
|
127
|
+
"trend": "up",
|
|
128
|
+
"value": "$87"
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"id": "section-4",
|
|
132
|
+
"component": "Section",
|
|
133
|
+
"children": [
|
|
134
|
+
"column-4"
|
|
135
|
+
]
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"id": "column-4",
|
|
139
|
+
"component": "Column",
|
|
140
|
+
"children": [
|
|
141
|
+
"stat-4"
|
|
142
|
+
]
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"id": "card-4",
|
|
146
|
+
"component": "Card",
|
|
147
|
+
"children": [
|
|
148
|
+
"section-4"
|
|
149
|
+
]
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"id": "root",
|
|
153
|
+
"component": "Grid",
|
|
154
|
+
"columns": "4",
|
|
155
|
+
"gap": "3",
|
|
156
|
+
"children": [
|
|
157
|
+
"card",
|
|
158
|
+
"card-2",
|
|
159
|
+
"card-3",
|
|
160
|
+
"card-4"
|
|
161
|
+
]
|
|
162
|
+
}
|
|
163
|
+
]
|
|
164
|
+
}
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "grid-responsive-kpi",
|
|
3
|
+
"kind": "block",
|
|
4
|
+
"primary": "div",
|
|
5
|
+
"page": "/packages/web-components/components/grid/grid.examples.html",
|
|
6
|
+
"slots": [],
|
|
7
|
+
"nested": [],
|
|
8
|
+
"attrs": {
|
|
9
|
+
"data-artifact-item": "",
|
|
10
|
+
"data-artifact-label": "responsive 1→2→4 grid"
|
|
11
|
+
},
|
|
12
|
+
"html": "<grid-ui columns=\"1 2@sm 4@lg\" gap=\"3 4@md\">\n <card-ui><section><stat-ui label=\"Revenue\" value=\"$12,400\" change=\"+8.4%\" trend=\"up\"></stat-ui></section></card-ui>\n <card-ui><section><stat-ui label=\"Users\" value=\"2,840\" change=\"+12%\" trend=\"up\"></stat-ui></section></card-ui>\n <card-ui><section><stat-ui label=\"Sessions\" value=\"48k\" change=\"+5%\" trend=\"up\"></stat-ui></section></card-ui>\n <card-ui><section><stat-ui label=\"Bounce rate\" value=\"38%\" change=\"-2%\" trend=\"up\"></stat-ui></section></card-ui>\n </grid-ui>",
|
|
13
|
+
"source": "packages/web-components/components/grid/grid.examples.html",
|
|
14
|
+
"metadata": {
|
|
15
|
+
"domain": "layout",
|
|
16
|
+
"description": "Responsive KPI grid — 1 column on mobile, 2 on tablet, 4 on desktop using @bp notation.",
|
|
17
|
+
"keywords": [
|
|
18
|
+
"grid",
|
|
19
|
+
"responsive",
|
|
20
|
+
"breakpoint",
|
|
21
|
+
"columns",
|
|
22
|
+
"kpi",
|
|
23
|
+
"card",
|
|
24
|
+
"layout",
|
|
25
|
+
"1",
|
|
26
|
+
"2",
|
|
27
|
+
"4",
|
|
28
|
+
"mobile",
|
|
29
|
+
"tablet",
|
|
30
|
+
"desktop",
|
|
31
|
+
"@bp"
|
|
32
|
+
]
|
|
33
|
+
},
|
|
34
|
+
"captured_at": "2026-06-10T20:25:14.783Z",
|
|
35
|
+
"template": [
|
|
36
|
+
{
|
|
37
|
+
"id": "stat",
|
|
38
|
+
"component": "Stat",
|
|
39
|
+
"change": "+8.4%",
|
|
40
|
+
"label": "Revenue",
|
|
41
|
+
"trend": "up",
|
|
42
|
+
"value": "$12,400"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"id": "section",
|
|
46
|
+
"component": "Section",
|
|
47
|
+
"children": [
|
|
48
|
+
"column"
|
|
49
|
+
]
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"id": "column",
|
|
53
|
+
"component": "Column",
|
|
54
|
+
"children": [
|
|
55
|
+
"stat"
|
|
56
|
+
]
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"id": "card",
|
|
60
|
+
"component": "Card",
|
|
61
|
+
"children": [
|
|
62
|
+
"section"
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"id": "stat-2",
|
|
67
|
+
"component": "Stat",
|
|
68
|
+
"change": "+12%",
|
|
69
|
+
"label": "Users",
|
|
70
|
+
"trend": "up",
|
|
71
|
+
"value": "2,840"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"id": "section-2",
|
|
75
|
+
"component": "Section",
|
|
76
|
+
"children": [
|
|
77
|
+
"column-2"
|
|
78
|
+
]
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"id": "column-2",
|
|
82
|
+
"component": "Column",
|
|
83
|
+
"children": [
|
|
84
|
+
"stat-2"
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"id": "card-2",
|
|
89
|
+
"component": "Card",
|
|
90
|
+
"children": [
|
|
91
|
+
"section-2"
|
|
92
|
+
]
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"id": "stat-3",
|
|
96
|
+
"component": "Stat",
|
|
97
|
+
"change": "+5%",
|
|
98
|
+
"label": "Sessions",
|
|
99
|
+
"trend": "up",
|
|
100
|
+
"value": "48k"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"id": "section-3",
|
|
104
|
+
"component": "Section",
|
|
105
|
+
"children": [
|
|
106
|
+
"column-3"
|
|
107
|
+
]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"id": "column-3",
|
|
111
|
+
"component": "Column",
|
|
112
|
+
"children": [
|
|
113
|
+
"stat-3"
|
|
114
|
+
]
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"id": "card-3",
|
|
118
|
+
"component": "Card",
|
|
119
|
+
"children": [
|
|
120
|
+
"section-3"
|
|
121
|
+
]
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"id": "stat-4",
|
|
125
|
+
"component": "Stat",
|
|
126
|
+
"change": "-2%",
|
|
127
|
+
"label": "Bounce rate",
|
|
128
|
+
"trend": "up",
|
|
129
|
+
"value": "38%"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"id": "section-4",
|
|
133
|
+
"component": "Section",
|
|
134
|
+
"children": [
|
|
135
|
+
"column-4"
|
|
136
|
+
]
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"id": "column-4",
|
|
140
|
+
"component": "Column",
|
|
141
|
+
"children": [
|
|
142
|
+
"stat-4"
|
|
143
|
+
]
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"id": "card-4",
|
|
147
|
+
"component": "Card",
|
|
148
|
+
"children": [
|
|
149
|
+
"section-4"
|
|
150
|
+
]
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"id": "root",
|
|
154
|
+
"component": "Grid",
|
|
155
|
+
"columns": "1 2@sm 4@lg",
|
|
156
|
+
"gap": "3 4@md",
|
|
157
|
+
"children": [
|
|
158
|
+
"card",
|
|
159
|
+
"card-2",
|
|
160
|
+
"card-3",
|
|
161
|
+
"card-4"
|
|
162
|
+
]
|
|
163
|
+
}
|
|
164
|
+
]
|
|
165
|
+
}
|