Skip to content

Commit 39e838f

Browse files
author
Spycher, Roman
committed
493 documentation updated
1 parent f7029b7 commit 39e838f

7 files changed

Lines changed: 270 additions & 21 deletions

‎docs/components/six-card.md‎

Lines changed: 125 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,140 @@ Simple card implementation.
66
<docs-demo-six-card-0></docs-demo-six-card-0>
77

88
```html
9-
<six-card>
10-
<h1>Lorem ipsum.</h1>
11-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
12-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
13-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
14-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
15-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
16-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
17-
</six-card>
9+
<h3>Basic Usage</h3>
10+
<div style="max-width: 400px; margin: auto">
11+
<six-card>
12+
<h2 slot="header">Card Title</h2>
13+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
14+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
15+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
16+
</six-card>
17+
</div>
18+
```
19+
20+
21+
<docs-demo-six-card-1></docs-demo-six-card-1>
22+
23+
```html
24+
<h3>Media Cards</h3>
25+
<div style="max-width: 400px; margin: auto">
26+
<six-card>
27+
<img slot="media"
28+
src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCA1MTInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHJlY3Qgd2lkdGg9JzEwMjQnIGhlaWdodD0nNTEyJyBmaWxsPScjY2NjY2NjJyAvPjwvc3ZnPg=="
29+
alt="Grey placeholder"
30+
>
31+
<h2 slot="header">Card Title</h2>
32+
<h3 slot="header">Card Subtitle</h3>
33+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
34+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
35+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
36+
</six-card>
37+
</div>
38+
```
39+
40+
41+
<docs-demo-six-card-2></docs-demo-six-card-2>
42+
43+
```html
44+
<h3>Header Icon</h3>
45+
<div style="max-width: 400px; margin: auto">
46+
<six-card>
47+
<h2 slot="header">Card Title</h2>
48+
<h3 slot="header">Card Subtitle</h3>
49+
<six-icon slot="header-actions" name="headset" size="large"></six-icon>
50+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
51+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
52+
</six-card>
53+
</div>
54+
```
55+
56+
57+
<docs-demo-six-card-3></docs-demo-six-card-3>
58+
59+
```html
60+
<h3>Tag</h3>
61+
<div style="max-width: 400px; margin: auto">
62+
<six-card>
63+
<h2 slot="header">Card Title</h2>
64+
<h3 slot="header">Card Subtitle</h3>
65+
<six-tag size="small" pill>Tag</six-tag>
66+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
67+
</six-card>
68+
</div>
69+
```
70+
71+
72+
<docs-demo-six-card-4></docs-demo-six-card-4>
73+
74+
```html
75+
<h3>Card Buttons</h3>
76+
<div style="max-width: 400px; margin: auto">
77+
<six-card shadow>
78+
<h2 slot="header">Card Title</h2>
79+
<h3 slot="header">Card Subtitle</h3>
80+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
81+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
82+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
83+
<six-button slot="footer-actions" type="secondary">Action 1</six-button>
84+
<six-button slot="footer-actions" type="primary">Primary Action</six-button>
85+
</six-card>
86+
</div>
87+
```
88+
89+
90+
<docs-demo-six-card-5></docs-demo-six-card-5>
91+
92+
```html
93+
<h3>Footer with Icon Buttons and Action</h3>
94+
<div style="max-width: 400px; margin: auto">
95+
<six-card>
96+
<img slot="media"
97+
src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCA1MTInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHJlY3Qgd2lkdGg9JzEwMjQnIGhlaWdodD0nNTEyJyBmaWxsPScjY2NjY2NjJyAvPjwvc3ZnPg=="
98+
alt="Grey placeholder"
99+
>
100+
<h2 slot="header">Card Title</h2>
101+
<h3 slot="header">Card Subtitle</h3>
102+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
103+
<six-icon-button slot="footer" name="share" size="small" label="Share"></six-icon-button>
104+
<six-icon-button slot="footer" name="edit" size="small" label="Edit"></six-icon-button>
105+
<six-icon-button slot="footer" name="delete" size="small" label="Delete"></six-icon-button>
106+
<six-button slot="footer-actions" type="primary">Button</six-button>
107+
</six-card>
108+
</div>
18109
```
19110

20111

21112

22113
<!-- Auto Generated Below -->
23114

24115

116+
## Properties
117+
118+
| Property | Attribute | Description | Type | Default |
119+
| -------- | --------- | ----------------------------- | --------- | ------- |
120+
| `shadow` | `shadow` | Set to true to show a shadow. | `boolean` | `false` |
121+
122+
25123
## Slots
26124

27-
| Slot | Description |
28-
| ---- | --------------------------------------- |
29-
| | Used to define the content of the card. |
125+
| Slot | Description |
126+
| ------------------ | -------------------------------------------------------------------------------- |
127+
| | Used to define the content of the card. |
128+
| `"footer"` | An optional footer for the card, left-aligned (e.g. secondary/icon buttons). |
129+
| `"footer-actions"` | An optional actions section in the footer, right-aligned (e.g. primary actions). |
130+
| `"header"` | An optional header for the card. |
131+
| `"media"` | An optional media section to render at the start (top) of the card. |
132+
133+
134+
## Shadow Parts
135+
136+
| Part | Description |
137+
| ----------- | ----------------------------- |
138+
| `"base"` | The component's base wrapper. |
139+
| `"content"` | The content container. |
140+
| `"footer"` | The footer container. |
141+
| `"header"` | The header container. |
142+
| `"image"` | The media container. |
30143

31144

32145
----------------------------------------------

‎docs/examples/docs-demo-six-card-0.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
22
<div>
33

4-
<six-card>
5-
<h1>Lorem ipsum.</h1>
6-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
7-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
8-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
9-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
10-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
11-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
12-
</six-card>
4+
<h3>Basic Usage</h3>
5+
<div style="max-width: 400px; margin: auto">
6+
<six-card>
7+
<h2 slot="header">Card Title</h2>
8+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
9+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
10+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
11+
</six-card>
12+
</div>
1313

1414
</div>
1515
</template>

‎docs/examples/docs-demo-six-card-1.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div>
3+
4+
<h3>Media Cards</h3>
5+
<div style="max-width: 400px; margin: auto">
6+
<six-card>
7+
<img slot="media"
8+
src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCA1MTInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHJlY3Qgd2lkdGg9JzEwMjQnIGhlaWdodD0nNTEyJyBmaWxsPScjY2NjY2NjJyAvPjwvc3ZnPg=="
9+
alt="Grey placeholder"
10+
>
11+
<h2 slot="header">Card Title</h2>
12+
<h3 slot="header">Card Subtitle</h3>
13+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
14+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
15+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
16+
</six-card>
17+
</div>
18+
19+
</div>
20+
</template>
21+
<style>
22+
23+
</style>
24+
<script>
25+
export default {
26+
name: 'docs-demo-six-card-1',
27+
mounted() { }
28+
}
29+
</script>

‎docs/examples/docs-demo-six-card-2.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div>
3+
4+
<h3>Header Icon</h3>
5+
<div style="max-width: 400px; margin: auto">
6+
<six-card>
7+
<h2 slot="header">Card Title</h2>
8+
<h3 slot="header">Card Subtitle</h3>
9+
<six-icon slot="header-actions" name="headset" size="large"></six-icon>
10+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
11+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
12+
</six-card>
13+
</div>
14+
15+
</div>
16+
</template>
17+
<style>
18+
19+
</style>
20+
<script>
21+
export default {
22+
name: 'docs-demo-six-card-2',
23+
mounted() { }
24+
}
25+
</script>

‎docs/examples/docs-demo-six-card-3.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div>
3+
4+
<h3>Tag</h3>
5+
<div style="max-width: 400px; margin: auto">
6+
<six-card>
7+
<h2 slot="header">Card Title</h2>
8+
<h3 slot="header">Card Subtitle</h3>
9+
<six-tag size="small" pill>Tag</six-tag>
10+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
11+
</six-card>
12+
</div>
13+
14+
</div>
15+
</template>
16+
<style>
17+
18+
</style>
19+
<script>
20+
export default {
21+
name: 'docs-demo-six-card-3',
22+
mounted() { }
23+
}
24+
</script>

‎docs/examples/docs-demo-six-card-4.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div>
3+
4+
<h3>Card Buttons</h3>
5+
<div style="max-width: 400px; margin: auto">
6+
<six-card shadow>
7+
<h2 slot="header">Card Title</h2>
8+
<h3 slot="header">Card Subtitle</h3>
9+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
10+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
11+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
12+
<six-button slot="footer-actions" type="secondary">Action 1</six-button>
13+
<six-button slot="footer-actions" type="primary">Primary Action</six-button>
14+
</six-card>
15+
</div>
16+
17+
</div>
18+
</template>
19+
<style>
20+
21+
</style>
22+
<script>
23+
export default {
24+
name: 'docs-demo-six-card-4',
25+
mounted() { }
26+
}
27+
</script>

‎docs/examples/docs-demo-six-card-5.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div>
3+
4+
<h3>Footer with Icon Buttons and Action</h3>
5+
<div style="max-width: 400px; margin: auto">
6+
<six-card>
7+
<img slot="media"
8+
src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCA1MTInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHJlY3Qgd2lkdGg9JzEwMjQnIGhlaWdodD0nNTEyJyBmaWxsPScjY2NjY2NjJyAvPjwvc3ZnPg=="
9+
alt="Grey placeholder"
10+
>
11+
<h2 slot="header">Card Title</h2>
12+
<h3 slot="header">Card Subtitle</h3>
13+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
14+
<six-icon-button slot="footer" name="share" size="small" label="Share"></six-icon-button>
15+
<six-icon-button slot="footer" name="edit" size="small" label="Edit"></six-icon-button>
16+
<six-icon-button slot="footer" name="delete" size="small" label="Delete"></six-icon-button>
17+
<six-button slot="footer-actions" type="primary">Button</six-button>
18+
</six-card>
19+
</div>
20+
21+
</div>
22+
</template>
23+
<style>
24+
25+
</style>
26+
<script>
27+
export default {
28+
name: 'docs-demo-six-card-5',
29+
mounted() { }
30+
}
31+
</script>

0 commit comments

Comments
 (0)