vue-wp/vue-theme/src/components/card.vue

<template lang="pug">
.card(v-if="content")
    header
        router-link(v-if="!hideType && ['event','exhibition'].includes(type)" :to="`/${type}/by-current-and-upcoming`")
            p.t-up {{type}}
        router-link(v-else-if="!hideType" :to="`/${type}`")
            p.t-up {{type}}

    article.card--info(:class="{ 'wide': wide }")
        router-link(:to="`/${type}/${content.slug}`")
            //- set image to thumbnail setting
            featured-image(:post="content", thumbsize="'standard'")
        .f-col.w-max
            router-link(:to="`/${type}/${content.slug}`")
                h1.t-up.t-cntr.t-b {{ content.title }}
            p(v-if="content.end && type == 'event'" class="datetime") {{ dateFrom(content.start, type=='event') }} &ndash; {{ dateFrom(content.end, type=='event').split(',')[1] }}
            p(v-else-if="content.end" class="datetime") {{ dateFrom(content.start, type=='event') }} &ndash; {{ dateFrom(content.end, type=='event') }}
            p.excerpt {{ content.excerpt }}
            router-link(:to="`/${type}/${content.slug}`")
                p.read-more read more
</template>

<script>
import featuredImage from '@/components/featured-image'
export default {
    components: { featuredImage },
    props: ['type', 'content', 'wide', 'hide-type'],
    methods: {
        dateFrom(unix, includeTime) {
            const d = new Date(parseInt(unix) * 1000)
            return includeTime ? d.toLocaleString('en-US', { timeZone: 'UTC' }) : d.toLocaleDateString('en-US')
        }
    }
}
</script>

<style lang="postcss">
// prettier-ignore
@import '../sss/variables.sss'
@import '../sss/theme.sss'
.card
    background-color: white
    padding: $ms--1
    overflow: hidden
    text-overflow: clip
    &--info
        justify-content: center
        > a
            line-height: 0
            /* Force crop images */
            .featured-or-hero-image img
                object-fit: cover
                object-position: 0% 30%
                max-height: 160px
                overflow-y: clip
    header a
        font-size: $ms--2
        text-decoration: none
        margin: 0
        p
            margin: 0
    img
        width: 100%
        height: auto
    h1, h2, h3
        padding: $ms--3
        margin: 0
    h1
        font-size: $ms-0
        padding: 0
        line-height: initial
    p
        &.datetime
            font-size: $ms--1
            margin: 0
        &.excerpt
            overflow: hidden
            margin: 0
        &.read-more
            font-size: $ms--1
    
/* for widths larger than 768px */
@media (min-width: $medium)
    .card
        &--info 
            justify-content: center
        .wide
            display: flex
            padding: 0
            grid-gap: $ms-0
</style>