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


<!-- 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="mol-author">
            <div>
                <picture class="atm-image ">
                    <img class="" src="https://placehold.co/48x48" alt="">
                </picture>
            </div>
            <div class="info">
                <span class="authorname">Annabel Janssen</span>
                <span class="subtitle">Expert kantoorcoach</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>


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


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


<!-- 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="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="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}}
        {{#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>
 
/* 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": false,
  "readingTime": false,
  "sdgimages": null,
  "date": {
    "text": "20-04-2021"
  }
}


/* Blog List */
{
  "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"
}


/* 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
{
    .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.