Vebego Component Library

Card Extended 

<!-- Default -->
<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>

        <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="grid grid-cols-2">
            <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>


<!-- Contact Person -->
<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>

        <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="grid grid-cols-2">
        </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>


<!-- 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>

        <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="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>


<!-- Overview Header Primary -->
<div class="mol-card-extended overview-header-primary 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="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>


<!-- 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>


<!-- Sdg -->
<div class="mol-card-extended sdg 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="grid grid-cols-2">
        </div>

        <div class="wrap-sdg">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg" alt="">
            </picture>
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-02.jpg" alt="">
            </picture>
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-03.jpg" alt="">
            </picture>
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg" alt="">
            </picture>
        </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>


<!-- Initiative -->
<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="grid grid-cols-2">
        </div>

        <div class="wrap-sdg">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg" alt="">
            </picture>
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-02.jpg" alt="">
            </picture>
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-03.jpg" alt="">
            </picture>
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg" alt="">
            </picture>
        </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>
 
/* Default */
{
  "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
}


/* Contact Person */
{
  "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": false,
  "sdgimages": null,
  "author": {}
}


/* News */
{
  "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,
  "date": {
    "text": "12 september",
    "icon": {
      "icon": "fa-calendar",
      "style": "far",
      "size": "fa-sm"
    }
  }
}


/* Overview Header Primary */
{
  "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,
  "date": {
    "text": "12 september",
    "icon": {
      "icon": "fa-calendar",
      "style": "far",
      "size": "fa-sm"
    }
  },
  "modifier": "overview-header-primary"
}


/* Overview Header Secondary */
{
  "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"
}


/* Sdg */
{
  "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": false,
  "sdgimages": [
    {
      "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg"
    },
    {
      "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-02.jpg"
    },
    {
      "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-03.jpg"
    },
    {
      "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg"
    }
  ],
  "modifier": "sdg",
  "date": false
}


/* Initiative */
{
  "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": false,
  "sdgimages": [
    {
      "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg"
    },
    {
      "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-02.jpg"
    },
    {
      "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-03.jpg"
    },
    {
      "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg"
    }
  ],
  "modifier": "img-left",
  "date": false
}
  • 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.