Vebego Component Library

Sponsor Block 

<section class="org-sponsor-block">
    <div class="vebego-container">
        <div class="mol-title ">
            <span class="atm-heading h-subtitle">Sponsoren</span>

            <span class="atm-heading h1">Zonder deze hulp waren we nergens</span>

        </div>

        <div class="sponsors">
            <div class="sponsor">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/290/130" alt="" loading="lazy">
                </picture>
                <div class="atm-paragraph ">
                    <p>Donec nec ex at leo egestas pellentesque a id sem. Etiam ut sapien metus. Curabitur augue neque, mattis eget lectus in, efficitur viverra est.</p>
                </div>

            </div>
            <div class="sponsor">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/230" alt="" loading="lazy">
                </picture>
                <div class="atm-paragraph ">
                    <p>Donec nec ex at leo egestas pellentesque a id sem. Etiam ut sapien metus. Curabitur augue neque, mattis eget lectus in, efficitur viverra est.</p>
                </div>

            </div>
            <div class="sponsor">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/500" alt="" loading="lazy">
                </picture>
                <div class="atm-paragraph ">
                    <p>Donec nec ex at leo egestas pellentesque a id sem. Etiam ut sapien metus. Curabitur augue neque, mattis eget lectus in, efficitur viverra est.</p>
                </div>

            </div>
            <div class="sponsor">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/250/280" alt="" loading="lazy">
                </picture>
                <div class="atm-paragraph ">
                    <p>Donec nec ex at leo egestas pellentesque a id sem. Etiam ut sapien metus. Curabitur augue neque, mattis eget lectus in, efficitur viverra est.</p>
                </div>

            </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>Wil je ook sponsor worden?</span>
                </span>
                <span class="button-triangle"></span>
            </a>

        </div>
    </div>
</section>
 
<section class="org-sponsor-block">
    <div class="vebego-container">
        {{ render '@title' title merge=true}}
        <div class="sponsors">
            {{#each sponsor}}
                <div class="sponsor">
                    {{ render '@image' image merge=true}}
                    {{ render '@paragraph' @root.paragraph }}
                </div>
            {{/each}}
        </div>
        <div class="text-center">
            {{ render '@button-primary--icon-left-md' button merge=true}}
        </div>
    </div>
</section>
 
{
  "title": {
    "heading": {
      "text": "Zonder deze hulp waren we nergens"
    },
    "subtitle": {
      "text": "Sponsoren"
    },
    "underline": false
  },
  "button": {
    "text": "Wil je ook sponsor worden?",
    "icon": {
      "style": "fal",
      "icon": "fa-chevron-right"
    }
  },
  "paragraph": {
    "text": "Donec nec ex at leo egestas pellentesque a id sem. Etiam ut sapien metus. Curabitur augue neque, mattis eget lectus in, efficitur viverra est."
  },
  "sponsor": [
    {
      "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-sponsor-block {
    .mol-title {
        @apply text-center;
        @apply mb-8;
    }

    .sponsors {
        @apply grid grid-cols-12 gap-y-8 md:gap-8;
        @apply mb-8;

        .sponsor {
            @apply col-span-12 md:col-span-6 lg:col-span-4;

            .atm-paragraph{
                @apply text-center;
            }

            .atm-image {
                @apply mb-4 h-32 relative;

                img {
                    @apply max-w-[290px] max-h-32 absolute m-0 top-1/2 left-1/2;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}
  • URL: /components/raw/sponsor-block/sponsor-block.css
  • Filesystem Path: src\components\04-organisms\sponsor-block\sponsor-block.css
  • Size: 646 Bytes

No notes defined.