Vebego Component Library

Company Card 

<!-- Error rendering component -->
<!-- Could not render component '@button-primary--icon-only-lg' - component not found. -->
<!-- Error: Could not render component '@button-primary--icon-only-lg' - component not found.
    at Object.render (D:\builds\13\s\src\frontend\node_modules\@frctl\handlebars\src\helpers\render.js:23:19)
    at Object.helperWrapper (D:\builds\13\s\src\frontend\node_modules\promised-handlebars\index.js:130:23)
    at Object.<anonymous> (D:\builds\13\s\src\frontend\node_modules\promised-handlebars\lib\utils.js:29:28)
    at Object.wrapper (D:\builds\13\s\src\frontend\node_modules\handlebars\dist\cjs\handlebars\internal\wrapHelper.js:15:19)
    at Object.eval [as main] (eval at createFunctionContext (D:\builds\13\s\src\frontend\node_modules\handlebars\dist\cjs\handlebars\compiler\javascript-compiler.js:262:23), <anonymous>:19:102)
    at main (D:\builds\13\s\src\frontend\node_modules\handlebars\dist\cjs\handlebars\runtime.js:208:32)
    at ret (D:\builds\13\s\src\frontend\node_modules\handlebars\dist\cjs\handlebars\runtime.js:212:12)
    at ret (D:\builds\13\s\src\frontend\node_modules\handlebars\dist\cjs\handlebars\compiler\compiler.js:519:21)
    at prepareAndResolveMarkers (D:\builds\13\s\src\frontend\node_modules\promised-handlebars\index.js:99:39)
    at D:\builds\13\s\src\frontend\node_modules\promised-handlebars\lib\utils.js:29:28
    at HandlebarsAdapter.render (D:\builds\13\s\src\frontend\node_modules\@frctl\handlebars\src\adapter.js:37:30)
    at ComponentSource._renderVariant (D:\builds\13\s\src\frontend\node_modules\@frctl\fractal\src\api\components\source.js:212:30)
    at _renderVariant.next (<anonymous>)
    at onFulfilled (D:\builds\13\s\src\frontend\node_modules\co\index.js:65:19) -->
 
<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.