@aurodesignsystem-dev/auro-card 0.0.0-pr136.0 → 0.0.0-pr139.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.
Files changed (12) hide show
  1. package/README.md +118 -84
  2. package/custom-elements.json +101 -438
  3. package/demo/api.html +5 -5
  4. package/demo/api.md +453 -126
  5. package/demo/auro-card.min.js +34 -20
  6. package/demo/index.html +5 -5
  7. package/demo/index.md +27 -713
  8. package/dist/{auro-card-BdEhjPlf.js → auro-card-Pv0_NyMn.js} +1 -1
  9. package/dist/index.d.ts +214 -149
  10. package/dist/index.js +1 -1
  11. package/dist/registered.js +1 -1
  12. package/package.json +10 -6
package/demo/api.md CHANGED
@@ -1,5 +1,5 @@
1
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
2
- <!-- The below content is automatically added from ../docs/api.md -->
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
2
+ <!-- The below content is automatically added from ./../docs/api.md -->
3
3
 
4
4
  # auro-card
5
5
 
@@ -7,54 +7,50 @@ The `<auro-card>` element provides users a flexible way to convey a summary of i
7
7
 
8
8
  ### Properties & Attributes
9
9
 
10
- | Properties | Attributes | Type | Default | Description |
11
- | --- | --- | --- | --- | --- |
12
- variant | variant | string | | Sets the variant of the card. Options `inset-content`, `inset-container`, `inset-stretch`.
13
- href | href | string | | Sets the card to function as a hyperlink to the provided href value & disables the default CTA slot.
14
- rel | rel | string | | Sets rel attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#rel).
15
- relative | relative | boolean | | If true, the auto URL re-write feature will be disabled. [see here for hyperlink relative](https://auro.alaskaair.com/components/auro/hyperlink/api#relative)
16
- role | role | string | | Sets role attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#role).
17
- target | target | string | | Sets target attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#target).
18
- | border | Boolean | | Adds desired UI border to the `auro-card` element.
19
- | center | Boolean | | Centers content within the scope of the `auro-card`.
20
-
10
+ | Properties | Attributes | Modifiers | Type | Default | 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
+ | href | href | | string | | Sets the card to function as a hyperlink to the provided href value & disables the default CTA slot. |
15
+ | rel | rel | | string | | Sets rel attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#rel). |
16
+ | relative | relative | | boolean | | If true, the auto URL re-write feature will be disabled. [See here for info about hyperlink relative attribute](https://auro.alaskaair.com/components/auro/hyperlink/api#relative). |
17
+ | role | role | | string | | Sets role attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#role). |
18
+ | target | target | | string | | Sets target attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#target). |
19
+ | variant | variant | | `inset-content` \| `inset-container` \| `inset-stretch` | | Sets the variant of the card. |
20
+
21
21
  ### Methods
22
22
 
23
- | Name | Parameters | Return | Description |
24
- | --- | --- | --- | --- |
25
- register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser.
26
-
23
+ | Name | Parameters | Return | Description |
24
+ | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
25
+ | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
26
+
27
27
  ### Slots
28
28
 
29
- | Name | Description |
30
- | --- | --- |
31
- image | Content slot for image content.
32
- header | Content slot for string text header content.
33
- description | Content slot for string text description content.
34
- cta | Content slot for call-to-action content.
35
-
29
+ | Name | Description |
30
+ | ----------- | ------------------------------------------------- |
31
+ | cta | Content slot for call-to-action content. |
32
+ | description | Content slot for string text description content. |
33
+ | header | Content slot for string text header content. |
34
+ | image | Content slot for image content. |
35
+
36
36
  ### CSS Shadow Parts
37
37
 
38
- | Name | Description |
39
- | --- | --- |
40
- content | Apply styles to the outer string text container.
41
- link | Apply styles to the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#link) element.
42
- imageWrapper | Apply styles to the outer image slot container.
43
- image | Apply styles to the named image slot container.
44
- header | Apply styles to the named header slot container.
45
- description | Apply styles to the named description slot container.
46
- cta | Apply styles to the named cta slot container.
38
+ | Name | Description |
39
+ | ------------ | ------------------------------------------------------------------------------------------------------------ |
40
+ | content | Apply styles to the outer string text container. |
41
+ | cta | Apply styles to the named cta slot container. |
42
+ | description | Apply styles to the named description slot container. |
43
+ | header | Apply styles to the named header slot container. |
44
+ | image | Apply styles to the named image slot container. |
45
+ | imageWrapper | Apply styles to the outer image slot container. |
46
+ | link | Apply styles to the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#link) element. |
47
47
  <!-- AURO-GENERATED-CONTENT:END -->
48
48
 
49
- ## API Examples
50
-
51
- ### Default
52
-
53
- The following example illustrates a default UI for the `<auro-card>` element.
49
+ ## Basic
54
50
 
55
51
  <div class="exampleWrapper">
56
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/default.html) -->
57
- <!-- The below content is automatically added from ../apiExamples/default.html -->
52
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
53
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
58
54
  <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
59
55
  <auro-card>
60
56
  <img
@@ -66,7 +62,7 @@ The following example illustrates a default UI for the `<auro-card>` element.
66
62
  Context goes here.
67
63
  </p>
68
64
  <div slot="cta">
69
- <auro-hyperlink href="/" nav target="_blank">
65
+ <auro-hyperlink href="/" type="nav" target="_blank">
70
66
  More info
71
67
  </auro-hyperlink>
72
68
  </div>
@@ -96,18 +92,18 @@ The following example illustrates a default UI for the `<auro-card>` element.
96
92
  Context goes here.
97
93
  </p>
98
94
  <div slot="cta">
99
- <auro-hyperlink href="/" nav target="_blank">
95
+ <auro-hyperlink href="/" type="nav" target="_blank">
100
96
  More info
101
97
  </auro-hyperlink>
102
98
  </div>
103
99
  </auro-card>
104
100
  </div>
105
101
  <!-- AURO-GENERATED-CONTENT:END -->
106
- </div>
102
+ </div>
107
103
  <auro-accordion alignRight>
108
104
  <span slot="trigger">See code</span>
109
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/default.html) -->
110
- <!-- The below code snippet is automatically added from ../apiExamples/default.html -->
105
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
106
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
111
107
 
112
108
  ```html
113
109
  <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
@@ -121,7 +117,7 @@ The following example illustrates a default UI for the `<auro-card>` element.
121
117
  Context goes here.
122
118
  </p>
123
119
  <div slot="cta">
124
- <auro-hyperlink href="/" nav target="_blank">
120
+ <auro-hyperlink href="/" type="nav" target="_blank">
125
121
  More info
126
122
  </auro-hyperlink>
127
123
  </div>
@@ -151,7 +147,7 @@ The following example illustrates a default UI for the `<auro-card>` element.
151
147
  Context goes here.
152
148
  </p>
153
149
  <div slot="cta">
154
- <auro-hyperlink href="/" nav target="_blank">
150
+ <auro-hyperlink href="/" type="nav" target="_blank">
155
151
  More info
156
152
  </auro-hyperlink>
157
153
  </div>
@@ -161,40 +157,42 @@ The following example illustrates a default UI for the `<auro-card>` element.
161
157
  <!-- AURO-GENERATED-CONTENT:END -->
162
158
  </auro-accordion>
163
159
 
164
- ### Inset *Container* or *Content*
160
+ ## Property & Attribute Examples
161
+
162
+ ### Bordered
165
163
 
166
- 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.
164
+ Illustrated below is the `border` attribute. This feature defines a single border around the whole `<auro-card>` element with a pre-defined rounded corner.
167
165
 
168
166
  <div class="exampleWrapper">
169
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/inset.html) -->
170
- <!-- The below content is automatically added from ../apiExamples/inset.html -->
167
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/bordered.html) -->
168
+ <!-- The below content is automatically added from ../apiExamples/bordered.html -->
171
169
  <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
172
- <auro-card variant="inset-container" style="max-width: 300px">
170
+ <auro-card variant="inset-container" style="max-width: 300px" border>
173
171
  <img
174
172
  slot="image"
175
- src="https://picsum.photos/200/200?random=0"
173
+ src="https://picsum.photos/200/300?random=3"
176
174
  alt="Random insert"/>
177
- <auro-header slot="header" level="2" display="500">Inset 'Container'</auro-header>
175
+ <auro-header slot="header" level="2" display="500">Inset Container</auro-header>
178
176
  <p slot="description">
179
177
  Context goes here. Describe the page this card represents.
180
178
  </p>
181
179
  <div slot="cta">
182
- <auro-hyperlink href="/" nav target="_blank">
180
+ <auro-hyperlink href="/" type="nav" target="_blank">
183
181
  More info
184
182
  </auro-hyperlink>
185
183
  </div>
186
184
  </auro-card>
187
- <auro-card variant="inset-content" style="max-width: 300px">
185
+ <auro-card variant="inset-content" style="max-width: 300px" border>
188
186
  <img
189
187
  slot="image"
190
- src="https://picsum.photos/200/200?random=1"
188
+ src="https://picsum.photos/200/300?random=4"
191
189
  alt="Random insert"/>
192
- <auro-header slot="header" level="2" display="500">Inset 'Content'</auro-header>
190
+ <auro-header slot="header" level="2" display="500">Inset Content</auro-header>
193
191
  <p slot="description">
194
192
  Context goes here. Describe the page this card represents.
195
193
  </p>
196
194
  <div slot="cta">
197
- <auro-hyperlink href="/" nav target="_blank">
195
+ <auro-hyperlink href="/" type="nav" target="_blank">
198
196
  More info
199
197
  </auro-hyperlink>
200
198
  </div>
@@ -204,37 +202,37 @@ The following examples make use of the `inset-container` or `inset-content` vari
204
202
  </div>
205
203
  <auro-accordion alignRight>
206
204
  <span slot="trigger">See code</span>
207
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/inset.html) -->
208
- <!-- The below code snippet is automatically added from ../apiExamples/inset.html -->
205
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/bordered.html) -->
206
+ <!-- The below code snippet is automatically added from ../apiExamples/bordered.html -->
209
207
 
210
208
  ```html
211
209
  <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
212
- <auro-card variant="inset-container" style="max-width: 300px">
210
+ <auro-card variant="inset-container" style="max-width: 300px" border>
213
211
  <img
214
212
  slot="image"
215
- src="https://picsum.photos/200/200?random=0"
213
+ src="https://picsum.photos/200/300?random=3"
216
214
  alt="Random insert"/>
217
- <auro-header slot="header" level="2" display="500">Inset 'Container'</auro-header>
215
+ <auro-header slot="header" level="2" display="500">Inset Container</auro-header>
218
216
  <p slot="description">
219
217
  Context goes here. Describe the page this card represents.
220
218
  </p>
221
219
  <div slot="cta">
222
- <auro-hyperlink href="/" nav target="_blank">
220
+ <auro-hyperlink href="/" type="nav" target="_blank">
223
221
  More info
224
222
  </auro-hyperlink>
225
223
  </div>
226
224
  </auro-card>
227
- <auro-card variant="inset-content" style="max-width: 300px">
225
+ <auro-card variant="inset-content" style="max-width: 300px" border>
228
226
  <img
229
227
  slot="image"
230
- src="https://picsum.photos/200/200?random=1"
228
+ src="https://picsum.photos/200/300?random=4"
231
229
  alt="Random insert"/>
232
- <auro-header slot="header" level="2" display="500">Inset 'Content'</auro-header>
230
+ <auro-header slot="header" level="2" display="500">Inset Content</auro-header>
233
231
  <p slot="description">
234
232
  Context goes here. Describe the page this card represents.
235
233
  </p>
236
234
  <div slot="cta">
237
- <auro-hyperlink href="/" nav target="_blank">
235
+ <auro-hyperlink href="/" type="nav" target="_blank">
238
236
  More info
239
237
  </auro-hyperlink>
240
238
  </div>
@@ -244,83 +242,151 @@ The following examples make use of the `inset-container` or `inset-content` vari
244
242
  <!-- AURO-GENERATED-CONTENT:END -->
245
243
  </auro-accordion>
246
244
 
247
- ### Bordered
245
+ ### Centered Content
248
246
 
249
- Illustrated below is the `border` attribute. This feature defines a single boarder around the whole `<auro-card>` element with a pre-defined rounded corner.
247
+ Text can be centered by assigning the `text-align: center` attribute to the `<auro-card>` element. Similarly, elements within `<auro-card>` can be centered with the `justify-content:center` and/or `align-items:center` attributes to use flexbox to vertically and horizontally center the content within the `<auro-card>` container.
250
248
 
251
249
  <div class="exampleWrapper">
252
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/bordered.html) -->
253
- <!-- The below content is automatically added from ../apiExamples/bordered.html -->
254
- <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
255
- <auro-card variant="inset-container" style="max-width: 300px" border>
256
- <img
257
- slot="image"
258
- src="https://picsum.photos/200/300?random=3"
259
- alt="Random insert"/>
260
- <auro-header slot="header" level="2" display="500">Inset Container</auro-header>
261
- <p slot="description">
262
- Context goes here. Describe the page this card represents.
263
- </p>
264
- <div slot="cta">
265
- <auro-hyperlink href="/" nav target="_blank">
250
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/center.html) -->
251
+ <!-- The below content is automatically added from ../apiExamples/center.html -->
252
+ <div>
253
+ <!--
254
+ Small image option
255
+ -->
256
+ <auro-card
257
+ center
258
+ style="
259
+ justify-content:center;
260
+ align-items:center;
261
+ width: 350px;
262
+ ">
263
+ <img
264
+ slot="image"
265
+ src="https://picsum.photos/300/100?random=1"
266
+ alt="Random insert 0"
267
+ style="max-width: 200px; overflow: hidden; width: unset; margin: 0 auto;"
268
+ />
269
+ <auro-header slot="header" level="2" display="500" style="max-width: 250px;">Centered Content</auro-header>
270
+ <p slot="description" style="max-width: 250px;">
271
+ This is centered description content. Also, notice the CTA and image are
272
+ centered.
273
+ </p>
274
+ <auro-hyperlink href="/" type="nav" target="_blank" slot="cta">
266
275
  More info
267
276
  </auro-hyperlink>
268
- </div>
269
- </auro-card>
270
- <auro-card variant="inset-content" style="max-width: 300px" border>
271
- <img
272
- slot="image"
273
- src="https://picsum.photos/200/300?random=4"
274
- alt="Random insert"/>
275
- <auro-header slot="header" level="2" display="500">Inset Content</auro-header>
276
- <p slot="description">
277
- Context goes here. Describe the page this card represents.
278
- </p>
279
- <div slot="cta">
280
- <auro-hyperlink href="/" nav target="_blank">
277
+ </auro-card>
278
+ <!--
279
+ Avatar image option
280
+ -->
281
+ <auro-card style="max-width: 250px;" center>
282
+ <auro-avatar slot="image" code="pdx" ariaVisible alt="iconic image of Portland, OR"></auro-avatar>
283
+ <auro-header slot="header" level="2" display="500">
284
+ Header
285
+ </auro-header>
286
+ <p slot="description">
287
+ Context goes here. Describe the page this card represents.
288
+ </p>
289
+ <auro-hyperlink href="/" type="nav" target="_blank" slot="cta">
281
290
  More info
282
291
  </auro-hyperlink>
283
- </div>
284
- </auro-card>
285
- </div>
286
- <!-- AURO-GENERATED-CONTENT:END -->
292
+ </auro-card>
293
+ <!--
294
+ Icon size image option using variant="inset-container"
295
+ -->
296
+ <auro-card
297
+ center
298
+ style="max-width: 280px;"
299
+ variant="inset-container">
300
+ <auro-icon
301
+ slot="image"
302
+ category="interface"
303
+ name="qr-code-stroke"
304
+ customColor
305
+ style="color: var(--ds-color-brand-breeze-400, #00cff0);">
306
+ </auro-icon>
307
+ <auro-header slot="header" level="2" display="500">
308
+ Card Title
309
+ </auro-header>
310
+ <p slot="description">
311
+ Context goes here. Describe the page this card represents.
312
+ </p>
313
+ <auro-hyperlink href="/" type="nav" target="_blank" slot="cta">
314
+ More info
315
+ </auro-hyperlink>
316
+ </auro-card>
317
+ </div>
318
+ <!-- AURO-GENERATED-CONTENT:END -->
287
319
  </div>
288
320
  <auro-accordion alignRight>
289
321
  <span slot="trigger">See code</span>
290
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/bordered.html) -->
291
- <!-- The below code snippet is automatically added from ../apiExamples/bordered.html -->
322
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/center.html) -->
323
+ <!-- The below code snippet is automatically added from ../apiExamples/center.html -->
292
324
 
293
325
  ```html
294
- <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
295
- <auro-card variant="inset-container" style="max-width: 300px" border>
326
+ <div>
327
+ <!--
328
+ Small image option
329
+ -->
330
+ <auro-card
331
+ center
332
+ style="
333
+ justify-content:center;
334
+ align-items:center;
335
+ width: 350px;
336
+ ">
296
337
  <img
297
338
  slot="image"
298
- src="https://picsum.photos/200/300?random=3"
299
- alt="Random insert"/>
300
- <auro-header slot="header" level="2" display="500">Inset Container</auro-header>
339
+ src="https://picsum.photos/300/100?random=1"
340
+ alt="Random insert 0"
341
+ style="max-width: 200px; overflow: hidden; width: unset; margin: 0 auto;"
342
+ />
343
+ <auro-header slot="header" level="2" display="500" style="max-width: 250px;">Centered Content</auro-header>
344
+ <p slot="description" style="max-width: 250px;">
345
+ This is centered description content. Also, notice the CTA and image are
346
+ centered.
347
+ </p>
348
+ <auro-hyperlink href="/" type="nav" target="_blank" slot="cta">
349
+ More info
350
+ </auro-hyperlink>
351
+ </auro-card>
352
+ <!--
353
+ Avatar image option
354
+ -->
355
+ <auro-card style="max-width: 250px;" center>
356
+ <auro-avatar slot="image" code="pdx" ariaVisible alt="iconic image of Portland, OR"></auro-avatar>
357
+ <auro-header slot="header" level="2" display="500">
358
+ Header
359
+ </auro-header>
301
360
  <p slot="description">
302
361
  Context goes here. Describe the page this card represents.
303
362
  </p>
304
- <div slot="cta">
305
- <auro-hyperlink href="/" nav target="_blank">
306
- More info
307
- </auro-hyperlink>
308
- </div>
309
- </auro-card>
310
- <auro-card variant="inset-content" style="max-width: 300px" border>
311
- <img
363
+ <auro-hyperlink href="/" type="nav" target="_blank" slot="cta">
364
+ More info
365
+ </auro-hyperlink>
366
+ </auro-card>
367
+ <!--
368
+ Icon size image option using variant="inset-container"
369
+ -->
370
+ <auro-card
371
+ center
372
+ style="max-width: 280px;"
373
+ variant="inset-container">
374
+ <auro-icon
312
375
  slot="image"
313
- src="https://picsum.photos/200/300?random=4"
314
- alt="Random insert"/>
315
- <auro-header slot="header" level="2" display="500">Inset Content</auro-header>
376
+ category="interface"
377
+ name="qr-code-stroke"
378
+ customColor
379
+ style="color: var(--ds-color-brand-breeze-400, #00cff0);">
380
+ </auro-icon>
381
+ <auro-header slot="header" level="2" display="500">
382
+ Card Title
383
+ </auro-header>
316
384
  <p slot="description">
317
385
  Context goes here. Describe the page this card represents.
318
386
  </p>
319
- <div slot="cta">
320
- <auro-hyperlink href="/" nav target="_blank">
321
- More info
322
- </auro-hyperlink>
323
- </div>
387
+ <auro-hyperlink href="/" type="nav" target="_blank" slot="cta">
388
+ More info
389
+ </auro-hyperlink>
324
390
  </auro-card>
325
391
  </div>
326
392
  ```
@@ -329,7 +395,7 @@ Illustrated below is the `border` attribute. This feature defines a single board
329
395
 
330
396
  ### Navigation
331
397
 
332
- 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.
398
+ 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.
333
399
 
334
400
  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.
335
401
 
@@ -479,3 +545,264 @@ Additionally notice the navigation card with the QR code icon. See in this examp
479
545
  ```
480
546
  <!-- AURO-GENERATED-CONTENT:END -->
481
547
  </auro-accordion>
548
+
549
+ ### Variants
550
+
551
+ 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.
552
+
553
+ <div class="exampleWrapper">
554
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/inset.html) -->
555
+ <!-- The below content is automatically added from ../apiExamples/inset.html -->
556
+ <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
557
+ <auro-card variant="inset-container" style="max-width: 300px">
558
+ <img
559
+ slot="image"
560
+ src="https://picsum.photos/200/200?random=0"
561
+ alt="Random insert"/>
562
+ <auro-header slot="header" level="2" display="500">Inset 'Container'</auro-header>
563
+ <p slot="description">
564
+ Context goes here. Describe the page this card represents.
565
+ </p>
566
+ <div slot="cta">
567
+ <auro-hyperlink href="/" type="nav" target="_blank">
568
+ More info
569
+ </auro-hyperlink>
570
+ </div>
571
+ </auro-card>
572
+ <auro-card variant="inset-content" style="max-width: 300px">
573
+ <img
574
+ slot="image"
575
+ src="https://picsum.photos/200/200?random=1"
576
+ alt="Random insert"/>
577
+ <auro-header slot="header" level="2" display="500">Inset 'Content'</auro-header>
578
+ <p slot="description">
579
+ Context goes here. Describe the page this card represents.
580
+ </p>
581
+ <div slot="cta">
582
+ <auro-hyperlink href="/" type="nav" target="_blank">
583
+ More info
584
+ </auro-hyperlink>
585
+ </div>
586
+ </auro-card>
587
+ </div>
588
+ <!-- AURO-GENERATED-CONTENT:END -->
589
+ </div>
590
+ <auro-accordion alignRight>
591
+ <span slot="trigger">See code</span>
592
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/inset.html) -->
593
+ <!-- The below code snippet is automatically added from ../apiExamples/inset.html -->
594
+
595
+ ```html
596
+ <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
597
+ <auro-card variant="inset-container" style="max-width: 300px">
598
+ <img
599
+ slot="image"
600
+ src="https://picsum.photos/200/200?random=0"
601
+ alt="Random insert"/>
602
+ <auro-header slot="header" level="2" display="500">Inset 'Container'</auro-header>
603
+ <p slot="description">
604
+ Context goes here. Describe the page this card represents.
605
+ </p>
606
+ <div slot="cta">
607
+ <auro-hyperlink href="/" type="nav" target="_blank">
608
+ More info
609
+ </auro-hyperlink>
610
+ </div>
611
+ </auro-card>
612
+ <auro-card variant="inset-content" style="max-width: 300px">
613
+ <img
614
+ slot="image"
615
+ src="https://picsum.photos/200/200?random=1"
616
+ alt="Random insert"/>
617
+ <auro-header slot="header" level="2" display="500">Inset 'Content'</auro-header>
618
+ <p slot="description">
619
+ Context goes here. Describe the page this card represents.
620
+ </p>
621
+ <div slot="cta">
622
+ <auro-hyperlink href="/" type="nav" target="_blank">
623
+ More info
624
+ </auro-hyperlink>
625
+ </div>
626
+ </auro-card>
627
+ </div>
628
+ ```
629
+ <!-- AURO-GENERATED-CONTENT:END -->
630
+ </auro-accordion>
631
+
632
+ ## Common Usage Patterns & Functional Examples
633
+
634
+ ### Complex cards
635
+
636
+ These cards are loosely based on the "Typography" example images from [alaskaair.com](https://alaskaair.com) and serve as a way to show that complex card-like layouts are possible with `<auro-card>` beyond what we show here.
637
+
638
+ Note that this example also uses a `style` tag to set most of the styles - this is to show that you don't have to use inline styles and can generally use whatever styling solution you prefer.
639
+
640
+ <div class="exampleWrapper">
641
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/typography-cards.html) -->
642
+ <!-- The below content is automatically added from ../apiExamples/typography-cards.html -->
643
+ <style>
644
+ .complex-card-wrapper {
645
+ display: flex;
646
+ padding: var(--ds-size-400, 2rem);
647
+ }
648
+ .white-card-example {
649
+ background: var(--ds-color-background-lightest, #ffffff);
650
+ }
651
+ .blue-card-example {
652
+ background: var(--ds-color-background-darker, #01426a);
653
+ color: var(--ds-color-text-primary-inverse, #ffffff);
654
+ }
655
+ .white-card-example,
656
+ .blue-card-example {
657
+ flex: 1;
658
+ padding: var(--ds-size-400, 2rem) var(--ds-size-300, 1.5rem);
659
+ }
660
+ .white-card-example::part(content),
661
+ .blue-card-example::part(content) {
662
+ padding: var(--ds-size-400, 2rem) var(--ds-size-600, 3rem) 0;
663
+ }
664
+ .white-card-example::part(cta),
665
+ .blue-card-example::part(cta) {
666
+ display: flex;
667
+ justify-content: center;
668
+ }
669
+ .white-card-example::part(header),
670
+ .blue-card-example::part(header) {
671
+ font-size: var(--ds-size-300, 1.5rem);
672
+ }
673
+ </style>
674
+ <div
675
+ class="complex-card-wrapper"
676
+ >
677
+ <auro-card
678
+ class="white-card-example"
679
+ >
680
+ <auro-header slot="header" level="2" display="500" style="margin-top: -1rem; display: inline-block">
681
+ Seattle, WA (SEA) to<br>
682
+ Los Angeles (LAX)
683
+ </auro-header>
684
+ <p slot="description">
685
+ Los Angeles is a sprawling Southern California city and the center of
686
+ the nation's film and television industry.
687
+ </p>
688
+ <div slot="cta">
689
+ <auro-hyperlink type="cta" href="/">
690
+ Book a Flight
691
+ </auro-hyperlink>
692
+ </div>
693
+ </auro-card>
694
+ <auro-card
695
+ class="blue-card-example"
696
+ >
697
+ <auro-header slot="header" level="2" display="500" style="margin-top: -1rem; display: inline-block">
698
+ Seattle, WA (SEA) to<br>
699
+ Los Angeles (LAX)
700
+ </auro-header>
701
+ <p slot="description">
702
+ Los Angeles is a sprawling Southern California city and the center of
703
+ the nation's film and television industry.
704
+ </p>
705
+ <div slot="cta">
706
+ <auro-hyperlink type="cta" href="/" ondark>
707
+ Book a Flight
708
+ </auro-hyperlink>
709
+ </div>
710
+ </auro-card>
711
+ </div>
712
+ <!-- AURO-GENERATED-CONTENT:END -->
713
+ </div>
714
+ <auro-accordion alignRight>
715
+ <span slot="trigger">See code</span>
716
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/typography-cards.html) -->
717
+ <!-- The below code snippet is automatically added from ../apiExamples/typography-cards.html -->
718
+
719
+ ```html
720
+ <style>
721
+ .complex-card-wrapper {
722
+ display: flex;
723
+ padding: var(--ds-size-400, 2rem);
724
+ }
725
+ .white-card-example {
726
+ background: var(--ds-color-background-lightest, #ffffff);
727
+ }
728
+ .blue-card-example {
729
+ background: var(--ds-color-background-darker, #01426a);
730
+ color: var(--ds-color-text-primary-inverse, #ffffff);
731
+ }
732
+ .white-card-example,
733
+ .blue-card-example {
734
+ flex: 1;
735
+ padding: var(--ds-size-400, 2rem) var(--ds-size-300, 1.5rem);
736
+ }
737
+ .white-card-example::part(content),
738
+ .blue-card-example::part(content) {
739
+ padding: var(--ds-size-400, 2rem) var(--ds-size-600, 3rem) 0;
740
+ }
741
+ .white-card-example::part(cta),
742
+ .blue-card-example::part(cta) {
743
+ display: flex;
744
+ justify-content: center;
745
+ }
746
+ .white-card-example::part(header),
747
+ .blue-card-example::part(header) {
748
+ font-size: var(--ds-size-300, 1.5rem);
749
+ }
750
+ </style>
751
+ <div
752
+ class="complex-card-wrapper"
753
+ >
754
+ <auro-card
755
+ class="white-card-example"
756
+ >
757
+ <auro-header slot="header" level="2" display="500" style="margin-top: -1rem; display: inline-block">
758
+ Seattle, WA (SEA) to<br>
759
+ Los Angeles (LAX)
760
+ </auro-header>
761
+ <p slot="description">
762
+ Los Angeles is a sprawling Southern California city and the center of
763
+ the nation's film and television industry.
764
+ </p>
765
+ <div slot="cta">
766
+ <auro-hyperlink type="cta" href="/">
767
+ Book a Flight
768
+ </auro-hyperlink>
769
+ </div>
770
+ </auro-card>
771
+ <auro-card
772
+ class="blue-card-example"
773
+ >
774
+ <auro-header slot="header" level="2" display="500" style="margin-top: -1rem; display: inline-block">
775
+ Seattle, WA (SEA) to<br>
776
+ Los Angeles (LAX)
777
+ </auro-header>
778
+ <p slot="description">
779
+ Los Angeles is a sprawling Southern California city and the center of
780
+ the nation's film and television industry.
781
+ </p>
782
+ <div slot="cta">
783
+ <auro-hyperlink type="cta" href="/" ondark>
784
+ Book a Flight
785
+ </auro-hyperlink>
786
+ </div>
787
+ </auro-card>
788
+ </div>
789
+ ```
790
+ <!-- AURO-GENERATED-CONTENT:END -->
791
+ </auro-accordion>
792
+
793
+ ## Restyle Component with CSS Variables
794
+
795
+ The component may be restyled by changing the values of the following token(s).
796
+
797
+ <!-- Remove section if component does not have any component specific tokens -->
798
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
799
+ <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
800
+
801
+ ```scss
802
+ :host {
803
+ --ds-auro-card-border-color: transparent;
804
+ --ds-auro-card-background-color: transparent;
805
+ --ds-auro-card-texticon-color: inherit;
806
+ }
807
+ ```
808
+ <!-- AURO-GENERATED-CONTENT:END -->