cruc components for Magento 2

Category Banner 

<div class="category-image">
    <div class="desktop">
        <picture class="image">
            <source srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_desktop.jpg" data-srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_desktop.jpg" media="(max-width: 1200px)">
            <source srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_desktop.jpg" data-srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_desktop.jpg" media="">
            <img class="lazyloaded" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_desktop.jpg" alt="" title="Kinderbedden" loading="lazy">
        </picture>
    </div>

    <div class="mobile">
        <picture class="image">
            <source srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_mobile.jpg" data-srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_mobile.jpg" media="(max-width: 1200px)">
            <source srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_mobile.jpg" data-srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_mobile.jpg" media="">
            <img class="lazyloaded" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_mobile.jpg" alt="" title="Kinderbedden" loading="lazy">
        </picture>
    </div>
    <div class="category-title">
        <h1 class="category-title__name">Kinderbedden</h1>
    </div>
</div>
 
<div class="category-image">
    <div class="desktop">
        <picture class="image">
            <source srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_desktop.jpg" data-srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_desktop.jpg" media="(max-width: 1200px)">
            <source srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_desktop.jpg" data-srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_desktop.jpg" media="">
            <img class="lazyloaded" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_desktop.jpg" alt="" title="Kinderbedden" loading="lazy">
        </picture>
    </div>

    <div class="mobile">
        <picture class="image">
            <source srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_mobile.jpg" data-srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_mobile.jpg" media="(max-width: 1200px)">
            <source srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_mobile.jpg" data-srcset="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_mobile.jpg" media="">
            <img class="lazyloaded" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://snurky-m2.test/media/catalog/category/kinderbedden_banner_mobile.jpg" alt="" title="Kinderbedden" loading="lazy">
        </picture>
    </div>
    <div class="category-title">
        <h1 class="category-title__name">Kinderbedden</h1>
    </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .category-image {
    position: relative;
}
.category-title {
    position: absolute;
    width: 100%;
    padding: 2rem;
    bottom: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    background: rgba(55, 55, 55, 0.6);

    &__name {
        color: #fff;
    }
}
  • URL: /components/raw/category-banner/_category-banner.scss
  • Filesystem Path: build/components/Organisms/category-banner/_category-banner.scss
  • Size: 293 Bytes
  • Handle: @category-banner
  • Preview:
  • Filesystem Path: build/components/Organisms/category-banner/category-banner.hbs

There are no notes for this item.