Vebego Component Library

Logo Block: Default 

<section class="org-logo-block">
    <div class="vebego-container">
        <div class="mol-title ">
            <span class="atm-heading h2">Dit is een voorbeeldtitel ter illustratie</span>

        </div>

        <div class="logos-wrapper">
            <div class="logos">
                <div class="logo">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/100/290/130" alt="" loading="lazy">
                    </picture>
                </div>
                <div class="logo">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/50/250/230" alt="" loading="lazy">
                    </picture>
                </div>
                <div class="logo">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/25/250/500" alt="" loading="lazy">
                    </picture>
                </div>
                <div class="logo">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/75/250/280" alt="" loading="lazy">
                    </picture>
                </div>
                <div class="logo">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/125/290/130" alt="" loading="lazy">
                    </picture>
                </div>
                <div class="logo">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/175/250/230" alt="" loading="lazy">
                    </picture>
                </div>
                <div class="logo">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/225/250/500" alt="" loading="lazy">
                    </picture>
                </div>
                <div class="logo">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/325/250/280" alt="" loading="lazy">
                    </picture>
                </div>
                <div class="logo">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/400/290/130" alt="" loading="lazy">
                    </picture>
                </div>
                <div class="logo">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/69/250/230" alt="" loading="lazy">
                    </picture>
                </div>
            </div>
        </div>

        <div class="text-center">
            <a class="atm-button atm-button-primary  button-md icon-left   ">
                <div class="button-content-wrapper">
                    <span class="button-content">
                        <i class="atm-icon  fal fa-chevron-right   "></i>

                        <span>Deze knop is optioneel</span>
                    </span>
                </div>
                <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-wrapper">
            {{#if slider}}
                {{ render '@marquee' merge=true }}
            {{else}}
                <div class="logos">
                    {{#each logo}}
                        <div class="logo">
                            {{ render '@image' image merge=true}}
                        </div>
                    {{/each}}
                </div>
            {{/if}}
        </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",
      "modifier": "h2"
    },
    "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/id/100/290/130",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/50/250/230",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/25/250/500",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/75/250/280",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/125/290/130",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/175/250/230",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/225/250/500",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/325/250/280",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/400/290/130",
        "sources": false
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/69/250/230",
        "sources": false
      }
    }
  ]
}
  • Content: 
    .org-logo-block {
    .mol-title {
        @apply text-center;
        @apply mb-8;

        .atm-heading {
            @apply text-secondary-col-1;
        }
    }

    .logos-wrapper {
        @apply mb-8;

        .logos {
            @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 items-center;

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

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

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

    'use strict';

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

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

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

            function setSixClass() {
                let number = items.length;
                let numberlist = [];
                while (numberlist.length < 10) {
                    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.