Vebego Component Library

Card Extended: News 

<div class="mol-card-extended  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>

        <span class="date">20-04-2021</span>
    </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}}
        {{#if readingTime}}
        <div class="reading-time">
            {{render '@icon' readingTime.icon merge=true}}
            <span class="text">{{readingTime.text}}</span>
        </div>
        {{/if}}
        {{#if date}}
        <span class="date">{{date.text}}</span>
        {{/if}}
        {{#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": false,
  "sdgimages": null,
  "date": {
    "text": "20-04-2021"
  }
}
  • Content: 
    .mol-card-extended
{
    .atm-image
    {
        @apply mb-4;
        @apply w-auto;
        @apply h-full;

        img
        {
            @apply w-full;
            @apply h-full;
            object-fit: cover;
        }
    }

    .atm-heading
    {
        
    }

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

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

        .text
        {
            @apply text-sm;
        }
    }

    .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: 929 Bytes

No notes defined.