UHasselt Component Library

Featured Item 

<div class="featured-item">
    <div class="call-to-action">
        <div class="wrap-info">
            <div class="title">Online Infodagen 8/7 en 26/8</div>
            <a href="#" class="button button-red ">
                <span>
                    <span class="text">
                        Bekijk de online infodagen
                    </span>
                </span>
            </a>

        </div>
    </div>

    <div class="image-slider">
        <div class="image-slider-wrapper">
            <div class="swiper-container image-slider-main" data-slides-per-view="1" data-loop="true" data-loop-additional-slides="1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="slide-image">
                            <img src="https://picsum.photos/id/234/1045/850" alt="" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-image">
                            <img src="https://picsum.photos/id/232/1045/850" alt="" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-image">
                            <img src="https://picsum.photos/id/233/1045/850" alt="" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-pagination"></div>

            <div class="swiper-prev">
                <a href="#" class="prev-next prev-next-prev">
                    <span class="icon fal fa-angle-left  fa-2x " aria-hidden="true"></span>
                </a>

            </div>

            <div class="swiper-next">
                <a href="#" class="prev-next prev-next-next">
                    <span class="icon fal fa-angle-right  fa-2x " aria-hidden="true"></span>
                </a>

            </div>
        </div>

    </div>
</div>
 
<div class="featured-item">
    {{ render '@call-to-action' }}
    {{ render '@image-slider' slider merge=true }}
</div>
 
{
  "slider": {
    "loop": true,
    "enableLightbox": false,
    "slidesPerView": 1,
    "loopAdditionalSlides": 1,
    "showThumbs": false,
    "slides": [
      {
        "imageUrl": "https://picsum.photos/id/234/1045/850"
      },
      {
        "imageUrl": "https://picsum.photos/id/232/1045/850"
      },
      {
        "imageUrl": "https://picsum.photos/id/233/1045/850"
      }
    ]
  }
}
  • Content: 
    .featured-item {
    @apply max-w-5xl relative my-8;

    &::before {
        content: url(/assets/img/triangle-small.svg);
        @apply absolute lg:hidden -top-4 right-20 md:right-40;
        width: 33px;
        height: 33px;
        z-index: 10;
    }

    &::after {
        @apply absolute lg:hidden right-20 md:right-40 fill-current text-black-600;
        content: url(/assets/img/square-dots.svg);
        z-index: -1;
        bottom: -50px;
        width: 157px;
        height: 131px;
    }

    .swiper-prev {
        @apply hidden;
    }

    .swiper-next {
        right: 48px !important;
        top: 60% !important;
    }

    .prev-next {
        @apply bg-black bg-opacity-70 h-16 w-16;

        .icon {
            @apply text-white;
            font-weight: 500;
            font-size: 2rem;
        }
    }

    .image-slider .swiper-slide {
        width: 97% !important;
    }

    .slide-image {
        &:after {
            background: linear-gradient(
                349.06deg,
                rgba(0, 0, 0, 0.8) 50.37%,
                rgba(168, 168, 168, 0.27352) 82.45%,
                rgba(255, 255, 255, 0) 126.34%
            );
            opacity: 0.5;
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }

    @apply lg:m-0;
    @screen lg {
        clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);

        .image-slider {
            .swiper-slide {
                width: 100% !important;
                clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
            }

            &.no-slider {
                .swiper-slide {
                    width: 100% !important;
                    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
                }
            }
        }
    }

    @apply xl:m-0;

    @screen xl {
        clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);

        .image-slider {
            .swiper-slide {
                clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
            }

            &.no-slider {
                .swiper-slide {
                    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
                }
            }

            .swiper-slide-active {
                margin: 0 -21% 0 0 !important;
            }
        }
    }

    .call-to-action {
        @apply absolute z-10;
        bottom: 5%;
        left: 10%;

        @screen md {
            top: 50%;
            bottom: auto;
            transform: translate(-50%, -50%);
            left: 53%;
        }

        @screen lg {
            left: 66%;
        }

        @screen xl {
            left: 53%;
        }
    }
}
  • URL: /components/raw/featured-item/featured-item.css
  • Filesystem Path: src\components\03-molecules\featured-item\featured-item.css
  • Size: 2.9 KB

No notes defined.