Alpaca components for Magento 2

Categories List 

<ul class="list categories-list">
    <li class="list__item categories-list__item">
        <a href="#" class="
                        link
                        categories-list__link
                    " aria-current="true">
            New In
        </a>
    </li>
    <li class="list__item categories-list__item">
        <a href="#" class="
                        link
                        categories-list__link
                    ">
            Boots
        </a>
    </li>
    <li class="list__item categories-list__item">
        <a href="#" class="
                        link
                        categories-list__link
                    ">
            Flat sandals
        </a>
    </li>
    <li class="list__item categories-list__item">
        <a href="#" class="
                        link
                        categories-list__link
                    ">
            Flat shoes
        </a>
    </li>
    <li class="list__item categories-list__item">
        <a href="#" class="
                        link
                        categories-list__link
                    ">
            Heels
        </a>
    </li>
    <li class="list__item categories-list__item">
        <a href="#" class="
                        link
                        categories-list__link
                    ">
            Loafers
        </a>
    </li>
    <li class="list__item categories-list__item">
        <a href="#" class="
                        link
                        categories-list__link
                    ">
            Sandals
        </a>
    </li>
    <li class="list__item categories-list__item">
        <a href="#" class="
                        link
                        categories-list__link
                    ">
            Sliders &amp; Flip Flops
        </a>
    </li>
    <li class="list__item categories-list__item">
        <a href="#" class="
                        link
                        categories-list__link
                    ">
            Socks &amp; Tights
        </a>
    </li>
    <li class="list__item categories-list__item">
        <a href="#" class="
                        link
                        categories-list__link
                    ">
            Trainers
        </a>
    </li>
</ul>
 
{{ render '@list--link' list }}
 
{
  "list": {
    "listTag": "ul",
    "elementTag": "li",
    "class": "categories-list",
    "elements": [
      {
        "class": "categories-list__item",
        "text": "New In",
        "linkClass": "categories-list__link",
        "linkAttributes": "aria-current=\"true\"",
        "link": "#"
      },
      {
        "class": "categories-list__item",
        "text": "Boots",
        "linkClass": "categories-list__link",
        "link": "#"
      },
      {
        "class": "categories-list__item",
        "text": "Flat sandals",
        "linkClass": "categories-list__link",
        "link": "#"
      },
      {
        "class": "categories-list__item",
        "text": "Flat shoes",
        "linkClass": "categories-list__link",
        "link": "#"
      },
      {
        "class": "categories-list__item",
        "text": "Heels",
        "linkClass": "categories-list__link",
        "link": "#"
      },
      {
        "class": "categories-list__item",
        "text": "Loafers",
        "linkClass": "categories-list__link",
        "link": "#"
      },
      {
        "class": "categories-list__item",
        "text": "Sandals",
        "linkClass": "categories-list__link",
        "link": "#"
      },
      {
        "class": "categories-list__item",
        "text": "Sliders & Flip Flops",
        "linkClass": "categories-list__link",
        "link": "#"
      },
      {
        "class": "categories-list__item",
        "text": "Socks & Tights",
        "linkClass": "categories-list__link",
        "link": "#"
      },
      {
        "class": "categories-list__item",
        "text": "Trainers",
        "linkClass": "categories-list__link",
        "link": "#"
      }
    ]
  }
}
  • Content: 
    $categories-list__max-height           : 480px !default;
$categories-list__overflow             : hidden !default;

$categories-list__font-size            : $font-size-medium !default;
$categories-list__font-weight          : $font-weight-base !default;
$categories-list__font-weight-hover    : $font-weight-bold !default;
$categories-list__text-transform       : uppercase !default;
$categories-list__text-decoration      : none !default;
$categories-list__text-decoration-hover: none !default;
$categories-list__color                : $color-primary !default;
$categories-list__color-hover          : $color-primary !default;
$categories-list__bg-color-hover       : $gray-light !default;
$categories-list__item-padding         : 0 !default;
$categories-list__link-padding         : $spacer--medium $spacer--extra-small !default;

.categories-list {
    @include mq($screen-l) {
        max-height: $categories-list__max-height;
        overflow-x: $categories-list__overflow;
    }

    &__item {
        padding: $categories-list__item-padding;
    }

    &__link {
        display: block;
        padding: $categories-list__link-padding;
        font-size: $categories-list__font-size;
        font-weight: $categories-list__font-weight;
        color: $categories-list__color;
        text-transform: $categories-list__text-transform;
        text-decoration: $categories-list__text-decoration;

        &:hover,
        &[aria-current="true"] {
            background: $categories-list__bg-color-hover;
            color: $categories-list__color-hover;
            font-weight: $categories-list__font-weight-hover;
            text-decoration: $categories-list__text-decoration-hover;
        }
    }
}
  • URL: /components/raw/categories-list/_categories-list.scss
  • Filesystem Path: build/components/Organisms/categories-list/_categories-list.scss
  • Size: 1.7 KB

No notes defined.