Vebego Component Library

Logo Block 

<section class="org-logo-block">
    <div class="vebego-container">
        <div class="mol-title ">
            <span class="atm-heading h-subtitle">Logo&#x27;s</span>

            <span class="atm-heading h1">Dit is een voorbeeldtitel ter illustratie</span>

        </div>

        <div class="logos">
            <div class="logo">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/290/130" alt="" loading="lazy">
                </picture>
            </div>
            <div class="logo">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/230" alt="" loading="lazy">
                </picture>
            </div>
            <div class="logo">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/500" alt="" loading="lazy">
                </picture>
            </div>
            <div class="logo">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/280" alt="" loading="lazy">
                </picture>
            </div>
            <div class="logo">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/290/130" alt="" loading="lazy">
                </picture>
            </div>
            <div class="logo">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/230" alt="" loading="lazy">
                </picture>
            </div>
            <div class="logo">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/500" alt="" loading="lazy">
                </picture>
            </div>
            <div class="logo">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/280" alt="" loading="lazy">
                </picture>
            </div>
            <div class="logo">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/290/130" alt="" loading="lazy">
                </picture>
            </div>
            <div class="logo">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/230" alt="" loading="lazy">
                </picture>
            </div>
            <div class="logo">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/500" alt="" loading="lazy">
                </picture>
            </div>
            <div class="logo">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/280" alt="" loading="lazy">
                </picture>
            </div>
        </div>
        <div class="text-center">
            <a class="atm-button atm-button-primary button-md  ">
                <span class="button-content">
                    <span class="atm-icon  fal fa-chevron-right   "></span>
                    <span>Deze knop is optioneel</span>
                </span>
                <span class="button-triangle"></span>
            </a>

        </div>

    </div>
</section>
 
<section class="org-logo-block">
    <div class="vebego-container">
        {{ render '@title' title merge=true}}
        <div class="logos">
            {{#each logo}}
                <div class="logo">
                    {{ render '@image' image merge=true}}
                </div>
            {{/each}}
        </div>
        <div class="text-center">
            {{ render '@button-primary--icon-left-md' button merge=true}}
        </div>
      
    </div>
</section>
 
{
  "title": {
    "heading": {
      "text": "Dit is een voorbeeldtitel ter illustratie"
    },
    "subtitle": {
      "text": "Logo's"
    },
    "underline": false
  },
  "button": {
    "text": "Deze knop is optioneel",
    "icon": {
      "style": "fal",
      "icon": "fa-chevron-right"
    }
  },
  "logo": [
    {
      "image": {
        "src": "https://picsum.photos/290/130",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/230",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/500",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/280",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/290/130",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/230",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/500",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/280",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/290/130",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/230",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/500",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/250/280",
        "sources": false
      }
    }
  ]
}
  • Content: 
    .org-logo-block {
    .mol-title {
        @apply text-center;
        @apply mb-8;
    }

    .logos {
        @apply grid grid-cols-2 md:grid-cols-3 gap-4;
        @apply mb-4;

        .logo {
            flex: 2 0 25%;
            height: auto;
            @apply m-4 hidden;

            .atm-image {
                img {
                    @apply max-h-32 m-auto;
                }
            }

            @screen md {
                flex: 2 0 14%;
                margin: 32px;
            }
        }

        .special {
            @apply block;
        }
    }
}
  • URL: /components/raw/logo-block/logo-block.css
  • Filesystem Path: src\components\04-organisms\logo-block\logo-block.css
  • Size: 611 Bytes
  • Content: 
    (function () {

    'use strict';

    let ul = $('.logos');
    ul.each(function(index, element){
        let items = $(element).children('.logo');

        if (items.length > 6) {
            setSixClass();

            setTimeout(function () {
                setInterval(setRandomClass, 4000); //number of milliseconds (2000 = 2 seconds)
            }, 4000);

            function setSixClass() {
                let number = items.length;
                let numberlist = [];
                while (numberlist.length < 6) {
                    let random = Math.floor(Math.random() * number);
    
                    if (!numberlist.includes(random))
                    {
                        numberlist.push(random);
                        items.eq(random).addClass('special');
                    }
                }
            }
    
            function setRandomClass() {
                let specialItems = $(element).children('.special');
                let allItems = $(element).children('div:not(.special)');
                let number = specialItems.length;
                let number2 = allItems.length;
                let random = Math.floor(Math.random() * number);
                let random2 = Math.floor(Math.random() * number2);
                specialItems.eq(random).removeClass('special');
                allItems.eq(random2).addClass('special');
            }
        }
        else
        {
            items.addClass('special');
        }
    });
})();
  • URL: /components/raw/logo-block/logo-block.js
  • Filesystem Path: src\components\04-organisms\logo-block\logo-block.js
  • Size: 1.5 KB

No notes defined.