Vebego Component Library

Company Card 

<div class='mol-company-card' data-index='0'>
    <div class='company-card-teaser'>
        <div class="image-wrapper">
            <picture class="atm-image ">
                <img class="" src="https://picsum.photos/290/130" alt="">
            </picture>
        </div>
        <div class='wrap'>
            <span class='title'>Hago</span>
            <div class="atm-paragraph text-md">
                <ul>
                    <li>Schoonmaakdiensten en specialistische reiniging</li>
                    <li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
                    <li>Actief in Nederland</li>
                </ul>
            </div>

        </div>
    </div>

    <div class='company-card-popup'>
        <div class='company-popup-close'><a class="atm-button atm-button-primary button-lg button-icon-only button-light">
                <span class="button-content">

                    <span class="atm-icon  fas fa-times   fa-fw"></span>
                </span>
            </a>
        </div>
        <div>
            <div class="atm-paragraph text-md">
                <ul>
                    <li>Schoonmaakdiensten en specialistische reiniging</li>
                    <li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li>
                    <li>Actief in Nederland</li>
                </ul>
            </div>

        </div>
        <div>
            <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>
        <div>
            <a class="atm-button atm-button-primary button-md  ">
                <span class="button-content">
                    <span>Lees de klantcase</span>

                </span>
                <span class="button-triangle"></span>
            </a>

        </div>
    </div>
</div>
 
<div class='mol-company-card' data-index='{{index}}'>
    <div class='company-card-teaser'>
        <div class="image-wrapper">
            {{render '@image' teaserImage}}
        </div>
        <div class='wrap'>
            <span class='title'>{{title}}</span>
            {{render '@paragraph' teaserText merge=true}}
        </div>
    </div>

    <div class='company-card-popup'>
        <div class='company-popup-close'>{{render
                '@button-primary--icon-only-lg'
                popupButtonClose
                merge=true
            }}</div>
        <div>
            {{render '@paragraph' popupTextColumn1 merge=true}}
        </div>
        <div>
            {{render '@paragraph' popupTextColumn2 merge=true}}
        </div>
        <div>
            {{render '@button-primary'}}
        </div>
    </div>
</div>
 
{
  "title": "Hago",
  "teaserImage": {
    "src": "https://picsum.photos/290/130"
  },
  "teaserText": {
    "text": "<ul><li>Schoonmaakdiensten en specialistische reiniging</li><li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li><li>Actief in Nederland</li></ul>"
  },
  "popupTextColumn1": {
    "text": "<ul><li>Schoonmaakdiensten en specialistische reiniging</li><li>Oplossingen voor: onderwijs, kantoren, zorg, industrie, luchthavens & spoorwegen</li><li>Actief in Nederland</li></ul>"
  },
  "popupTextColumn2": {
    "isRichText": true
  },
  "popupButtonClose": {
    "lightVersion": true,
    "showTriangle": false,
    "icon": {
      "style": "fas",
      "icon": "fa-times"
    }
  },
  "index": 0
}
  • Content: 
    .mol-company-card {
    .company-card-teaser {
        @apply border;
        @apply border-solid;
        @apply border-cta;
        @apply bg-cta-100;
        @apply transition-transform;
        @apply cursor-pointer;
        @apply h-full;

        &:hover {
            transform: scale(1.025);
        }

        .image-wrapper {
            @apply bg-white p-4;

            .atm-image {
                @apply h-20 relative;

                img {
                    @apply max-w-[130px] max-h-20 absolute m-0 top-1/2 left-1/2;
                    transform: translate(-50%, -50%);
                }
            }
        }

        .wrap {
            @apply bg-cta-100 p-4;

            .title {
                @apply font-bold;
                @apply text-black;
                @apply mb-2;
                @apply block;
            }
        }
    }

    .company-card-popup {
        @apply bg-cta-100;
        @apply p-8;
        @apply grid;
        @apply md:grid-cols-2 lg:grid-cols-3;
        @apply gap-8;
        @apply relative;

        .company-popup-close {
            @apply absolute;
            @apply top-1;
            @apply right-1;
        }
    }
}
  • URL: /components/raw/company-card/company-card.css
  • Filesystem Path: src\components\03-molecules\company-card\company-card.css
  • Size: 1.2 KB

No notes defined.