tpl/objects/card.pug


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

mixin card
    -
        let classes = {
            'o-card':             true,
            'o-card--borderless': !!attributes.borderless,
            'o-card--shadow':     !!attributes.shadow,
            'o-card--quiet':      !!attributes.quiet,
            'o-card--thumbnail':  !!attributes.thumbnail,
        }

        if (attributes.class) {
            classes[attributes.class] = true;
        }

    if attributes.href
        a(href=attributes.href class=classes)
            block
    else
        div(class=classes)
            block

mixin card-image
    -
        let classes = {
            'o-card__image': true,
        }

        if (attributes.class) {
            classes[attributes.class] = true;
        }

        let imgClasses = {
            'o-card__image-img': true,
            'l-card-list__card-image': attributes.list
        }

    div(class=classes)
        img(class=imgClasses src=attributes.src style=attributes.style)
        if block
            .o-card__image-overlay 
                block

mixin card-body
    .o-card__body(style=attributes.style)
        block

mixin card-title 
    h1.o-card__title
        block

mixin card-avatar 
    +avatar(class='o-card__avatar' src=attributes.src size='xl')

mixin card-content 
    .o-card__content
        block

mixin card-footer
    footer.o-card__footer
        block