@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/index.md CHANGED
@@ -1,20 +1,20 @@
1
1
  <!--
2
- The index.md file is a compiled document. No edits should be made directly to this file.
3
- README.md is created by running `npm run build:docs`.
4
- This file is generated based on a template fetched from `./docs/partials/index.md`
2
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
3
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
4
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
5
5
  -->
6
6
 
7
- # Card
8
-
9
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/description.md) -->
10
- <!-- The below content is automatically added from ../docs/partials/description.md -->
7
+ # Card
8
+
9
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
10
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
11
11
  `<auro-card>` is highly customizable [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) is a type of UI design component that display content and actions about a single topic.
12
12
  <!-- AURO-GENERATED-CONTENT:END -->
13
13
 
14
- ## auro-card use cases
15
-
16
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/useCases.md) -->
17
- <!-- The below content is automatically added from ../docs/partials/useCases.md -->
14
+ ## Use Cases
15
+
16
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
17
+ <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
18
18
  The `<auro-card>` element can be use in a variety of ways, including:
19
19
 
20
20
  - Navigation: Cards can be used for navigation purposes.
@@ -28,17 +28,20 @@ The `<auro-card>` element can be use in a variety of ways, including:
28
28
 
29
29
  ## Example(s)
30
30
 
31
- ### Default
31
+ ### Basic
32
32
 
33
- The following `default` example, illustrates using the `image`, `description` and `cta` content slots. The `default` card has no restrictions or definition of containing layout, all widths are 100% to allow for flexibility of presentation. Width of the image and/or width of the `description` content will determine the overall width of the element in its parental container.
33
+ The basic example demonstrates the `image`, `description`, and `cta` content slots. The default card has 100% width for flexible presentation within its container.
34
34
 
35
- For `<auro-card>` content, while there is flexibility with use, the default preference illustrated uses the `<auro-header>` element using the `display="500"` attribute and value. A basic `<p>` element can be used for the body copy. For the `cta` slot, use either the default `<auro-hyperlink>` or `<auro-hyperlink>` with the `type="cta"` type attribute and value as illustrated in the second example.
35
+ **Content recommendations:**
36
+ - Use `<auro-header>` with `display="500"` for headings
37
+ - Use `<p>` elements for body text
38
+ - Use `<auro-hyperlink>` or `<auro-hyperlink type="cta">` for the `cta` slot
36
39
 
37
- Notice in the second example, there is a CSS constraint of `max-width: 300px` to allow the text in the `description` to wrap at the desired width. Similarly the third example has a constraint of `max-width: 150px`. As illustrated there is a lot of layout flexibility afforded to users.
40
+ Apply CSS constraints like `max-width` to control text wrapping and layout as needed, as illustrated in the second example.
38
41
 
39
42
  <div class="exampleWrapper">
40
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/default.html) -->
41
- <!-- The below content is automatically added from ../apiExamples/default.html -->
43
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
44
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
42
45
  <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
43
46
  <auro-card>
44
47
  <img
@@ -50,7 +53,7 @@ Notice in the second example, there is a CSS constraint of `max-width: 300px` to
50
53
  Context goes here.
51
54
  </p>
52
55
  <div slot="cta">
53
- <auro-hyperlink href="/" nav target="_blank">
56
+ <auro-hyperlink href="/" type="nav" target="_blank">
54
57
  More info
55
58
  </auro-hyperlink>
56
59
  </div>
@@ -80,7 +83,7 @@ Notice in the second example, there is a CSS constraint of `max-width: 300px` to
80
83
  Context goes here.
81
84
  </p>
82
85
  <div slot="cta">
83
- <auro-hyperlink href="/" nav target="_blank">
86
+ <auro-hyperlink href="/" type="nav" target="_blank">
84
87
  More info
85
88
  </auro-hyperlink>
86
89
  </div>
@@ -90,8 +93,8 @@ Notice in the second example, there is a CSS constraint of `max-width: 300px` to
90
93
  </div>
91
94
  <auro-accordion alignRight>
92
95
  <span slot="trigger">See code</span>
93
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/default.html) -->
94
- <!-- The below code snippet is automatically added from ../apiExamples/default.html -->
96
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
97
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
95
98
 
96
99
  ```html
97
100
  <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
@@ -105,7 +108,7 @@ Notice in the second example, there is a CSS constraint of `max-width: 300px` to
105
108
  Context goes here.
106
109
  </p>
107
110
  <div slot="cta">
108
- <auro-hyperlink href="/" nav target="_blank">
111
+ <auro-hyperlink href="/" type="nav" target="_blank">
109
112
  More info
110
113
  </auro-hyperlink>
111
114
  </div>
@@ -135,7 +138,7 @@ Notice in the second example, there is a CSS constraint of `max-width: 300px` to
135
138
  Context goes here.
136
139
  </p>
137
140
  <div slot="cta">
138
- <auro-hyperlink href="/" nav target="_blank">
141
+ <auro-hyperlink href="/" type="nav" target="_blank">
139
142
  More info
140
143
  </auro-hyperlink>
141
144
  </div>
@@ -143,694 +146,5 @@ Notice in the second example, there is a CSS constraint of `max-width: 300px` to
143
146
  </div>
144
147
  ```
145
148
  <!-- AURO-GENERATED-CONTENT:END -->
146
- </auro-accordion>
147
-
148
- ### Inset *Container* or *Content*
149
-
150
- 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.
151
-
152
- <div class="exampleWrapper">
153
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/inset.html) -->
154
- <!-- The below content is automatically added from ../apiExamples/inset.html -->
155
- <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
156
- <auro-card variant="inset-container" style="max-width: 300px">
157
- <img
158
- slot="image"
159
- src="https://picsum.photos/200/200?random=0"
160
- alt="Random insert"/>
161
- <auro-header slot="header" level="2" display="500">Inset 'Container'</auro-header>
162
- <p slot="description">
163
- Context goes here. Describe the page this card represents.
164
- </p>
165
- <div slot="cta">
166
- <auro-hyperlink href="/" nav target="_blank">
167
- More info
168
- </auro-hyperlink>
169
- </div>
170
- </auro-card>
171
- <auro-card variant="inset-content" style="max-width: 300px">
172
- <img
173
- slot="image"
174
- src="https://picsum.photos/200/200?random=1"
175
- alt="Random insert"/>
176
- <auro-header slot="header" level="2" display="500">Inset 'Content'</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
- </div>
187
- <!-- AURO-GENERATED-CONTENT:END -->
188
- </div>
189
- <auro-accordion alignRight>
190
- <span slot="trigger">See code</span>
191
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/inset.html) -->
192
- <!-- The below code snippet is automatically added from ../apiExamples/inset.html -->
193
-
194
- ```html
195
- <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
196
- <auro-card variant="inset-container" style="max-width: 300px">
197
- <img
198
- slot="image"
199
- src="https://picsum.photos/200/200?random=0"
200
- alt="Random insert"/>
201
- <auro-header slot="header" level="2" display="500">Inset 'Container'</auro-header>
202
- <p slot="description">
203
- Context goes here. Describe the page this card represents.
204
- </p>
205
- <div slot="cta">
206
- <auro-hyperlink href="/" nav target="_blank">
207
- More info
208
- </auro-hyperlink>
209
- </div>
210
- </auro-card>
211
- <auro-card variant="inset-content" style="max-width: 300px">
212
- <img
213
- slot="image"
214
- src="https://picsum.photos/200/200?random=1"
215
- alt="Random insert"/>
216
- <auro-header slot="header" level="2" display="500">Inset 'Content'</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
- </div>
227
- ```
228
- <!-- AURO-GENERATED-CONTENT:END -->
229
- </auro-accordion>
230
-
231
- ### Bordered
232
-
233
- Illustrated below is the `border` attribute. This feature defines a single boarder around the whole `<auro-card>` element with a pre-defined rounded corner.
234
-
235
- <div class="exampleWrapper">
236
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/bordered.html) -->
237
- <!-- The below content is automatically added from ../apiExamples/bordered.html -->
238
- <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
239
- <auro-card variant="inset-container" style="max-width: 300px" border>
240
- <img
241
- slot="image"
242
- src="https://picsum.photos/200/300?random=3"
243
- alt="Random insert"/>
244
- <auro-header slot="header" level="2" display="500">Inset Container</auro-header>
245
- <p slot="description">
246
- Context goes here. Describe the page this card represents.
247
- </p>
248
- <div slot="cta">
249
- <auro-hyperlink href="/" nav target="_blank">
250
- More info
251
- </auro-hyperlink>
252
- </div>
253
- </auro-card>
254
- <auro-card variant="inset-content" style="max-width: 300px" border>
255
- <img
256
- slot="image"
257
- src="https://picsum.photos/200/300?random=4"
258
- alt="Random insert"/>
259
- <auro-header slot="header" level="2" display="500">Inset Content</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
- </div>
270
- <!-- AURO-GENERATED-CONTENT:END -->
271
- </div>
272
- <auro-accordion alignRight>
273
- <span slot="trigger">See code</span>
274
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/bordered.html) -->
275
- <!-- The below code snippet is automatically added from ../apiExamples/bordered.html -->
276
-
277
- ```html
278
- <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
279
- <auro-card variant="inset-container" style="max-width: 300px" border>
280
- <img
281
- slot="image"
282
- src="https://picsum.photos/200/300?random=3"
283
- alt="Random insert"/>
284
- <auro-header slot="header" level="2" display="500">Inset Container</auro-header>
285
- <p slot="description">
286
- Context goes here. Describe the page this card represents.
287
- </p>
288
- <div slot="cta">
289
- <auro-hyperlink href="/" nav target="_blank">
290
- More info
291
- </auro-hyperlink>
292
- </div>
293
- </auro-card>
294
- <auro-card variant="inset-content" style="max-width: 300px" border>
295
- <img
296
- slot="image"
297
- src="https://picsum.photos/200/300?random=4"
298
- alt="Random insert"/>
299
- <auro-header slot="header" level="2" display="500">Inset Content</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
- </div>
310
- ```
311
- <!-- AURO-GENERATED-CONTENT:END -->
312
- </auro-accordion>
313
-
314
- ### Navigation
315
-
316
- 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.
317
-
318
- 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.
319
-
320
- <div class="exampleWrapper">
321
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/navigation.html) -->
322
- <!-- The below content is automatically added from ../apiExamples/navigation.html -->
323
- <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 1.8rem;">
324
- <!-- -->
325
- <!-- baseline navigation style auro-card -->
326
- <!-- -->
327
- <auro-card href="/" style="max-width: 300px" center>
328
- <img
329
- slot="image"
330
- src="https://picsum.photos/300/100?random=1"
331
- alt="Random insert 0"/>
332
- <auro-header slot="header" level="2" display="500">
333
- Header
334
- </auro-header>
335
- <div slot="description">
336
- <p>
337
- Context goes here. Describe the page this card represents.
338
- </p>
339
- </div>
340
- <p slot="cta">
341
- More info
342
- </p>
343
- </auro-card>
344
- <!-- -->
345
- <!-- baseline navigation style auro-card with external link icon -->
346
- <!-- -->
347
- <auro-card href="/" target="_blank" style="max-width: 300px" center>
348
- <img
349
- slot="image"
350
- src="https://picsum.photos/300/100?random=2"
351
- alt="Random insert 0"/>
352
- <auro-header slot="header" level="2" display="500">
353
- Header
354
- </auro-header>
355
- <div slot="description">
356
- <p>
357
- Context goes here. Describe the page this card represents.
358
- </p>
359
- </div>
360
- <p slot="cta">
361
- More info
362
- </p>
363
- </auro-card>
364
- <!-- -->
365
- <!-- navigation card centered style with auro-icon -->
366
- <!-- -->
367
- <auro-card
368
- center
369
- class="icon-card"
370
- href="/"
371
- style="max-width: 300px;"
372
- variant="inset-stretch">
373
- <auro-icon
374
- slot="image"
375
- category="interface"
376
- name="qr-code-stroke"
377
- customColor
378
- customSize
379
- style="color: var(--ds-color-brand-breeze-400, #00cff0); width: 60px;">
380
- </auro-icon>
381
- <auro-header slot="header" level="2" display="500">
382
- Card Title
383
- </auro-header>
384
- <p slot="description">
385
- Context goes here. Describe the page this card represents.
386
- </p>
387
- </auro-card>
388
- </div>
389
- <!-- AURO-GENERATED-CONTENT:END -->
390
- </div>
391
- <auro-accordion alignRight>
392
- <span slot="trigger">See code</span>
393
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/navigation.html) -->
394
- <!-- The below code snippet is automatically added from ../apiExamples/navigation.html -->
395
-
396
- ```html
397
- <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 1.8rem;">
398
- <!-- -->
399
- <!-- baseline navigation style auro-card -->
400
- <!-- -->
401
- <auro-card href="/" style="max-width: 300px" center>
402
- <img
403
- slot="image"
404
- src="https://picsum.photos/300/100?random=1"
405
- alt="Random insert 0"/>
406
- <auro-header slot="header" level="2" display="500">
407
- Header
408
- </auro-header>
409
- <div slot="description">
410
- <p>
411
- Context goes here. Describe the page this card represents.
412
- </p>
413
- </div>
414
- <p slot="cta">
415
- More info
416
- </p>
417
- </auro-card>
418
- <!-- -->
419
- <!-- baseline navigation style auro-card with external link icon -->
420
- <!-- -->
421
- <auro-card href="/" target="_blank" style="max-width: 300px" center>
422
- <img
423
- slot="image"
424
- src="https://picsum.photos/300/100?random=2"
425
- alt="Random insert 0"/>
426
- <auro-header slot="header" level="2" display="500">
427
- Header
428
- </auro-header>
429
- <div slot="description">
430
- <p>
431
- Context goes here. Describe the page this card represents.
432
- </p>
433
- </div>
434
- <p slot="cta">
435
- More info
436
- </p>
437
- </auro-card>
438
- <!-- -->
439
- <!-- navigation card centered style with auro-icon -->
440
- <!-- -->
441
- <auro-card
442
- center
443
- class="icon-card"
444
- href="/"
445
- style="max-width: 300px;"
446
- variant="inset-stretch">
447
- <auro-icon
448
- slot="image"
449
- category="interface"
450
- name="qr-code-stroke"
451
- customColor
452
- customSize
453
- style="color: var(--ds-color-brand-breeze-400, #00cff0); width: 60px;">
454
- </auro-icon>
455
- <auro-header slot="header" level="2" display="500">
456
- Card Title
457
- </auro-header>
458
- <p slot="description">
459
- Context goes here. Describe the page this card represents.
460
- </p>
461
- </auro-card>
462
- </div>
463
- ```
464
- <!-- AURO-GENERATED-CONTENT:END -->
465
- </auro-accordion>
466
-
467
- ### Centered Content
468
-
469
- 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.
470
-
471
- <div class="exampleWrapper">
472
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/center.html) -->
473
- <!-- The below content is automatically added from ../apiExamples/center.html -->
474
- <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 2rem;">
475
- <!--
476
- Small image option
477
- -->
478
- <auro-card
479
- center
480
- style="
481
- justify-content:center;
482
- align-items:center;
483
- width: 350px;
484
- ">
485
- <img
486
- slot="image"
487
- src="https://picsum.photos/300/100?random=1"
488
- alt="Random insert 0"
489
- style="max-width: 200px; overflow: hidden; width: unset; margin: 0 auto;"
490
- />
491
- <auro-header slot="header" level="2" display="500" style="max-width: 250px;">Centered Content</auro-header>
492
- <p slot="description" style="max-width: 250px;">
493
- This is centered description content. Also, notice the CTA and image are
494
- centered.
495
- </p>
496
- <auro-hyperlink href="/" nav target="_blank" slot="cta">
497
- More info
498
- </auro-hyperlink>
499
- </auro-card>
500
- <!--
501
- Avatar image option
502
- -->
503
- <auro-card style="max-width: 250px;" center>
504
- <auro-avatar slot="image" code="pdx" ariaVisible alt="iconic image of Portland, OR"></auro-avatar>
505
- <auro-header slot="header" level="2" display="500">
506
- Header
507
- </auro-header>
508
- <p slot="description">
509
- Context goes here. Describe the page this card represents.
510
- </p>
511
- <auro-hyperlink href="/" nav target="_blank" slot="cta">
512
- More info
513
- </auro-hyperlink>
514
- </auro-card>
515
- <!--
516
- Icon size image option using variant="inset-container"
517
- -->
518
- <auro-card
519
- center
520
- style="max-width: 280px;"
521
- variant="inset-container">
522
- <auro-icon
523
- slot="image"
524
- category="interface"
525
- name="qr-code-stroke"
526
- customColor
527
- customSize
528
- style="color: var(--ds-color-brand-breeze-400, #00cff0); width: 60px;">
529
- </auro-icon>
530
- <auro-header slot="header" level="2" display="500">
531
- Card Title
532
- </auro-header>
533
- <p slot="description">
534
- Context goes here. Describe the page this card represents.
535
- </p>
536
- <auro-hyperlink href="/" nav target="_blank" slot="cta">
537
- More info
538
- </auro-hyperlink>
539
- </auro-card>
540
- </div>
541
- <!-- AURO-GENERATED-CONTENT:END -->
542
- </div>
543
- <auro-accordion alignRight>
544
- <span slot="trigger">See code</span>
545
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/center.html) -->
546
- <!-- The below code snippet is automatically added from ../apiExamples/center.html -->
547
-
548
- ```html
549
- <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 2rem;">
550
- <!--
551
- Small image option
552
- -->
553
- <auro-card
554
- center
555
- style="
556
- justify-content:center;
557
- align-items:center;
558
- width: 350px;
559
- ">
560
- <img
561
- slot="image"
562
- src="https://picsum.photos/300/100?random=1"
563
- alt="Random insert 0"
564
- style="max-width: 200px; overflow: hidden; width: unset; margin: 0 auto;"
565
- />
566
- <auro-header slot="header" level="2" display="500" style="max-width: 250px;">Centered Content</auro-header>
567
- <p slot="description" style="max-width: 250px;">
568
- This is centered description content. Also, notice the CTA and image are
569
- centered.
570
- </p>
571
- <auro-hyperlink href="/" nav target="_blank" slot="cta">
572
- More info
573
- </auro-hyperlink>
574
- </auro-card>
575
- <!--
576
- Avatar image option
577
- -->
578
- <auro-card style="max-width: 250px;" center>
579
- <auro-avatar slot="image" code="pdx" ariaVisible alt="iconic image of Portland, OR"></auro-avatar>
580
- <auro-header slot="header" level="2" display="500">
581
- Header
582
- </auro-header>
583
- <p slot="description">
584
- Context goes here. Describe the page this card represents.
585
- </p>
586
- <auro-hyperlink href="/" nav target="_blank" slot="cta">
587
- More info
588
- </auro-hyperlink>
589
- </auro-card>
590
- <!--
591
- Icon size image option using variant="inset-container"
592
- -->
593
- <auro-card
594
- center
595
- style="max-width: 280px;"
596
- variant="inset-container">
597
- <auro-icon
598
- slot="image"
599
- category="interface"
600
- name="qr-code-stroke"
601
- customColor
602
- customSize
603
- style="color: var(--ds-color-brand-breeze-400, #00cff0); width: 60px;">
604
- </auro-icon>
605
- <auro-header slot="header" level="2" display="500">
606
- Card Title
607
- </auro-header>
608
- <p slot="description">
609
- Context goes here. Describe the page this card represents.
610
- </p>
611
- <auro-hyperlink href="/" nav target="_blank" slot="cta">
612
- More info
613
- </auro-hyperlink>
614
- </auro-card>
615
- </div>
616
- ```
617
- <!-- AURO-GENERATED-CONTENT:END -->
618
- </auro-accordion>
619
-
620
- ### Complex cards
621
-
622
- 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.
623
-
624
- 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.
625
-
626
- <div class="exampleWrapper">
627
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/typography-cards.html) -->
628
- <!-- The below content is automatically added from ../apiExamples/typography-cards.html -->
629
- <style>
630
- .complex-card-wrapper {
631
- display: flex;
632
- padding: var(--ds-size-400, 2rem);
633
- }
634
- .white-card-example {
635
- background: var(--ds-color-background-lightest, #ffffff);
636
- }
637
- .blue-card-example {
638
- background: var(--ds-color-background-darker, #01426a);
639
- color: var(--ds-color-text-primary-inverse, #ffffff);
640
- }
641
- .white-card-example,
642
- .blue-card-example {
643
- flex: 1;
644
- padding: var(--ds-size-400, 2rem) var(--ds-size-300, 1.5rem);
645
- }
646
- .white-card-example::part(content),
647
- .blue-card-example::part(content) {
648
- padding: var(--ds-size-400, 2rem) var(--ds-size-600, 3rem) 0;
649
- }
650
- .white-card-example::part(cta),
651
- .blue-card-example::part(cta) {
652
- display: flex;
653
- justify-content: center;
654
- }
655
- .white-card-example::part(header),
656
- .blue-card-example::part(header) {
657
- font-size: var(--ds-size-300, 1.5rem);
658
- }
659
- </style>
660
- <div
661
- class="complex-card-wrapper"
662
- >
663
- <auro-card
664
- class="white-card-example"
665
- >
666
- <auro-header slot="header" level="2" display="500" style="margin-top: -1rem; display: inline-block">
667
- Seattle, WA (SEA) to<br>
668
- Los Angeles (LAX)
669
- </auro-header>
670
- <p slot="description">
671
- Los Angeles is a sprawling Southern California city and the center of
672
- the nation's film and television industry.
673
- </p>
674
- <div slot="cta">
675
- <auro-hyperlink type="cta" href="/">
676
- Book a Flight
677
- </auro-hyperlink>
678
- </div>
679
- </auro-card>
680
- <auro-card
681
- class="blue-card-example"
682
- >
683
- <auro-header slot="header" level="2" display="500" style="margin-top: -1rem; display: inline-block">
684
- Seattle, WA (SEA) to<br>
685
- Los Angeles (LAX)
686
- </auro-header>
687
- <p slot="description">
688
- Los Angeles is a sprawling Southern California city and the center of
689
- the nation's film and television industry.
690
- </p>
691
- <div slot="cta">
692
- <auro-hyperlink type="cta" href="/" nav ondark>
693
- Book a Flight
694
- </auro-hyperlink>
695
- </div>
696
- </auro-card>
697
- </div>
698
- <!-- AURO-GENERATED-CONTENT:END -->
699
- </div>
700
- <auro-accordion alignRight>
701
- <span slot="trigger">See code</span>
702
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/typography-cards.html) -->
703
- <!-- The below code snippet is automatically added from ../apiExamples/typography-cards.html -->
704
-
705
- ```html
706
- <style>
707
- .complex-card-wrapper {
708
- display: flex;
709
- padding: var(--ds-size-400, 2rem);
710
- }
711
- .white-card-example {
712
- background: var(--ds-color-background-lightest, #ffffff);
713
- }
714
- .blue-card-example {
715
- background: var(--ds-color-background-darker, #01426a);
716
- color: var(--ds-color-text-primary-inverse, #ffffff);
717
- }
718
- .white-card-example,
719
- .blue-card-example {
720
- flex: 1;
721
- padding: var(--ds-size-400, 2rem) var(--ds-size-300, 1.5rem);
722
- }
723
- .white-card-example::part(content),
724
- .blue-card-example::part(content) {
725
- padding: var(--ds-size-400, 2rem) var(--ds-size-600, 3rem) 0;
726
- }
727
- .white-card-example::part(cta),
728
- .blue-card-example::part(cta) {
729
- display: flex;
730
- justify-content: center;
731
- }
732
- .white-card-example::part(header),
733
- .blue-card-example::part(header) {
734
- font-size: var(--ds-size-300, 1.5rem);
735
- }
736
- </style>
737
- <div
738
- class="complex-card-wrapper"
739
- >
740
- <auro-card
741
- class="white-card-example"
742
- >
743
- <auro-header slot="header" level="2" display="500" style="margin-top: -1rem; display: inline-block">
744
- Seattle, WA (SEA) to<br>
745
- Los Angeles (LAX)
746
- </auro-header>
747
- <p slot="description">
748
- Los Angeles is a sprawling Southern California city and the center of
749
- the nation's film and television industry.
750
- </p>
751
- <div slot="cta">
752
- <auro-hyperlink type="cta" href="/">
753
- Book a Flight
754
- </auro-hyperlink>
755
- </div>
756
- </auro-card>
757
- <auro-card
758
- class="blue-card-example"
759
- >
760
- <auro-header slot="header" level="2" display="500" style="margin-top: -1rem; display: inline-block">
761
- Seattle, WA (SEA) to<br>
762
- Los Angeles (LAX)
763
- </auro-header>
764
- <p slot="description">
765
- Los Angeles is a sprawling Southern California city and the center of
766
- the nation's film and television industry.
767
- </p>
768
- <div slot="cta">
769
- <auro-hyperlink type="cta" href="/" nav ondark>
770
- Book a Flight
771
- </auro-hyperlink>
772
- </div>
773
- </auro-card>
774
- </div>
775
- ```
776
- <!-- AURO-GENERATED-CONTENT:END -->
777
- </auro-accordion>
778
-
779
- ### Recommended Use and Version Control
780
-
781
- There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-card` custom element is defined automatically.
782
-
783
- To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroCard.register(name)` method and pass in a unique name.
784
-
785
- ```js
786
- import { AuroCard } from '@aurodesignsystem/auro-card/class';
787
-
788
- AuroCard.register('custom-card');
789
- ```
790
-
791
- This will create a new custom element that you can use in your HTML that will function identically to the `auro-card` element.
792
-
793
- <div class="exampleWrapper">
794
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
795
- <!-- The below content is automatically added from ../apiExamples/custom.html -->
796
- <custom-card>
797
- <img
798
- slot="image"
799
- src="https://picsum.photos/300/300?random=0"
800
- alt="Random insert"/>
801
- <h3 slot="header">Card Title</h3>
802
- <p slot="description">
803
- Context goes here.
804
- </p>
805
- <div slot="cta">
806
- <auro-hyperlink href="/" nav target="_blank">
807
- More info
808
- </auro-hyperlink>
809
- </div>
810
- </custom-card>
811
- <!-- AURO-GENERATED-CONTENT:END -->
812
- </div>
813
- <auro-accordion alignRight>
814
- <span slot="trigger">See code</span>
815
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
816
- <!-- The below code snippet is automatically added from ../apiExamples/custom.html -->
817
-
818
- ```html
819
- <custom-card>
820
- <img
821
- slot="image"
822
- src="https://picsum.photos/300/300?random=0"
823
- alt="Random insert"/>
824
- <h3 slot="header">Card Title</h3>
825
- <p slot="description">
826
- Context goes here.
827
- </p>
828
- <div slot="cta">
829
- <auro-hyperlink href="/" nav target="_blank">
830
- More info
831
- </auro-hyperlink>
832
- </div>
833
- </custom-card>
834
- ```
835
- <!-- AURO-GENERATED-CONTENT:END -->
836
149
  </auro-accordion>
150
+