-
Notifications
You must be signed in to change notification settings - Fork 42
/
card.element.ts
67 lines (60 loc) · 1.58 KB
/
card.element.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { css } from 'lit';
import { globalStyle } from '@cds/core/internal';
import { CdsInternalPanel } from '@cds/core/internal-components/panel';
import styles from './card.element.scss';
/**
* Web component card.
*
* ```typescript
* import '@cds/core/card/register.js';
* ```
*
* ```html
* <cds-card aria-labelledby="{label your card}">
<div cds-layout="vertical gap:md">
<h2 id="{label your card}" cds-text="section">
<!-- Card title -->
</h2>
<cds-divider cds-card-remove-margin></cds-divider>
<div cds-text="body light">
<!-- Card content -->
</div>
<cds-divider cds-card-remove-margin></cds-divider>
<div cds-layout="horizontal gap:sm align:vertical-center">
<cds-button action="flat-inline">View</cds-button>
</div>
</div>
</cds-card>
* ```
*
* @beta
* @element cds-card
* @slot - For projecting card content
* @cssprop --width
* @cssprop --height
* @cssprop --color
* @cssprop --overflow
* @cssprop --overflow-x
* @cssprop --overflow-y
* @cssprop --background
* @cssprop --border
* @cssprop --border-radius
* @cssprop --padding
* @cssprop --box-shadow
* @cssprop --cds-card-remove-margin
*/
export class CdsCard extends CdsInternalPanel {
@globalStyle() globalStyles = css`
[cds-card-remove-margin] {
margin-left: calc(-1 * var(--card-remove-margin));
width: calc(100% + calc(var(--card-remove-margin) * 2));
}
`;
static get styles() {
return [...super.styles, styles];
}
connectedCallback() {
super.connectedCallback();
this.role = 'region';
}
}