@aurodesignsystem-dev/auro-card 0.0.0-pr130.0
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 +354 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +174 -0
- package/demo/api.html +60 -0
- package/demo/api.js +1 -0
- package/demo/api.md +480 -0
- package/demo/api.min.js +3 -0
- package/demo/auro-card.min.js +2807 -0
- package/demo/index.html +60 -0
- package/demo/index.js +5 -0
- package/demo/index.md +836 -0
- package/demo/index.min.js +6 -0
- package/dist/auro-card-Ck8vwzfh.js +124 -0
- package/dist/index.d.ts +132 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +82 -0
package/demo/api.md
ADDED
|
@@ -0,0 +1,480 @@
|
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ../docs/api.md -->
|
|
3
|
+
|
|
4
|
+
# auro-card
|
|
5
|
+
|
|
6
|
+
The `<auro-card>` element provides users a flexible way to convey a summary of information.
|
|
7
|
+
|
|
8
|
+
## Attributes
|
|
9
|
+
|
|
10
|
+
| Attribute | Type | Description |
|
|
11
|
+
|-----------|-----------|--------------------------------------------------|
|
|
12
|
+
| [border](#border) | `Boolean` | Adds desired UI border to the `auro-card` element. |
|
|
13
|
+
| [center](#center) | `Boolean` | Centers content within the scope of the `auro-card`. |
|
|
14
|
+
|
|
15
|
+
## Properties
|
|
16
|
+
|
|
17
|
+
| Property | Attribute | Type | Description |
|
|
18
|
+
|------------|------------|-----------|--------------------------------------------------|
|
|
19
|
+
| [href](#href) | `href` | `String` | Sets the card to function as a hyperlink to the provided href value & disables the default CTA slot. |
|
|
20
|
+
| [rel](#rel) | `rel` | `String` | Sets rel attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#rel). |
|
|
21
|
+
| [relative](#relative) | `relative` | `Boolean` | If true, the auto URL re-write feature will be disabled.https://auro.alaskaair.com/components/auro/hyperlink/api#relative |
|
|
22
|
+
| [role](#role) | `role` | `String` | Sets role attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#role). |
|
|
23
|
+
| [target](#target) | `target` | `String` | Sets target attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#target). |
|
|
24
|
+
| [variant](#variant) | `variant` | `String` | Sets the variant of the card. Options `inset-content`, `inset-container`, `inset-stretch`. |
|
|
25
|
+
|
|
26
|
+
## Slots
|
|
27
|
+
|
|
28
|
+
| Name | Description |
|
|
29
|
+
|---------------|--------------------------------------------------|
|
|
30
|
+
| [cta](#cta) | Content slot for call-to-action content. |
|
|
31
|
+
| [description](#description) | Content slot for string text description content. |
|
|
32
|
+
| [header](#header) | Content slot for string text header content. |
|
|
33
|
+
| [image](#image) | Content slot for image content. |
|
|
34
|
+
|
|
35
|
+
## CSS Shadow Parts
|
|
36
|
+
|
|
37
|
+
| Part | Description |
|
|
38
|
+
|----------------|--------------------------------------------------|
|
|
39
|
+
| [content](#content) | Apply styles to the outer string text container. |
|
|
40
|
+
| [cta](#cta) | Apply styles to the named cta slot container. |
|
|
41
|
+
| [description](#description) | Apply styles to the named description slot container. |
|
|
42
|
+
| [header](#header) | Apply styles to the named header slot container. |
|
|
43
|
+
| [image](#image) | Apply styles to the named image slot container. |
|
|
44
|
+
| [imageWrapper](#imageWrapper) | Apply styles to the outer image slot container. |
|
|
45
|
+
| [link](#link) | Apply styles to the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#link) element. |
|
|
46
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
47
|
+
|
|
48
|
+
## API Examples
|
|
49
|
+
|
|
50
|
+
### Default
|
|
51
|
+
|
|
52
|
+
The following example illustrates a default UI for the `<auro-card>` element.
|
|
53
|
+
|
|
54
|
+
<div class="exampleWrapper">
|
|
55
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/default.html) -->
|
|
56
|
+
<!-- The below content is automatically added from ../apiExamples/default.html -->
|
|
57
|
+
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
|
|
58
|
+
<auro-card>
|
|
59
|
+
<img
|
|
60
|
+
slot="image"
|
|
61
|
+
src="https://picsum.photos/300/300?random=0"
|
|
62
|
+
alt="Random insert"/>
|
|
63
|
+
<auro-header slot="header" level="2" display="500">Display card title here</auro-header>
|
|
64
|
+
<p slot="description">
|
|
65
|
+
Context goes here.
|
|
66
|
+
</p>
|
|
67
|
+
<div slot="cta">
|
|
68
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
69
|
+
More info
|
|
70
|
+
</auro-hyperlink>
|
|
71
|
+
</div>
|
|
72
|
+
</auro-card>
|
|
73
|
+
<auro-card style="max-width: 300px">
|
|
74
|
+
<img
|
|
75
|
+
slot="image"
|
|
76
|
+
src="https://picsum.photos/300/200?random=1"
|
|
77
|
+
alt="Random insert"/>
|
|
78
|
+
<auro-header slot="header" level="2" display="500">Display card title here</auro-header>
|
|
79
|
+
<p slot="description">
|
|
80
|
+
Context goes here. Use this area to communicate more information to your users.
|
|
81
|
+
</p>
|
|
82
|
+
<div slot="cta">
|
|
83
|
+
<auro-hyperlink href="/" nav target="_blank" type="cta">
|
|
84
|
+
More info
|
|
85
|
+
</auro-hyperlink>
|
|
86
|
+
</div>
|
|
87
|
+
</auro-card>
|
|
88
|
+
<auro-card style="max-width: 150px">
|
|
89
|
+
<img
|
|
90
|
+
slot="image"
|
|
91
|
+
src="https://picsum.photos/150/250?random=1"
|
|
92
|
+
alt="Random insert"/>
|
|
93
|
+
<auro-header slot="header" level="2" display="500">Display title</auro-header>
|
|
94
|
+
<p slot="description">
|
|
95
|
+
Context goes here.
|
|
96
|
+
</p>
|
|
97
|
+
<div slot="cta">
|
|
98
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
99
|
+
More info
|
|
100
|
+
</auro-hyperlink>
|
|
101
|
+
</div>
|
|
102
|
+
</auro-card>
|
|
103
|
+
</div>
|
|
104
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
105
|
+
</div>
|
|
106
|
+
<auro-accordion alignRight>
|
|
107
|
+
<span slot="trigger">See code</span>
|
|
108
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/default.html) -->
|
|
109
|
+
<!-- The below code snippet is automatically added from ../apiExamples/default.html -->
|
|
110
|
+
|
|
111
|
+
```html
|
|
112
|
+
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
|
|
113
|
+
<auro-card>
|
|
114
|
+
<img
|
|
115
|
+
slot="image"
|
|
116
|
+
src="https://picsum.photos/300/300?random=0"
|
|
117
|
+
alt="Random insert"/>
|
|
118
|
+
<auro-header slot="header" level="2" display="500">Display card title here</auro-header>
|
|
119
|
+
<p slot="description">
|
|
120
|
+
Context goes here.
|
|
121
|
+
</p>
|
|
122
|
+
<div slot="cta">
|
|
123
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
124
|
+
More info
|
|
125
|
+
</auro-hyperlink>
|
|
126
|
+
</div>
|
|
127
|
+
</auro-card>
|
|
128
|
+
<auro-card style="max-width: 300px">
|
|
129
|
+
<img
|
|
130
|
+
slot="image"
|
|
131
|
+
src="https://picsum.photos/300/200?random=1"
|
|
132
|
+
alt="Random insert"/>
|
|
133
|
+
<auro-header slot="header" level="2" display="500">Display card title here</auro-header>
|
|
134
|
+
<p slot="description">
|
|
135
|
+
Context goes here. Use this area to communicate more information to your users.
|
|
136
|
+
</p>
|
|
137
|
+
<div slot="cta">
|
|
138
|
+
<auro-hyperlink href="/" nav target="_blank" type="cta">
|
|
139
|
+
More info
|
|
140
|
+
</auro-hyperlink>
|
|
141
|
+
</div>
|
|
142
|
+
</auro-card>
|
|
143
|
+
<auro-card style="max-width: 150px">
|
|
144
|
+
<img
|
|
145
|
+
slot="image"
|
|
146
|
+
src="https://picsum.photos/150/250?random=1"
|
|
147
|
+
alt="Random insert"/>
|
|
148
|
+
<auro-header slot="header" level="2" display="500">Display title</auro-header>
|
|
149
|
+
<p slot="description">
|
|
150
|
+
Context goes here.
|
|
151
|
+
</p>
|
|
152
|
+
<div slot="cta">
|
|
153
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
154
|
+
More info
|
|
155
|
+
</auro-hyperlink>
|
|
156
|
+
</div>
|
|
157
|
+
</auro-card>
|
|
158
|
+
</div>
|
|
159
|
+
```
|
|
160
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
161
|
+
</auro-accordion>
|
|
162
|
+
|
|
163
|
+
### Inset *Container* or *Content*
|
|
164
|
+
|
|
165
|
+
The following examples make use of the `inset-container` or `inset-content` variants. As the name implies, the inset variants will add inner padding either on the whole card or only in the `description` and `cta` content slots.
|
|
166
|
+
|
|
167
|
+
<div class="exampleWrapper">
|
|
168
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/inset.html) -->
|
|
169
|
+
<!-- The below content is automatically added from ../apiExamples/inset.html -->
|
|
170
|
+
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
|
|
171
|
+
<auro-card variant="inset-container" style="max-width: 300px">
|
|
172
|
+
<img
|
|
173
|
+
slot="image"
|
|
174
|
+
src="https://picsum.photos/200/200?random=0"
|
|
175
|
+
alt="Random insert"/>
|
|
176
|
+
<auro-header slot="header" level="2" display="500">Inset 'Container'</auro-header>
|
|
177
|
+
<p slot="description">
|
|
178
|
+
Context goes here. Describe the page this card represents.
|
|
179
|
+
</p>
|
|
180
|
+
<div slot="cta">
|
|
181
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
182
|
+
More info
|
|
183
|
+
</auro-hyperlink>
|
|
184
|
+
</div>
|
|
185
|
+
</auro-card>
|
|
186
|
+
<auro-card variant="inset-content" style="max-width: 300px">
|
|
187
|
+
<img
|
|
188
|
+
slot="image"
|
|
189
|
+
src="https://picsum.photos/200/200?random=1"
|
|
190
|
+
alt="Random insert"/>
|
|
191
|
+
<auro-header slot="header" level="2" display="500">Inset 'Content'</auro-header>
|
|
192
|
+
<p slot="description">
|
|
193
|
+
Context goes here. Describe the page this card represents.
|
|
194
|
+
</p>
|
|
195
|
+
<div slot="cta">
|
|
196
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
197
|
+
More info
|
|
198
|
+
</auro-hyperlink>
|
|
199
|
+
</div>
|
|
200
|
+
</auro-card>
|
|
201
|
+
</div>
|
|
202
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
203
|
+
</div>
|
|
204
|
+
<auro-accordion alignRight>
|
|
205
|
+
<span slot="trigger">See code</span>
|
|
206
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/inset.html) -->
|
|
207
|
+
<!-- The below code snippet is automatically added from ../apiExamples/inset.html -->
|
|
208
|
+
|
|
209
|
+
```html
|
|
210
|
+
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
|
|
211
|
+
<auro-card variant="inset-container" style="max-width: 300px">
|
|
212
|
+
<img
|
|
213
|
+
slot="image"
|
|
214
|
+
src="https://picsum.photos/200/200?random=0"
|
|
215
|
+
alt="Random insert"/>
|
|
216
|
+
<auro-header slot="header" level="2" display="500">Inset 'Container'</auro-header>
|
|
217
|
+
<p slot="description">
|
|
218
|
+
Context goes here. Describe the page this card represents.
|
|
219
|
+
</p>
|
|
220
|
+
<div slot="cta">
|
|
221
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
222
|
+
More info
|
|
223
|
+
</auro-hyperlink>
|
|
224
|
+
</div>
|
|
225
|
+
</auro-card>
|
|
226
|
+
<auro-card variant="inset-content" style="max-width: 300px">
|
|
227
|
+
<img
|
|
228
|
+
slot="image"
|
|
229
|
+
src="https://picsum.photos/200/200?random=1"
|
|
230
|
+
alt="Random insert"/>
|
|
231
|
+
<auro-header slot="header" level="2" display="500">Inset 'Content'</auro-header>
|
|
232
|
+
<p slot="description">
|
|
233
|
+
Context goes here. Describe the page this card represents.
|
|
234
|
+
</p>
|
|
235
|
+
<div slot="cta">
|
|
236
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
237
|
+
More info
|
|
238
|
+
</auro-hyperlink>
|
|
239
|
+
</div>
|
|
240
|
+
</auro-card>
|
|
241
|
+
</div>
|
|
242
|
+
```
|
|
243
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
244
|
+
</auro-accordion>
|
|
245
|
+
|
|
246
|
+
### Bordered
|
|
247
|
+
|
|
248
|
+
Illustrated below is the `border` attribute. This feature defines a single boarder around the whole `<auro-card>` element with a pre-defined rounded corner.
|
|
249
|
+
|
|
250
|
+
<div class="exampleWrapper">
|
|
251
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/bordered.html) -->
|
|
252
|
+
<!-- The below content is automatically added from ../apiExamples/bordered.html -->
|
|
253
|
+
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
|
|
254
|
+
<auro-card variant="inset-container" style="max-width: 300px" border>
|
|
255
|
+
<img
|
|
256
|
+
slot="image"
|
|
257
|
+
src="https://picsum.photos/200/300?random=3"
|
|
258
|
+
alt="Random insert"/>
|
|
259
|
+
<auro-header slot="header" level="2" display="500">Inset Container</auro-header>
|
|
260
|
+
<p slot="description">
|
|
261
|
+
Context goes here. Describe the page this card represents.
|
|
262
|
+
</p>
|
|
263
|
+
<div slot="cta">
|
|
264
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
265
|
+
More info
|
|
266
|
+
</auro-hyperlink>
|
|
267
|
+
</div>
|
|
268
|
+
</auro-card>
|
|
269
|
+
<auro-card variant="inset-content" style="max-width: 300px" border>
|
|
270
|
+
<img
|
|
271
|
+
slot="image"
|
|
272
|
+
src="https://picsum.photos/200/300?random=4"
|
|
273
|
+
alt="Random insert"/>
|
|
274
|
+
<auro-header slot="header" level="2" display="500">Inset Content</auro-header>
|
|
275
|
+
<p slot="description">
|
|
276
|
+
Context goes here. Describe the page this card represents.
|
|
277
|
+
</p>
|
|
278
|
+
<div slot="cta">
|
|
279
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
280
|
+
More info
|
|
281
|
+
</auro-hyperlink>
|
|
282
|
+
</div>
|
|
283
|
+
</auro-card>
|
|
284
|
+
</div>
|
|
285
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
286
|
+
</div>
|
|
287
|
+
<auro-accordion alignRight>
|
|
288
|
+
<span slot="trigger">See code</span>
|
|
289
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/bordered.html) -->
|
|
290
|
+
<!-- The below code snippet is automatically added from ../apiExamples/bordered.html -->
|
|
291
|
+
|
|
292
|
+
```html
|
|
293
|
+
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
|
|
294
|
+
<auro-card variant="inset-container" style="max-width: 300px" border>
|
|
295
|
+
<img
|
|
296
|
+
slot="image"
|
|
297
|
+
src="https://picsum.photos/200/300?random=3"
|
|
298
|
+
alt="Random insert"/>
|
|
299
|
+
<auro-header slot="header" level="2" display="500">Inset Container</auro-header>
|
|
300
|
+
<p slot="description">
|
|
301
|
+
Context goes here. Describe the page this card represents.
|
|
302
|
+
</p>
|
|
303
|
+
<div slot="cta">
|
|
304
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
305
|
+
More info
|
|
306
|
+
</auro-hyperlink>
|
|
307
|
+
</div>
|
|
308
|
+
</auro-card>
|
|
309
|
+
<auro-card variant="inset-content" style="max-width: 300px" border>
|
|
310
|
+
<img
|
|
311
|
+
slot="image"
|
|
312
|
+
src="https://picsum.photos/200/300?random=4"
|
|
313
|
+
alt="Random insert"/>
|
|
314
|
+
<auro-header slot="header" level="2" display="500">Inset Content</auro-header>
|
|
315
|
+
<p slot="description">
|
|
316
|
+
Context goes here. Describe the page this card represents.
|
|
317
|
+
</p>
|
|
318
|
+
<div slot="cta">
|
|
319
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
320
|
+
More info
|
|
321
|
+
</auro-hyperlink>
|
|
322
|
+
</div>
|
|
323
|
+
</auro-card>
|
|
324
|
+
</div>
|
|
325
|
+
```
|
|
326
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
327
|
+
</auro-accordion>
|
|
328
|
+
|
|
329
|
+
### Navigation
|
|
330
|
+
|
|
331
|
+
The `<auro-card>` custom element, with its `href` attribute, creates a `auro-hyperlink` element to web pages, files, email addresses, locations in the same page, or anything else a URL can address. The second example illustrates the accessible icon when using the `target` attribute.
|
|
332
|
+
|
|
333
|
+
Additionally notice the navigation card with the QR code icon. See in this example how the `variant="inset-stretch"` was used to add additional margin spacing to the top and bottom of the content placement in the card.
|
|
334
|
+
|
|
335
|
+
<div class="exampleWrapper">
|
|
336
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/navigation.html) -->
|
|
337
|
+
<!-- The below content is automatically added from ../apiExamples/navigation.html -->
|
|
338
|
+
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 1.8rem;">
|
|
339
|
+
<!-- -->
|
|
340
|
+
<!-- baseline navigation style auro-card -->
|
|
341
|
+
<!-- -->
|
|
342
|
+
<auro-card href="/" style="max-width: 300px" center>
|
|
343
|
+
<img
|
|
344
|
+
slot="image"
|
|
345
|
+
src="https://picsum.photos/300/100?random=1"
|
|
346
|
+
alt="Random insert 0"/>
|
|
347
|
+
<auro-header slot="header" level="2" display="500">
|
|
348
|
+
Header
|
|
349
|
+
</auro-header>
|
|
350
|
+
<div slot="description">
|
|
351
|
+
<p>
|
|
352
|
+
Context goes here. Describe the page this card represents.
|
|
353
|
+
</p>
|
|
354
|
+
</div>
|
|
355
|
+
<p slot="cta">
|
|
356
|
+
More info
|
|
357
|
+
</p>
|
|
358
|
+
</auro-card>
|
|
359
|
+
<!-- -->
|
|
360
|
+
<!-- baseline navigation style auro-card with external link icon -->
|
|
361
|
+
<!-- -->
|
|
362
|
+
<auro-card href="/" target="_blank" style="max-width: 300px" center>
|
|
363
|
+
<img
|
|
364
|
+
slot="image"
|
|
365
|
+
src="https://picsum.photos/300/100?random=2"
|
|
366
|
+
alt="Random insert 0"/>
|
|
367
|
+
<auro-header slot="header" level="2" display="500">
|
|
368
|
+
Header
|
|
369
|
+
</auro-header>
|
|
370
|
+
<div slot="description">
|
|
371
|
+
<p>
|
|
372
|
+
Context goes here. Describe the page this card represents.
|
|
373
|
+
</p>
|
|
374
|
+
</div>
|
|
375
|
+
<p slot="cta">
|
|
376
|
+
More info
|
|
377
|
+
</p>
|
|
378
|
+
</auro-card>
|
|
379
|
+
<!-- -->
|
|
380
|
+
<!-- navigation card centered style with auro-icon -->
|
|
381
|
+
<!-- -->
|
|
382
|
+
<auro-card
|
|
383
|
+
center
|
|
384
|
+
class="icon-card"
|
|
385
|
+
href="/"
|
|
386
|
+
style="max-width: 300px;"
|
|
387
|
+
variant="inset-stretch">
|
|
388
|
+
<auro-icon
|
|
389
|
+
slot="image"
|
|
390
|
+
category="interface"
|
|
391
|
+
name="qr-code-stroke"
|
|
392
|
+
customColor
|
|
393
|
+
customSize
|
|
394
|
+
style="color: var(--ds-color-brand-breeze-400, #00cff0); width: 60px;">
|
|
395
|
+
</auro-icon>
|
|
396
|
+
<auro-header slot="header" level="2" display="500">
|
|
397
|
+
Card Title
|
|
398
|
+
</auro-header>
|
|
399
|
+
<p slot="description">
|
|
400
|
+
Context goes here. Describe the page this card represents.
|
|
401
|
+
</p>
|
|
402
|
+
</auro-card>
|
|
403
|
+
</div>
|
|
404
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
405
|
+
</div>
|
|
406
|
+
<auro-accordion alignRight>
|
|
407
|
+
<span slot="trigger">See code</span>
|
|
408
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/navigation.html) -->
|
|
409
|
+
<!-- The below code snippet is automatically added from ../apiExamples/navigation.html -->
|
|
410
|
+
|
|
411
|
+
```html
|
|
412
|
+
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 1.8rem;">
|
|
413
|
+
<!-- -->
|
|
414
|
+
<!-- baseline navigation style auro-card -->
|
|
415
|
+
<!-- -->
|
|
416
|
+
<auro-card href="/" style="max-width: 300px" center>
|
|
417
|
+
<img
|
|
418
|
+
slot="image"
|
|
419
|
+
src="https://picsum.photos/300/100?random=1"
|
|
420
|
+
alt="Random insert 0"/>
|
|
421
|
+
<auro-header slot="header" level="2" display="500">
|
|
422
|
+
Header
|
|
423
|
+
</auro-header>
|
|
424
|
+
<div slot="description">
|
|
425
|
+
<p>
|
|
426
|
+
Context goes here. Describe the page this card represents.
|
|
427
|
+
</p>
|
|
428
|
+
</div>
|
|
429
|
+
<p slot="cta">
|
|
430
|
+
More info
|
|
431
|
+
</p>
|
|
432
|
+
</auro-card>
|
|
433
|
+
<!-- -->
|
|
434
|
+
<!-- baseline navigation style auro-card with external link icon -->
|
|
435
|
+
<!-- -->
|
|
436
|
+
<auro-card href="/" target="_blank" style="max-width: 300px" center>
|
|
437
|
+
<img
|
|
438
|
+
slot="image"
|
|
439
|
+
src="https://picsum.photos/300/100?random=2"
|
|
440
|
+
alt="Random insert 0"/>
|
|
441
|
+
<auro-header slot="header" level="2" display="500">
|
|
442
|
+
Header
|
|
443
|
+
</auro-header>
|
|
444
|
+
<div slot="description">
|
|
445
|
+
<p>
|
|
446
|
+
Context goes here. Describe the page this card represents.
|
|
447
|
+
</p>
|
|
448
|
+
</div>
|
|
449
|
+
<p slot="cta">
|
|
450
|
+
More info
|
|
451
|
+
</p>
|
|
452
|
+
</auro-card>
|
|
453
|
+
<!-- -->
|
|
454
|
+
<!-- navigation card centered style with auro-icon -->
|
|
455
|
+
<!-- -->
|
|
456
|
+
<auro-card
|
|
457
|
+
center
|
|
458
|
+
class="icon-card"
|
|
459
|
+
href="/"
|
|
460
|
+
style="max-width: 300px;"
|
|
461
|
+
variant="inset-stretch">
|
|
462
|
+
<auro-icon
|
|
463
|
+
slot="image"
|
|
464
|
+
category="interface"
|
|
465
|
+
name="qr-code-stroke"
|
|
466
|
+
customColor
|
|
467
|
+
customSize
|
|
468
|
+
style="color: var(--ds-color-brand-breeze-400, #00cff0); width: 60px;">
|
|
469
|
+
</auro-icon>
|
|
470
|
+
<auro-header slot="header" level="2" display="500">
|
|
471
|
+
Card Title
|
|
472
|
+
</auro-header>
|
|
473
|
+
<p slot="description">
|
|
474
|
+
Context goes here. Describe the page this card represents.
|
|
475
|
+
</p>
|
|
476
|
+
</auro-card>
|
|
477
|
+
</div>
|
|
478
|
+
```
|
|
479
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
480
|
+
</auro-accordion>
|
package/demo/api.min.js
ADDED