Vebego Component Library

Card Extended: Overview Header Secondary 

<div class="mol-card-extended overview-header-secondary js--clickable">
    <picture class="atm-image ">
        <img class="" src="https://picsum.photos/id/250/400/200" alt="">
    </picture>
    <div>
        <span class="atm-heading h-subtitle">FM Trends</span>

        <h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

        <div class="grid grid-cols-2">
            <div class="relative-date">
                <i class="atm-icon  far fa-calendar  fa-sm "></i>

                <span class="date">12 september</span>
            </div>
            <div class="reading-time">
                <i class="atm-icon  far fa-eye  fa-sm "></i>

                <span class="text">8 minuten</span>
            </div>
        </div>

    </div>
    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</div>
 
<div class="mol-card-extended {{modifier}} {{#if link}}js--clickable{{/if}}">
    {{#if image}}
    {{render '@image' image}}
    {{/if}}
    <div>
        {{#if subtitle}}
        {{render '@heading--subtitle' subtitle merge=true}}
        {{/if}}
        {{#if heading}}
        {{render '@heading--h4' heading merge=true}}
        {{/if}}
        {{#if paragraph}}
        {{render '@paragraph' paragraph merge=true}}
        {{/if}}
        {{!-- {{#if author}}
        {{render '@author'}}
        {{/if}} --}}
        <div class="grid grid-cols-2">
            {{#if date}}
                <div class="relative-date">
                    {{render '@icon' date.icon merge=true}}
                    <span class="date">{{date.text}}</span>
                </div>
            {{/if}}
            {{#if readingTime}}
                <div class="reading-time">
                    {{render '@icon' readingTime.icon merge=true}}
                    <span class="text">{{readingTime.text}}</span>
                </div>
            {{/if}}
        </div>
      
        {{#if sdgimages}}
        <div class="wrap-sdg">
            {{#each sdgimages}}
            {{render '@image' this}}
            {{/each}}
        </div>
        {{/if}}
    </div>
    {{#if link}}
    {{render '@link'}}
    {{/if}}
</div>
 
{
  "link": {},
  "image": {
    "src": "https://picsum.photos/id/250/400/200"
  },
  "subtitle": {
    "text": "FM Trends"
  },
  "heading": {
    "tag": "h4",
    "text": "Wat zijn de belangrijkste schoonmaakdoelen?"
  },
  "paragraph": false,
  "readingTime": {
    "text": "8 minuten",
    "icon": {
      "icon": "fa-eye",
      "style": "far",
      "size": "fa-sm"
    }
  },
  "sdgimages": null,
  "date": {
    "text": "12 september",
    "icon": {
      "icon": "fa-calendar",
      "style": "far",
      "size": "fa-sm"
    }
  },
  "modifier": "overview-header-secondary"
}
  • Content: 
    .mol-card-extended {
    img {
        @apply transition duration-300;
    }

    &.overview-header-primary * {
        @apply text-white;
    }

    &.overview-header-secondary * {
        @apply text-black;
    }

    .atm-image {
        @apply mb-4;
        @apply w-auto;
        @apply overflow-hidden;

        img {
            @apply w-full;
            @apply h-full;
            object-fit: cover;
        }
    }
    &:hover {
        * {
            @apply text-secondary-col-1;
        }

        .atm-image {
            img {
                transform: scale(1.05);
            }
        }
    }

    .atm-paragraph {
        @apply mb-4;
    }

    .reading-time {
        .atm-icon {
            @apply mr-1;
        }

        .text {
            @apply text-sm;
        }
    }

    .relative-date {
        .date {
            @apply text-sm;
        }
    }

    &.img-left {
        @apply md:grid;
        @apply md:grid-cols-2;
        @apply md:gap-x-12;
    }

    .wrap-sdg {
        @apply flex;

        .atm-image {
            @apply w-16;
            @apply h-16;
            margin-right: 1px;
        }
    }

    .atm-link {
        @apply hidden;
    }
}
  • URL: /components/raw/card-extended/card-extended.css
  • Filesystem Path: src\components\03-molecules\card-extended\card-extended.css
  • Size: 1.3 KB

No notes defined.