Vebego Component Library

Image lamelle 

<div class="org-image-lamelle">
    <div class="vebego-container">
        <div class="lamelle-wrapper">
            <div class="lamelle">
                <div class="mol-lamelle">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/200/263/360" alt="">
                    </picture>
                    <div class="lamelle-content">
                        <span class="atm-heading ">Schoonmaak</span>

                        <h3><span>/ <span class="atm-heading ">Cleaning</span>
                            </span> service</h3>
                    </div>
                </div>
            </div>
            <div class="lamelle">
                <div class="mol-lamelle">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/200/263/360" alt="">
                    </picture>
                    <div class="lamelle-content">
                        <span class="atm-heading ">Groenvoorziening</span>

                        <h3><span>/ <span class="atm-heading ">Landscaping</span>
                            </span> service</h3>
                    </div>
                </div>
            </div>
            <div class="lamelle">
                <div class="mol-lamelle">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/200/263/360" alt="">
                    </picture>
                    <div class="lamelle-content">
                        <span class="atm-heading ">Aandacht voor mensen</span>

                        <h3><span>/ <span class="atm-heading ">Care</span>
                            </span> service</h3>
                    </div>
                </div>
            </div>
            <div class="lamelle">
                <div class="mol-lamelle">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/200/263/360" alt="">
                    </picture>
                    <div class="lamelle-content">
                        <span class="atm-heading ">Service met een lach</span>

                        <h3><span>/ <span class="atm-heading ">facility</span>
                            </span> service</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="org-image-lamelle">
  <div class="vebego-container">
    <div class="lamelle-wrapper">
      {{#each lamelle}}
        <div class="lamelle">
          {{ render "@lamelle" this }}
        </div>
      {{/each}}
    </div>
  </div>
</div>
 
{
  "lamelle": [
    {
      "heading": {
        "text": "Cleaning",
        "tag": "span"
      },
      "subHeading": {
        "text": "Schoonmaak",
        "tag": "span"
      },
      "image": {
        "src": "https://picsum.photos/id/200/263/360"
      }
    },
    {
      "heading": {
        "text": "Landscaping",
        "tag": "span"
      },
      "subHeading": {
        "text": "Groenvoorziening",
        "tag": "span"
      },
      "image": {
        "src": "https://picsum.photos/id/200/263/360"
      }
    },
    {
      "heading": {
        "text": "Care",
        "tag": "span"
      },
      "subHeading": {
        "text": "Aandacht voor mensen",
        "tag": "span"
      },
      "image": {
        "src": "https://picsum.photos/id/200/263/360"
      }
    },
    {
      "heading": {
        "text": "facility",
        "tag": "span"
      },
      "subHeading": {
        "text": "Service met een lach",
        "tag": "span"
      },
      "image": {
        "src": "https://picsum.photos/id/200/263/360"
      }
    }
  ]
}
  • Content: 
    .org-image-lamelle {
    .lamelle-wrapper {
        @apply grid sm:grid-cols-2 sm:gap-8 lg:gap-10 gap-4 lg:max-w-4xl mx-auto;

        .lamelle {
            @apply pt-0 even:sm:pt-8 even:lg:pt-10;
            @apply cursor-pointer;
        }
    }
}
  • URL: /components/raw/image-lamelle/image-lamelle.css
  • Filesystem Path: src\components\04-organisms\image-lamelle\image-lamelle.css
  • Size: 261 Bytes

No notes defined.