@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/index.md
ADDED
|
@@ -0,0 +1,836 @@
|
|
|
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`
|
|
5
|
+
-->
|
|
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 -->
|
|
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
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
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 -->
|
|
18
|
+
The `<auro-card>` element can be use in a variety of ways, including:
|
|
19
|
+
|
|
20
|
+
- Navigation: Cards can be used for navigation purposes.
|
|
21
|
+
- Featured information: Cards can be used to display featured information or related content.
|
|
22
|
+
- Content containers: Cards can be used to organize information consistently within a page.
|
|
23
|
+
- Grouping information: Cards can be used to group information.
|
|
24
|
+
- Providing a visual hierarchy: Cards can provide a clear visual hierarchy, organizing information into brief, self-contained units.
|
|
25
|
+
- Providing an overview: Cards can serve as an overview and an entry point for more detailed information.
|
|
26
|
+
- Providing a summary: Cards can present a summary and link to additional details.
|
|
27
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
28
|
+
|
|
29
|
+
## Example(s)
|
|
30
|
+
|
|
31
|
+
### Default
|
|
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.
|
|
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.
|
|
36
|
+
|
|
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.
|
|
38
|
+
|
|
39
|
+
<div class="exampleWrapper">
|
|
40
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/default.html) -->
|
|
41
|
+
<!-- The below content is automatically added from ../apiExamples/default.html -->
|
|
42
|
+
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
|
|
43
|
+
<auro-card>
|
|
44
|
+
<img
|
|
45
|
+
slot="image"
|
|
46
|
+
src="https://picsum.photos/300/300?random=0"
|
|
47
|
+
alt="Random insert"/>
|
|
48
|
+
<auro-header slot="header" level="2" display="500">Display card title here</auro-header>
|
|
49
|
+
<p slot="description">
|
|
50
|
+
Context goes here.
|
|
51
|
+
</p>
|
|
52
|
+
<div slot="cta">
|
|
53
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
54
|
+
More info
|
|
55
|
+
</auro-hyperlink>
|
|
56
|
+
</div>
|
|
57
|
+
</auro-card>
|
|
58
|
+
<auro-card style="max-width: 300px">
|
|
59
|
+
<img
|
|
60
|
+
slot="image"
|
|
61
|
+
src="https://picsum.photos/300/200?random=1"
|
|
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. Use this area to communicate more information to your users.
|
|
66
|
+
</p>
|
|
67
|
+
<div slot="cta">
|
|
68
|
+
<auro-hyperlink href="/" nav target="_blank" type="cta">
|
|
69
|
+
More info
|
|
70
|
+
</auro-hyperlink>
|
|
71
|
+
</div>
|
|
72
|
+
</auro-card>
|
|
73
|
+
<auro-card style="max-width: 150px">
|
|
74
|
+
<img
|
|
75
|
+
slot="image"
|
|
76
|
+
src="https://picsum.photos/150/250?random=1"
|
|
77
|
+
alt="Random insert"/>
|
|
78
|
+
<auro-header slot="header" level="2" display="500">Display title</auro-header>
|
|
79
|
+
<p slot="description">
|
|
80
|
+
Context goes here.
|
|
81
|
+
</p>
|
|
82
|
+
<div slot="cta">
|
|
83
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
84
|
+
More info
|
|
85
|
+
</auro-hyperlink>
|
|
86
|
+
</div>
|
|
87
|
+
</auro-card>
|
|
88
|
+
</div>
|
|
89
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
90
|
+
</div>
|
|
91
|
+
<auro-accordion alignRight>
|
|
92
|
+
<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 -->
|
|
95
|
+
|
|
96
|
+
```html
|
|
97
|
+
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
|
|
98
|
+
<auro-card>
|
|
99
|
+
<img
|
|
100
|
+
slot="image"
|
|
101
|
+
src="https://picsum.photos/300/300?random=0"
|
|
102
|
+
alt="Random insert"/>
|
|
103
|
+
<auro-header slot="header" level="2" display="500">Display card title here</auro-header>
|
|
104
|
+
<p slot="description">
|
|
105
|
+
Context goes here.
|
|
106
|
+
</p>
|
|
107
|
+
<div slot="cta">
|
|
108
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
109
|
+
More info
|
|
110
|
+
</auro-hyperlink>
|
|
111
|
+
</div>
|
|
112
|
+
</auro-card>
|
|
113
|
+
<auro-card style="max-width: 300px">
|
|
114
|
+
<img
|
|
115
|
+
slot="image"
|
|
116
|
+
src="https://picsum.photos/300/200?random=1"
|
|
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. Use this area to communicate more information to your users.
|
|
121
|
+
</p>
|
|
122
|
+
<div slot="cta">
|
|
123
|
+
<auro-hyperlink href="/" nav target="_blank" type="cta">
|
|
124
|
+
More info
|
|
125
|
+
</auro-hyperlink>
|
|
126
|
+
</div>
|
|
127
|
+
</auro-card>
|
|
128
|
+
<auro-card style="max-width: 150px">
|
|
129
|
+
<img
|
|
130
|
+
slot="image"
|
|
131
|
+
src="https://picsum.photos/150/250?random=1"
|
|
132
|
+
alt="Random insert"/>
|
|
133
|
+
<auro-header slot="header" level="2" display="500">Display title</auro-header>
|
|
134
|
+
<p slot="description">
|
|
135
|
+
Context goes here.
|
|
136
|
+
</p>
|
|
137
|
+
<div slot="cta">
|
|
138
|
+
<auro-hyperlink href="/" nav target="_blank">
|
|
139
|
+
More info
|
|
140
|
+
</auro-hyperlink>
|
|
141
|
+
</div>
|
|
142
|
+
</auro-card>
|
|
143
|
+
</div>
|
|
144
|
+
```
|
|
145
|
+
<!-- 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
|
+
</auro-accordion>
|