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
68
69
|
mixin view-card
+view('card', 'Card')(wide=true)
.c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' })
+card(href='#')
+card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
+card-avatar(src='avatar.png')
+card-body
+card-title= 'XS Heading'
+card-content
p= loremIpsum
p= loremIpsum
+card-footer
= 'Footer'
+card
+card-body
.l-media
+avatar(class='l-media__block' src='avatar.png')
.l-media__block.l-media__block--main
strong.u-d-block= 'Volpeon'
small.u-d-block= '@volpeon@is-a.wyvern.rip'
+card-content
p= loremIpsum
p= loremIpsum
+card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '16 / 9' })
+card-body
.l-media
.l-media__block
+badge('positive')(quiet=true icon='repeat' href='#')
+icon('repeat')
strong.u-mis-50= '12'
.l-media__block
+badge('warning')(quiet=true icon='star' href='#')
+icon('star')
strong.u-mis-50= '34'
.l-media__block.u-mis-auto
+a-button(primary=true)= 'Reply'
+card(quiet=true href='#')
+card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
+card-body
+card-title= 'XS Heading'
+card-content
p= loremIpsum
p= loremIpsum
each layout in ['grid', 'masonry', 'masonry-h']
-
let quiet = true
let classes = {
'l-card-list': true,
'l-card-list--aspect-5/4': layout === 'grid',
'l-card-list--quiet': quiet,
}
classes[`l-card-list--${layout}`] = true;
+divider('faint')(class='u-mb-700')
div(class=classes)
each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
+card(quiet=quiet href='#' class='l-card-list__card')
+card-image(src=img class='l-card-list__card-image')
+card-body
.l-media
.l-media__block.l-media__block--main
h1.u-mbs-0= 'XS Heading'
small.u-c-mute-more= `Episode ${i + 1}`
|
