Copy environment

Index 

<div class="index  ">
    <a class="index__item animation__target  js-index-item" href="#" target="_blank">
        <h3 class="h3 index__item-title">Bauhub Lorem Ipsum name of the Project</h3>
        <p class="index__item-tag text-small">2020</p>
        <p class="index__item-tag text-small">Digital Branding</p>
        <p class="index__item-tag text-small">Lorem Client</p>
        <svg class="icon  index__icon index__icon--rotating">
            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-54"></use>
        </svg>
        <div class="index__image-container">
            <div class="index__image-overflow">
                <figure class="image  index__image">
                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20352%20264%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/360x270 360w, //via.placeholder.com/720x540 720w, //via.placeholder.com/672x504 672w, //via.placeholder.com/352x264 352w, //via.placeholder.com/704x528 704w" data-sizes="auto" alt="" class="image__img lazyload">

                </figure>
            </div>
        </div>
    </a>
    <a class="index__item animation__target  js-index-item" href="#">
        <h3 class="h3 index__item-title">New website for Estonian Marketing Association</h3>
        <p class="index__item-tag text-small">2020</p>
        <p class="index__item-tag text-small">Digital Branding</p>
        <p class="index__item-tag text-small">Lorem Client</p>
        <svg class="icon  index__icon index__icon--sliding">
            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-54"></use>
        </svg>
        <div class="index__image-container">
            <div class="index__image-overflow">
                <figure class="image  index__image">
                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20352%20264%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/360x270 360w, //via.placeholder.com/720x540 720w, //via.placeholder.com/672x504 672w, //via.placeholder.com/352x264 352w, //via.placeholder.com/704x528 704w" data-sizes="auto" alt="" class="image__img lazyload">

                </figure>
            </div>
        </div>
    </a>
    <div class="index__item animation__target ">
        <h3 class="h3 index__item-title">Bauhub Lorem Ipsum name of the Project. Example which is multiple lines for demo.</h3>
        <p class="index__item-tag text-small">2020</p>
        <p class="index__item-tag text-small">Digital Branding</p>
        <p class="index__item-tag text-small">Lorem Client</p>
    </div>
    <div class="index__item animation__target ">
        <h3 class="h3 index__item-title">New website for Estonian Marketing Association</h3>
        <p class="index__item-tag text-small">2020</p>
        <p class="index__item-tag text-small">Digital Branding</p>
        <p class="index__item-tag text-small">Lorem Client</p>
    </div>
</div>
 
<div class="index {{ class }} {{ modifier }}">
    {% if data.items %}
        {% for item in data.items %}
            {% set element = item.link ? 'a' : 'div' %}
            <{{ element }} class="index__item animation__target {% if item.image %} js-index-item{% endif %}" {% if item.link %} href="{{ item.link }}" {% if item.newTab %} target="_blank" {% endif %}{% endif %}>
                {% if item.title %}
                    <h3 class="h3 index__item-title">{{ item.title }}</h3>
                {% endif %}
                {% if item.tags %}
                    {% for tag in item.tags %}
                        <p class="index__item-tag text-small">{{ tag.name }}</p>
                    {% endfor %}
                {% endif %}
                {% if item.link%}
                    {% if item.newTab %}
                        {% include '@icon' with {class: 'index__icon index__icon--rotating', modifier: '', name: 'arrow-right-54'} %}
                    {% else %}
                        {% include '@icon' with {class: 'index__icon index__icon--sliding', modifier: '', name: 'arrow-right-54'} %}
                    {% endif %}
                {% endif %}
                {% if item.image %}
                    <div class="index__image-container">
                        <div class="index__image-overflow">
                            {% include '@image' with {class: 'index__image', data: item.image|srcset('352x264'), modifier: '' } %}
                        </div>
                    </div>
                {% endif %}
            </{{ element }}>
        {% endfor %}
    {% endif %}
</div>

{
  "language": "en-US",
  "data": {
    "items": [
      {
        "image": true,
        "title": "Bauhub Lorem Ipsum name of the Project",
        "link": "#",
        "newTab": true,
        "tags": [
          {
            "name": "2020"
          },
          {
            "name": "Digital Branding"
          },
          {
            "name": "Lorem Client"
          }
        ]
      },
      {
        "image": true,
        "title": "New website for Estonian Marketing Association",
        "link": "#",
        "tags": [
          {
            "name": "2020"
          },
          {
            "name": "Digital Branding"
          },
          {
            "name": "Lorem Client"
          }
        ]
      },
      {
        "title": "Bauhub Lorem Ipsum name of the Project. Example which is multiple lines for demo.",
        "tags": [
          {
            "name": "2020"
          },
          {
            "name": "Digital Branding"
          },
          {
            "name": "Lorem Client"
          }
        ]
      },
      {
        "title": "New website for Estonian Marketing Association",
        "tags": [
          {
            "name": "2020"
          },
          {
            "name": "Digital Branding"
          },
          {
            "name": "Lorem Client"
          }
        ]
      }
    ]
  }
}
  • Content: 
    .index {
    width: 100%;
    position: relative;

    &:last-child {
        border-bottom: 1px solid $color-brand-01;
    }
}

.index__item-title {
    margin-bottom: 16px;

    @include bp(sm-min) {
        margin-bottom: 0;
    }
}

.index__item {
    position: relative;
    display: block;
    text-decoration: none;
    color: $color-brand-01;
    width: 100%;
    border-top: 1px solid $color-brand-01;
    padding: 16px 0;
    z-index: map-get($zindex, 'default');

    @include bp(sm-min) {
        padding: 25px 78px 25px 0;
    }

    &:hover {
        .index__icon--sliding {
            transform: translateX(0);
            opacity: 1;
        }

        .index__icon--rotating {
            transform: rotate(-45deg);
            opacity: 1;
        }
    }
}

.index__item-tag {
    display: inline-block;
    text-decoration: none;
    margin-right: 9px;

    &:last-of-type {
        margin-right: 0;
    }
}

.index__icon {
    display: none;

    @include bp(sm-min) {
        display: block;
        position: absolute;
        opacity: 0;
        font-size: 54px;
        right: 0;
        top: 35px;
        transition-property: opacity, transform;
        transition-timing-function: $transition-easing-in;
        transition-duration: $transition-duration;
    }
}

.index__icon--sliding {
    @include bp(sm-min) {
        transform: translateX(-25px);
    }
}

.index__image-container {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 350px;
    z-index: map-get($zindex, 'indexHoverImages');
}

.index__image-overflow {
    display: none;

    @include bp(sm-min) {
        background-color: $color-ui-01;
        position: relative;
        overflow: hidden;
        display: none;

        .index__image-container.is-open & {
            display: block;
            animation: clip-rotate 400ms cubic-bezier(0,0,.5,1) forwards;

            .image img {
                animation: image-opacity 400ms cubic-bezier(0,0,0,1) forwards;
            }
        }
    }
}

@keyframes clip-rotate {
    0% {
        clip-path: polygon(72% 48%, 52% 71%, 36% 45%, 53% 24%); //stylelint-disable-line
    }

    100% {
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0); //stylelint-disable-line
    }
}

@keyframes image-opacity {
    0% {
        opacity: 0;
        transform: scale(.6);
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
  • URL: /components/raw/index/index.scss
  • Filesystem Path: src/patterns/components/index/index.scss
  • Size: 2.5 KB
  • Content: 
    import Component from '../component/component';

import MouseMoveEvent = JQuery.MouseMoveEvent;

import './index.scss';

export default class Index extends Component {
    static initSelector: string = '.js-index-item';

    public parent: JQuery;
    private popup: JQuery;

    constructor(element: HTMLElement) {
        super(element);

        this.popup = this.element.find('.index__image-container');
        this.init();
    }

    init(): void {
        this.element.on('mousemove', this.mouseMoveHandler.bind(this));
        this.element.on('mouseenter', this.mouseEnterHandler.bind(this));
        this.element.on('mouseleave', this.mouseLeaveHandler.bind(this));

        this.parent = this.element.parents('.index');
    }

    mouseEnterHandler(): void {
        this.popup.detach();
        $('#page').append(this.popup);
        this.popup.addClass('is-open');
    }

    mouseLeaveHandler(): void {
        this.popup.detach();
        this.element.append(this.popup);
        this.popup.removeClass('is-open');
    }

    mouseMoveHandler(event: MouseMoveEvent): void {
        this.parent = this.element.parents('.index');

        if ((this.popup.innerWidth() + event.clientX) >= ($(window).innerWidth() - 30)) {
            this.popup.css('left', $(window).innerWidth() - this.popup.innerWidth() - 30);
        } else {
            this.popup.css('left', event.clientX);
        }

        this.popup.css('top', event.clientY + $(window).scrollTop() + 30);
    }
}
  • URL: /components/raw/index/index.ts
  • Filesystem Path: src/patterns/components/index/index.ts
  • Size: 1.5 KB
  • Handle: @index--default
  • Filesystem Path: src/patterns/components/index/index.twig
  • References (2): @icon, @image
  • Referenced by (1): @index-list