colette/src/styl/_components/_card.styl

A CSS and JS starter kit for 20 Minutes web projects

// Card
//
// An article card is a teaser + media group
// It can be a link and modified by `.color-*` helpers
//
// .color-default - theme default
// .color-planet - theme planet
// .card-lined.color-default - theme default + lined style
//
// Markup: card.twig
//
// Styleguide: Components.card
$card-media-width ?= 7.5em
$card-media-height ?= 4.9em

.card
    _m(0)
    display flex
    align-items center
    padding .5em .2em .5em .4em
    transition background-color .2s ease
    border 0 solid currentColor

    &-lined
        border-left-width 3px

    &:link:hover
        background-color var(--color-bg-secondary)

    // add properties to .media
    .media
        width $card-media-width
        height $card-media-height
        overflow hidden

    .teaser
        _p(0 .5)
        width s('calc(100% - %s)', $card-media-width)
        height _rem(15px * 5 + 3px) // limit height to 5 lines for title and no more
        overflow hidden

        &-headline
            margin-bottom _rem(3px)
            color currentColor
            line-height _rem(15px)

        &-title
            color var(--color-base)
            font-weight normal
            font-size _rem(13px)
            line-height _rem(15px)