Vebego Component Library

Card Extended: Blog List 

<div class="mol-card-extended img-left 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="atm-paragraph text-md">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
        </div>

        <div class="reading-time">
            <span class="atm-icon  far fa-eye  fa-sm "></span>
            <span class="text">8 minuten</span>
        </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}}
        {{#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": {},
  "readingTime": {
    "text": "8 minuten",
    "icon": {
      "icon": "fa-eye",
      "style": "far",
      "size": "fa-sm"
    }
  },
  "sdgimages": null,
  "modifier": "img-left"
}
  • 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.