snurky components for Magento 2

Category Tile 

<div class="tiling--item">
    <div class="tiling--item__info">
        <a href="#" class="tiling--item__photo">
            <span class="tiling--image__container">
                <picture class="image cart-list-item__image">

                    <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/category/kerst-fruitkisten.jpg" alt="" />
                </picture>

            </span>
        </a>
        <div class="tiling--item__details">
            <strong class="tiling--item__name">
                <a class="tiling--item__link" href="#">Kerst Fruitkisten</a>
            </strong>
        </div>
    </div>
</div>
 
<div class="tiling--item">
    <div class="tiling--item__info">
        <a href="#" class="tiling--item__photo">
            <span class="tiling--image__container">
                {{ render '@image--picture' image }}
            </span>
        </a>
        <div class="tiling--item__details">
            <strong class="tiling--item__name">
                <a class="tiling--item__link" href="#">{{ text }}</a>
            </strong>
        </div>
    </div>
</div>
 
{
  "text": "Kerst Fruitkisten",
  "class": "category-item-link",
  "image": {
    "class": "cart-list-item__image",
    "defaultSrc": "/images/category/kerst-fruitkisten.jpg"
  }
}
  • Content: 
    $categories-grid--category-item__min-height                 : 90px !default;
$categories-grid--category-item__padding                    : 0 12px !default;

$categories-grid--category-item__photo__background          : $bg-color-tile !default;
$categories-grid--category-item__photo__border              : 1px solid $bg-color-tile !default;
$categories-grid--category-item__photo__border-radius       : $form-elements-radius !default;

$categories-grid--category-item__photo__hover__border       : 1px solid $bg-color-base !default;
  • URL: /components/raw/category-tile/_category-tile-variables.scss
  • Filesystem Path: build/components/Organisms/category-tile/_category-tile-variables.scss
  • Size: 533 Bytes
  • Content: 
    @import "category-tile-variables";


.tiling--item {
    padding: $categories-grid--category-item__padding;
    justify-content: center;
    min-height: $categories-grid--category-item__min-height;

    &__photo {
        padding: 10px 0;
        background: $categories-grid--category-item__photo__background;
        border-radius: $categories-grid--category-item__photo__border-radius;
        border: $categories-grid--category-item__photo__border;
        &:hover {
            border: $categories-grid--category-item__photo__hover__border;
        }
    }
    &__details {
        margin-top: $spacer--small;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    &__name {
        text-transform: none;
        font-size: $spacer--medium;
        font-weight: 300;
        margin: 0;
    }
    &__link {
        text-transform: none;
        font-size: $spacer--medium;
        font-weight: 300;
    }
}
  • URL: /components/raw/category-tile/_category-tile.scss
  • Filesystem Path: build/components/Organisms/category-tile/_category-tile.scss
  • Size: 981 Bytes

There are no notes for this item.