Vebego Component Library

Footer Certificates 

<div class="mol-footer-certificates">
    <div class="marquee certificates">
        <div class="marquee-group">
            <div class="marquee-item certificates-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/id/231/960/540" alt="">
                </picture>
            </div>
            <div class="marquee-item certificates-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/id/232/960/540" alt="">
                </picture>
            </div>
            <div class="marquee-item certificates-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/id/234/960/540" alt="">
                </picture>
            </div>
            <div class="marquee-item certificates-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/id/235/960/540" alt="">
                </picture>
            </div>
            <div class="marquee-item certificates-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/id/236/960/540" alt="">
                </picture>
            </div>
            <div class="marquee-item certificates-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/id/237/960/540" alt="">
                </picture>
            </div>
            <div class="marquee-item certificates-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/id/238/960/540" alt="">
                </picture>
            </div>
            <div class="marquee-item certificates-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/id/239/960/540" alt="">
                </picture>
            </div>
            <div class="marquee-item certificates-item">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/id/2/960/540" alt="">
                </picture>
            </div>
        </div>
    </div>
</div>
 
<div class="mol-footer-certificates">
  <div class="marquee certificates">
    <div class="marquee-group">
    {{#each images}}
      <div class="marquee-item certificates-item">
        {{render "@image" this}}
      </div>
    {{/each}}
    </div>
  </div>
</div>
 
{
  "images": [
    {
      "src": "https://picsum.photos/id/231/960/540"
    },
    {
      "src": "https://picsum.photos/id/232/960/540"
    },
    {
      "src": "https://picsum.photos/id/234/960/540"
    },
    {
      "src": "https://picsum.photos/id/235/960/540"
    },
    {
      "src": "https://picsum.photos/id/236/960/540"
    },
    {
      "src": "https://picsum.photos/id/237/960/540"
    },
    {
      "src": "https://picsum.photos/id/238/960/540"
    },
    {
      "src": "https://picsum.photos/id/239/960/540"
    },
    {
      "src": "https://picsum.photos/id/2/960/540"
    }
  ]
}
  • Content: 
    .mol-footer-certificates {
    .marquee-group {
        @apply flex items-center flex-wrap justify-center gap-x-8 gap-y-2 min-w-full;

        .marquee-item {
            @apply h-12;

            .atm-image,
            .atm-image > img,
            img {
                @apply h-full;
            }
        }
    }
}
  • URL: /components/raw/footer-certificates/footer-certificates.css
  • Filesystem Path: src\components\03-molecules\footer-certificates\footer-certificates.css
  • Size: 335 Bytes
  • Handle: @footer-certificates
  • Preview:
  • Filesystem Path: src\components\03-molecules\footer-certificates\footer-certificates.hbs
  • References (1): @image
  • Referenced by (1): @footer

No notes defined.