<dy-card>
Cards are flexible containers that group related content and actions. They can contain various types of content including text, images, and controls, making them versatile building blocks for organizing information.
Example
Loading...
<dy-card
style=${"width: 250px;"}
.avatar=${"https://api.dicebear.com/5.x/bottts-neutral/svg"}
.preview=${"https://picsum.photos/400/300"}
.header=${"This is Card"}> Fugiat do laboris ad officia in anim qui mollit nulla reprehenderit pariatur anim sunt. </dy-card>
API
DuoyunCardElement
Shadow DOM; Extends DuoyunLoadableBaseElement
DuoyunCardElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
avatar(avatar) |
Yes | string |
preview(preview) |
Yes | string |
header(header) |
Yes | StringList<'slot'> |
detail(detail) |
Yes | string |
detailRight(detail-right) |
Yes | string |
actions |
Yes | ActionItem[] |
crossorigin(crossorigin) |
Yes | 'anonymous' | 'use-credentials' |
DuoyunCardElement Other
| Type | Value |
|---|---|
| Slot | header, detail, detail-right, body, unnamed, footer |
| Part | preview, avatar |
DuoyunLoadableBaseElement
Shadow DOM; Extends GemElement
DuoyunLoadableBaseElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
loading(loading) |
Yes | boolean |