Vebego Component Library

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 class="mol-lamelle">
  {{ render "@image" image }}
  <div class="lamelle-content">
    {{ render '@heading' subHeading  }}
    <h3><span>/ {{ render '@heading' heading  }}</span> service</h3>
  </div>
</div>
 
{
  "heading": {
    "text": "Cleaning",
    "tag": "span"
  },
  "subHeading": {
    "text": "Schoonmaak",
    "tag": "span"
  },
  "image": {
    "src": "https://picsum.photos/id/200/263/360"
  }
}
  • Content: 
    .mol-lamelle {
    .atm-image {
        @apply w-full pt-[110%] md:pt-[150%] relative overflow-hidden;

        img {
            @apply absolute h-full w-full top-0 left-0 object-cover transition object-center hover:scale-[1.03] duration-700;
        }
    }

    .lamelle-content {
        @apply p-4;

        h3 {
            @apply text-h5 sm:text-h4 text-secondary-col-1;

            span {
                @apply font-semibold;
            }
        }
    }
}
  • URL: /components/raw/lamelle/lamelle.css
  • Filesystem Path: src\components\03-molecules\lamelle\lamelle.css
  • Size: 489 Bytes

No notes defined.