Alpaca components for Magento 2

Catalog Event: Slider Item 

<section class="catalog-event catalog-event--slider-item">
    <h2 class="heading heading--second-level">
        Hoodies &amp; Sweatshirts
    </h2>

    <h3 class="heading heading--third-level margin-bottom-0">
        Sale ends in
    </h3>

    <ul class="catalog-event__date list">
        <li class="catalog-event__date-item list__item">
            <p class="catalog-event__date-value value">
                5
            </p>
            <span class="catalog-event__date-label label">
                Dayclears
            </span>
        </li>
        <li class="catalog-event__date-item list__item">
            <p class="catalog-event__date-value value">
                23
            </p>
            <span class="catalog-event__date-label label">
                Hrs
            </span>
        </li>
        <li class="catalog-event__date-item list__item">
            <p class="catalog-event__date-value value">
                45
            </p>
            <span class="catalog-event__date-label label">
                Mins
            </span>
        </li>
    </ul>
    <a class="button catalog-event__button" href="#">
        Go to sale
    </a>

</section>
 
<section class="catalog-event {{ class }}">
    {{ render '@heading' heading }}

    {{#if subheading}}
        {{ render '@heading' subheading }}
    {{/if}}

    <ul class="catalog-event__date {{ date.class }}">
        {{#each date.elements }}
            <li class="catalog-event__date-item {{ this.class }}">
                <p class="catalog-event__date-value {{ this.value.class }}">
                    {{ this.value.text }}
                </p>
                <span class="catalog-event__date-label {{ this.label.class }}">
                    {{ this.label.text }}
                </span>
            </li>
        {{/each}}
    </ul>
    {{#if button}}
        {{ render '@button' button }}
    {{/if}}
</section>
 
{
  "class": "catalog-event--slider-item",
  "heading": {
    "tag": "h2",
    "class": "heading heading--second-level",
    "text": "Hoodies & Sweatshirts"
  },
  "date": {
    "class": "list",
    "elements": [
      {
        "class": "list__item",
        "value": {
          "class": "value",
          "text": "5"
        },
        "label": {
          "class": "label",
          "text": "Dayclears"
        }
      },
      {
        "class": "list__item",
        "value": {
          "class": "value",
          "text": "23"
        },
        "label": {
          "class": "label",
          "text": "Hrs"
        }
      },
      {
        "class": "list__item",
        "value": {
          "class": "value",
          "text": "45"
        },
        "label": {
          "class": "label",
          "text": "Mins"
        }
      }
    ]
  },
  "subheading": {
    "tag": "h3",
    "class": "heading heading--third-level margin-bottom-0",
    "text": "Sale ends in"
  },
  "button": {
    "tag": "a",
    "class": "catalog-event__button",
    "attributes": "href=\"#\"",
    "text": "Go to sale"
  }
}
  • Content: 
    $catalog-event__display                     : flex !default;
$catalog-event__flex-direction              : column !default;
$catalog-event__justify-content             : center !default;
$catalog-event__align-items                 : center !default;
$catalog-event__width                       : 100% !default;
$catalog-event__max-width                   : $max-content-width !default;
$catalog-event__margin                      : 0 auto 72px !default;
$catalog-event__margin--slider-item         : 0 auto !default;
$catalog-event__background-color            : $gray-lightest !default;
$catalog-event__padding                     : $spacer--medium 0 !default;
$catalog-event__padding\@medium             : $spacer--large 0 !default;

$catalog-event__date-wrapper-display        : flex !default;
$catalog-event__date-wrapper-flex-direction : column !default;
$catalog-event__date-wrapper-align-items    : center !default;

$catalog-event__date-display                : flex !default;
$catalog-event__date-justify-content        : center !default;

$catalog-event__date-item-min-width         : 80px !default;
$catalog-event__date-item-min-width\@medium : 120px !default;
$catalog-event__date-item-text-align        : center !default;

$catalog-event__date-value-font-family      : $font-family-secondary !default;
$catalog-event__date-value-font-size        : $font-size-super-extra-large !default;
$catalog-event__date-value-font-size\@medium: 48px !default;

$catalog-event__date-label-color            : $color-primary !default;
$catalog-event__date-label-font-size        : $font-size-base !default;
$catalog-event__date-label-text-transform   : none !default;

$catalog-event__button-min-width            : 208px !default;
  • URL: /components/raw/catalog-event/_catalog-event-variables.scss
  • Filesystem Path: build/components/Organisms/catalog-event/_catalog-event-variables.scss
  • Size: 1.7 KB
  • Content: 
    @import "catalog-event-variables";

.catalog-event {
    display: $catalog-event__display;
    flex-direction: $catalog-event__flex-direction;
    justify-content: $catalog-event__justify-content;
    align-items: $catalog-event__align-items;
    width: $catalog-event__width;
    max-width: $catalog-event__max-width;
    margin: $catalog-event__margin;
    background-color: $catalog-event__background-color;
    padding: $catalog-event__padding;
    @include darken-layout-hover('.lazyload-wrapper');

    @include mq($screen-m) {
        padding: $catalog-event__padding\@medium;
    }

    &--slider-item {
        margin: $catalog-event__margin--slider-item;
    }

    &__wrapper {
        display: $catalog-event__date-wrapper-display;
        flex-direction: $catalog-event__date-wrapper-flex-direction;
        align-items: $catalog-event__date-wrapper-align-items;
    }

    &__date {
        display: $catalog-event__date-display;
        justify-content: $catalog-event__date-justify-content;
    }

    &__date-item {
        min-width: $catalog-event__date-item-min-width;
        text-align: $catalog-event__date-item-text-align;

        @include mq($screen-m) {
            min-width: $catalog-event__date-item-min-width\@medium;
        }
    }

    &__date-value {
        font-family: $catalog-event__date-value-font-family;
        font-size: $catalog-event__date-value-font-size;

        @include mq($screen-m) {
            font-size: $catalog-event__date-value-font-size\@medium;
        }
    }

    &__date-label {
        color: $catalog-event__date-label-color;
        font-size: $catalog-event__date-label-font-size;
        text-transform: $catalog-event__date-label-text-transform;
    }

    &__button {
        min-width: $catalog-event__button-min-width;
    }
}
  • URL: /components/raw/catalog-event/_catalog-event.scss
  • Filesystem Path: build/components/Organisms/catalog-event/_catalog-event.scss
  • Size: 1.8 KB

No notes defined.