Vebego Component Library

Segment 

<div class="atm-segment js--clickable">
    <span class="atm-heading h5">... consumerend Nederland</span>

    <picture class="atm-image ">
        <img class="" src="https://picsum.photos/id/250/263/360" alt="">
    </picture>
    <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-segment js--clickable">
    {{ render '@heading' heading }}
    {{ render '@image' image }}
    {{ render '@link' }}
</div>
 
{
  "heading": {
    "text": "... consumerend Nederland",
    "tag": "span",
    "modifier": "h5"
  },
  "image": {
    "src": "https://picsum.photos/id/250/263/360"
  }
}
  • Content: 
    .atm-segment {
    @apply relative inline-block overflow-hidden;
    @apply transform-gpu transition-all;
    max-width: 260px;
    max-height: 360px;

    &::after {
        content: '';
        @apply absolute top-0 left-0 w-full h-1/3;
        background: rgb(119, 119, 119);
        background: linear-gradient(
            to bottom,
            rgba(119, 119, 119, 0.82),
            rgba(186, 186, 186, 0)
        );
    }

    .atm-heading {
        @apply absolute;
        @apply top-6 left-6 right-6 z-10;
        @apply text-white;
    }

    .atm-link {
        @apply hidden;
    }

    &:hover {
        @apply scale-105;
        @apply rounded-lg;
        @apply shadow-md;
    }
}
  • URL: /components/raw/segment/segment.css
  • Filesystem Path: src\components\02-atoms\segment\segment.css
  • Size: 731 Bytes

No notes defined.