Skip to content

Commit 1245326

Browse files
hperrinhperrin
committed
docs: some better title styling on demos
1 parent b3ca6f1 commit 1245326

26 files changed

+1089
-353
lines changed

‎site/src/pendingDemos/card.svelte

+131-40
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,22 @@
1111
</div>
1212

1313
<div class="card-container short">
14-
<Card style="width: 250px;"><Content>You can also use <code>Content</code>.</Content></Card>
14+
<Card style="width: 250px;"
15+
><Content>You can also use <code>Content</code>.</Content></Card
16+
>
1517
</div>
1618

1719
<div class="card-container short">
18-
<Card style="width: 250px;" variant="outlined" padded>An outlined, padded card.</Card>
20+
<Card style="width: 250px;" variant="outlined" padded
21+
>An outlined, padded card.</Card
22+
>
1923
</div>
2024

2125
<div class="card-container short">
2226
<Card style="width: 250px;">
23-
<PrimaryAction on:click={() => clicked++} padded>Primary Action</PrimaryAction>
27+
<PrimaryAction on:click={() => clicked++} padded
28+
>Primary Action</PrimaryAction
29+
>
2430
</Card>
2531
</div>
2632

@@ -54,12 +60,25 @@
5460
<Card style="width: 320px;">
5561
<Content>A card with action icons.</Content>
5662
<Actions>
57-
<IconButton on:click={() => clicked++} toggle aria-label="Add to favorites" title="Add to favorites">
63+
<IconButton
64+
on:click={() => clicked++}
65+
toggle
66+
aria-label="Add to favorites"
67+
title="Add to favorites"
68+
>
5869
<Icon class="material-icons" on>favorite</Icon>
5970
<Icon class="material-icons">favorite_border</Icon>
6071
</IconButton>
61-
<IconButton class="material-icons" on:click={() => clicked++} title="Share">share</IconButton>
62-
<IconButton class="material-icons" on:click={() => clicked++} title="More options">more_vert</IconButton>
72+
<IconButton
73+
class="material-icons"
74+
on:click={() => clicked++}
75+
title="Share">share</IconButton
76+
>
77+
<IconButton
78+
class="material-icons"
79+
on:click={() => clicked++}
80+
title="More options">more_vert</IconButton
81+
>
6382
</Actions>
6483
</Card>
6584
</div>
@@ -77,12 +96,25 @@
7796
</Button>
7897
</ActionButtons>
7998
<ActionIcons>
80-
<IconButton on:click={() => clicked++} toggle aria-label="Add to favorites" title="Add to favorites">
99+
<IconButton
100+
on:click={() => clicked++}
101+
toggle
102+
aria-label="Add to favorites"
103+
title="Add to favorites"
104+
>
81105
<Icon class="material-icons" on>favorite</Icon>
82106
<Icon class="material-icons">favorite_border</Icon>
83107
</IconButton>
84-
<IconButton class="material-icons" on:click={() => clicked++} title="Share">share</IconButton>
85-
<IconButton class="material-icons" on:click={() => clicked++} title="More options">more_vert</IconButton>
108+
<IconButton
109+
class="material-icons"
110+
on:click={() => clicked++}
111+
title="Share">share</IconButton
112+
>
113+
<IconButton
114+
class="material-icons"
115+
on:click={() => clicked++}
116+
title="More options">more_vert</IconButton
117+
>
86118
</ActionIcons>
87119
</Actions>
88120
</Card>
@@ -92,21 +124,30 @@
92124
<Card style="width: 320px;">
93125
<Media class="card-media-16x9" aspectRatio="16x9">
94126
<MediaContent>
95-
<h2 class="mdc-typography--headline6" style="color: #fff; position: absolute; bottom: 16px; left: 16px; margin: 0;">A card with 16x9 media.</h2>
127+
<h2
128+
class="mdc-typography--headline6"
129+
style="color: #fff; position: absolute; bottom: 16px; left: 16px; margin: 0;"
130+
>
131+
A card with 16x9 media.
132+
</h2>
96133
</MediaContent>
97134
</Media>
98-
<Content style="color: #888;">
99-
Here's some gray text down here.
100-
</Content>
135+
<Content style="color: #888;">Here's some gray text down here.</Content>
101136
</Card>
102137
</div>
103138

104139
<div class="card-container">
105140
<Card style="width: 320px;">
106141
<Media class="card-media-square" aspectRatio="square">
107-
<div style="color: #fff; position: absolute; bottom: 16px; left: 16px;">
108-
<h2 class="mdc-typography--headline6" style="margin: 0;">A card with square media.</h2>
109-
<h3 class="mdc-typography--subtitle2" style="margin: 0;">And a subtitle.</h3>
142+
<div
143+
style="color: #fff; position: absolute; bottom: 16px; left: 16px;"
144+
>
145+
<h2 class="mdc-typography--headline6" style="margin: 0;">
146+
A card with square media.
147+
</h2>
148+
<h3 class="mdc-typography--subtitle2" style="margin: 0;">
149+
And a subtitle.
150+
</h3>
110151
</div>
111152
</Media>
112153
</Card>
@@ -115,11 +156,15 @@
115156
<div class="card-container">
116157
<Card style="width: 320px;">
117158
<div style="padding: 1rem;">
118-
<h2 class="mdc-typography--headline6" style="margin: 0;">A card with media.</h2>
119-
<h3 class="mdc-typography--subtitle2" style="margin: 0; color: #888;">And a subtitle.</h3>
159+
<h2 class="mdc-typography--headline6" style="margin: 0;">
160+
A card with media.
161+
</h2>
162+
<h3 class="mdc-typography--subtitle2" style="margin: 0; color: #888;">
163+
And a subtitle.
164+
</h3>
120165
</div>
121166
<PrimaryAction on:click={() => clicked++}>
122-
<Media class="card-media-16x9" aspectRatio="16x9"></Media>
167+
<Media class="card-media-16x9" aspectRatio="16x9" />
123168
<Content class="mdc-typography--body2">
124169
And some info text. And it's a primary action for the card.
125170
</Content>
@@ -129,9 +174,7 @@
129174

130175
<div class="card-container">
131176
<div>
132-
<div style="width: 320px;">
133-
A card with a list as content:
134-
</div>
177+
<div style="width: 320px;">A card with a list as content:</div>
135178
<Card style="width: 320px;">
136179
<Content component={List}>
137180
{#each [...Array(6)].map((v, i) => i + 1) as item}
@@ -149,14 +192,21 @@
149192
<PrimaryAction on:click={() => clicked++}>
150193
<Media class="card-media-16x9" aspectRatio="16x9">
151194
<MediaContent>
152-
<div style="color: #fff; position: absolute; bottom: 16px; left: 16px;">
153-
<h2 class="mdc-typography--headline6" style="margin: 0;">A card with media.</h2>
154-
<h3 class="mdc-typography--subtitle2" style="margin: 0;">And a subtitle.</h3>
195+
<div
196+
style="color: #fff; position: absolute; bottom: 16px; left: 16px;"
197+
>
198+
<h2 class="mdc-typography--headline6" style="margin: 0;">
199+
A card with media.
200+
</h2>
201+
<h3 class="mdc-typography--subtitle2" style="margin: 0;">
202+
And a subtitle.
203+
</h3>
155204
</div>
156205
</MediaContent>
157206
</Media>
158207
<Content class="mdc-typography--body2">
159-
It's all in this card. It's a veritable smorgasbord of card features.
208+
It's all in this card. It's a veritable smorgasbord of card
209+
features.
160210
</Content>
161211
</PrimaryAction>
162212
<Actions>
@@ -169,12 +219,25 @@
169219
</Button>
170220
</ActionButtons>
171221
<ActionIcons>
172-
<IconButton on:click={() => clicked++} toggle aria-label="Add to favorites" title="Add to favorites">
222+
<IconButton
223+
on:click={() => clicked++}
224+
toggle
225+
aria-label="Add to favorites"
226+
title="Add to favorites"
227+
>
173228
<Icon class="material-icons" on>favorite</Icon>
174229
<Icon class="material-icons">favorite_border</Icon>
175230
</IconButton>
176-
<IconButton class="material-icons" on:click={() => clicked++} title="Share">share</IconButton>
177-
<IconButton class="material-icons" on:click={() => clicked++} title="More options">more_vert</IconButton>
231+
<IconButton
232+
class="material-icons"
233+
on:click={() => clicked++}
234+
title="Share">share</IconButton
235+
>
236+
<IconButton
237+
class="material-icons"
238+
on:click={() => clicked++}
239+
title="More options">more_vert</IconButton
240+
>
178241
</ActionIcons>
179242
</Actions>
180243
</Card>
@@ -183,10 +246,17 @@
183246
<div class="card-container">
184247
<Card style="width: 360px;">
185248
<PrimaryAction on:click={() => clicked++}>
186-
<Media class="card-media-16x9" aspectRatio="16x9"></Media>
249+
<Media class="card-media-16x9" aspectRatio="16x9" />
187250
<Content class="mdc-typography--body2">
188-
<h2 class="mdc-typography--headline6" style="margin: 0;">A card with media.</h2>
189-
<h3 class="mdc-typography--subtitle2" style="margin: 0 0 10px; color: #888;">And a subtitle.</h3>
251+
<h2 class="mdc-typography--headline6" style="margin: 0;">
252+
A card with media.
253+
</h2>
254+
<h3
255+
class="mdc-typography--subtitle2"
256+
style="margin: 0 0 10px; color: #888;"
257+
>
258+
And a subtitle.
259+
</h3>
190260
It's all in this card. It's a veritable smorgasbord of card features.
191261
</Content>
192262
</PrimaryAction>
@@ -200,12 +270,25 @@
200270
</Button>
201271
</ActionButtons>
202272
<ActionIcons>
203-
<IconButton on:click={() => clicked++} toggle aria-label="Add to favorites" title="Add to favorites">
273+
<IconButton
274+
on:click={() => clicked++}
275+
toggle
276+
aria-label="Add to favorites"
277+
title="Add to favorites"
278+
>
204279
<Icon class="material-icons" on>favorite</Icon>
205280
<Icon class="material-icons">favorite_border</Icon>
206281
</IconButton>
207-
<IconButton class="material-icons" on:click={() => clicked++} title="Share">share</IconButton>
208-
<IconButton class="material-icons" on:click={() => clicked++} title="More options">more_vert</IconButton>
282+
<IconButton
283+
class="material-icons"
284+
on:click={() => clicked++}
285+
title="Share">share</IconButton
286+
>
287+
<IconButton
288+
class="material-icons"
289+
on:click={() => clicked++}
290+
title="More options">more_vert</IconButton
291+
>
209292
</ActionIcons>
210293
</Actions>
211294
</Card>
@@ -216,10 +299,18 @@
216299
</section>
217300

218301
<script>
219-
import Card, {Content, PrimaryAction, Media, MediaContent, Actions, ActionButtons, ActionIcons} from '@smui/card';
220-
import Button, {Label} from '@smui/button';
221-
import IconButton, {Icon} from '@smui/icon-button';
222-
import List, {Item, Text} from '@smui/list';
302+
import Card, {
303+
Content,
304+
PrimaryAction,
305+
Media,
306+
MediaContent,
307+
Actions,
308+
ActionButtons,
309+
ActionIcons,
310+
} from '@smui/card';
311+
import Button, { Label } from '@smui/button';
312+
import IconButton, { Icon } from '@smui/icon-button';
313+
import List, { Item, Text } from '@smui/list';
223314
224315
let clicked = 0;
225316
</script>
@@ -246,4 +337,4 @@
246337
* :global(.card-media-square) {
247338
background-image: url(https://via.placeholder.com/320x320.png?text=square);
248339
}
249-
</style>
340+
</style>

0 commit comments

Comments
 (0)