Vebego Component Library

Slide 

<div class="atm-slide js--clickable">
    <picture class="atm-image ">
        <img class="" src="https://picsum.photos/id/250/263/360" alt="">
    </picture>
    <div class="atm-slide__content">
        <div>
            <div class="subtitle">
                <h1 class="atm-heading ">The quick brown fox jumps over the lazy dog</h1>
            </div>
            <div class="title"><span class="atm-heading h6">... consumerend Nederland</span>
            </div>
        </div>
        <i class="atm-icon  far fa-external-link   "></i>

    </div>
    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
</div>
 
<div class="atm-slide js--clickable">
    {{ render '@image' image }}
    <div class="atm-slide__content">
        <div>
            <div class="subtitle">{{ render '@heading' subHeading }}</div>
            <div class="title">{{ render '@heading' heading }}</div>
        </div>
       {{render "@icon" merge=true}}
    </div>
    {{ render '@link' }}
</div>
 
{
  "heading": {
    "text": "... consumerend Nederland",
    "tag": "span",
    "modifier": "h6"
  },
  "image": {
    "src": "https://picsum.photos/id/250/263/360"
  }
}
  • Content: 
    .atm-slide {
    @apply bg-white border border-gray-100 p-2 rounded-xl h-full;

    * {
        @apply transition duration-500;
    }

    .atm-link {
        @apply hidden;
    }

    .atm-image {
        @apply relative pt-[100%] w-full mb-4 overflow-hidden rounded-lg;

        img {
            @apply absolute top-0 left-0 object-cover w-full h-full;
        }
    }

    &__content {
        @apply flex justify-between gap-x-2 px-2;
    }

    .atm-icon {
        @apply flex-shrink-0 focus:ring-2 cursor-pointer text-white bg-accent-1 h-11 w-11 rounded-full inline-flex justify-center items-center;
    }

    .subtitle {
        @apply text-gray;
    }

    .title {
        @apply mt-1 text-black;
    }
}

a > .atm-slide:hover {
    .atm-image {
        img {
            transform: scale(1.05);
        }
    }
    .title {
        .atm-heading {
            @apply text-secondary-col-1;
        }
    }
}
  • URL: /components/raw/slide/slide.css
  • Filesystem Path: src\components\02-atoms\slide\slide.css
  • Size: 966 Bytes

No notes defined.