Vebego Component Library

Slide: Extended 

<div class="atm-slide--extended js--clickable">
    <picture class="atm-image ">
        <img class="" src="https://picsum.photos/id/250/263/360" alt="">
    </picture>
    <div class="slide-content">
        <div class="title"><span class="atm-heading h6">... consumerend Nederland</span>
        </div>
        <div class="subtitle">
            <h1 class="atm-heading ">The quick brown fox jumps over the lazy dog</h1>
        </div>
    </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--extended js--clickable">
    {{ render '@image' image }}
    <div class="slide-content">
        <div class="title">{{ render '@heading' heading }}</div>
        <div class="subtitle">{{ render '@heading' subHeading }}</div>
    </div>
    {{ render '@link' }}
</div>
 
{
  "heading": {
    "text": "... consumerend Nederland",
    "tag": "span",
    "modifier": "h6"
  },
  "image": {
    "src": "https://picsum.photos/id/250/263/360"
  }
}
  • Content: 
    .atm-slide,
.atm-slide--extended {
    @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;
        }
    }
}

.atm-slide {
    @apply p-2 border border-gray-100 rounded-xl bg-white h-full;
}

.atm-slide--extended {
    .slide-content {
        @apply p-4 lg:p-6;
    }

    .atm-image {
        @apply rounded-lg;
    }
}

.atm-slide-section {
    @apply relative grid rounded-lg overflow-hidden cursor-pointer;

    .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;
    }

    .atm-image {
        @apply h-[450px] transition-all;
        grid-area: 1/1;

        img {
            @apply w-full h-full object-cover rounded-lg;
            transition: transform 0.3s ease;
        }
    }

    .slide-content {
        @apply flex flex-col justify-end py-2 px-2 transition-all;
        grid-area: 1/1;

        .slide-content-inner {
            @apply relative z-10 bg-white flex items-center justify-between p-4 rounded-lg gap-4;
        }

        .atm-heading {
            @apply text-black z-10 m-0;
            hyphens: auto;
        }
    }

    &:hover {
        .atm-image img {
            transform: scale(1.05);
        }
    }

    .atm-button {
        @apply mt-auto self-end bg-gray-100 text-primary;
    }

    .atm-icon {
        @apply transition;
    }
}
  • URL: /components/raw/slide/slide.css
  • Filesystem Path: src\components\02-atoms\slide\slide.css
  • Size: 2.3 KB

No notes defined.