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

        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