Copy environment

Employees 

<div class="section             section--mt-large
                 section--mb-large
     employees">
    <div class="section__inner h-container">
        <div class="grid">
            <div class="grid__col grid__col--xs-4 grid__col--sm-12 grid__col--md-11 grid__col--offset-md-1">
                <div class="section__title animation__target">
                    <h2>Tiitel</h2>
                </div>
                <div class="section__content ">
                    <div class="grid grid--no-horizontal-gutter employees__grid">
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 grid__col--lg-3 employees__grid-col animation__target ">
                            <div class="person  employees__item">
                                <figure class="image image--fluid person__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%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <div class="person__name">Name Ipsum</div>
                                <div class="person__info">CEO of Assistant Managers <br> <a href="mailto:ceo@mail.com">ceo@mail.com</a> <br> <a href="tel:+37253251166">+372 53 251 166</a></div>
                                <a href="#" class="link person__link">Visit Linkedin<svg class="icon  link__icon person__link-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-right-top-24"></use>
                                    </svg>
                                </a>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 grid__col--lg-3 employees__grid-col animation__target ">
                            <div class="person  employees__item">
                                <figure class="image image--fluid person__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%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <div class="person__name">Name Ipsum</div>
                                <div class="person__info">CEO of Assistant Managers <br> <a href="mailto:ceo@mail.com">ceo@mail.com</a> <br> <a href="tel:+37253251166">+372 53 251 166</a></div>
                                <a href="#" class="link person__link">Visit Linkedin<svg class="icon  link__icon person__link-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-right-top-24"></use>
                                    </svg>
                                </a>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 grid__col--lg-3 employees__grid-col animation__target ">
                            <div class="person  employees__item">
                                <figure class="image image--fluid person__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%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <div class="person__name">Name Ipsum</div>
                                <div class="person__info">CEO of Assistant Managers <br> <a href="mailto:ceo@mail.com">ceo@mail.com</a> <br> <a href="tel:+37253251166">+372 53 251 166</a></div>
                                <a href="#" class="link person__link">Visit Linkedin<svg class="icon  link__icon person__link-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-right-top-24"></use>
                                    </svg>
                                </a>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 grid__col--lg-3 employees__grid-col animation__target ">
                            <div class="person  employees__item">
                                <figure class="image image--fluid person__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%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <div class="person__name">Name Ipsum</div>
                                <div class="person__info">CEO of Assistant Managers <br> <a href="mailto:ceo@mail.com">ceo@mail.com</a> <br> <a href="tel:+37253251166">+372 53 251 166</a></div>
                                <a href="#" class="link person__link">Visit Linkedin<svg class="icon  link__icon person__link-icon">
                                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-right-top-24"></use>
                                    </svg>
                                </a>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 grid__col--lg-3 employees__grid-col animation__target ">
                            <div class="person  employees__item">
                                <figure class="image image--fluid person__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%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <div class="person__name">Name Ipsum</div>
                                <div class="person__info">CEO of Assistant</div>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 grid__col--lg-3 employees__grid-col animation__target ">
                            <div class="person  employees__item">
                                <figure class="image image--fluid person__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%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <div class="person__name">Name Ipsum</div>
                                <div class="person__info">CEO of Assistant</div>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 grid__col--lg-3 employees__grid-col animation__target h-hidden-xs">
                            <div class="person  employees__item">
                                <figure class="image image--fluid person__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%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <div class="person__name">Name Ipsum</div>
                                <div class="person__info">CEO of Assistant</div>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 grid__col--lg-3 employees__grid-col animation__target h-hidden-xs">
                            <div class="person  employees__item">
                                <figure class="image image--fluid person__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%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <div class="person__name">Name Ipsum</div>
                                <div class="person__info">CEO of Assistant</div>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 grid__col--lg-3 employees__grid-col animation__target h-hidden-xs">
                            <div class="person  employees__item">
                                <figure class="image image--fluid person__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%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <div class="person__name">Name Ipsum</div>
                                <div class="person__info">CEO of Assistant</div>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 grid__col--lg-3 employees__grid-col animation__target h-hidden-xs">
                            <div class="person  employees__item">
                                <figure class="image image--fluid person__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%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <div class="person__name">Name Ipsum</div>
                                <div class="person__info">CEO of Assistant</div>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 grid__col--lg-3 employees__grid-col animation__target h-hidden-xs">
                            <div class="person  employees__item">
                                <figure class="image image--fluid person__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%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <div class="person__name">Name Ipsum</div>
                                <div class="person__info">CEO of Assistant</div>
                            </div>
                        </div>
                        <div class="grid__col grid__col--sm-6 grid__col--md-4 grid__col--lg-3 employees__grid-col animation__target h-hidden-xs">
                            <div class="person  employees__item">
                                <figure class="image image--fluid person__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%20389%20505%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/389x505 389w" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                                <div class="person__name">Name Ipsum</div>
                                <div class="person__info">CEO of Assistant</div>
                            </div>
                        </div>
                    </div>
                    <div class="employees__more h-hidden-sm h-hidden-md h-hidden-lg">

                        <button type="button" class="button js-show-more">
                            <span class="button__inner">
                                <span class="button__text">Load more</span>
                            </span>
                        </button>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
 
{% set topSpacing %}
    {% if 'small' in data.topSpacing %}
        section--mt-small
    {% elseif 'medium' in data.topSpacing %}
        section--mt-medium
    {% else %}
        section--mt-large
    {% endif %}
{% endset %}

{% set bottomSpacing %}
    {% if 'small' in data.bottomSpacing %}
        section--mb-small
    {% elseif 'medium' in data.bottomSpacing %}
        section--mb-medium
    {% else %}
        section--mb-large
    {% endif %}
{% endset %}

{% set content %}
    {% if data.persons %}
        <div class="grid grid--no-horizontal-gutter employees__grid">
            {% for item in data.persons %}
                <div class="grid__col grid__col--sm-6 grid__col--md-4 grid__col--lg-3 employees__grid-col animation__target {% if loop.index > 6 and data.moreButton %}h-hidden-xs{% endif %}">
                    {% include '@person' with { data: item, class: 'employees__item', modifier: '' } %}
                </div>
            {% endfor %}
        </div>
        {% if data.moreButton and data.persons|length > 6 %}
            <div class="employees__more h-hidden-sm h-hidden-md h-hidden-lg">
                {% include '@button' with { data: data.moreButton, class: 'js-show-more', modifier: '' } %}
            </div>
        {% endif %}
    {% endif %}
{% endset %}

{% include '@section' with { class: 'employees', modifier: topSpacing ~ ' ' ~ bottomSpacing, data: { title: data.title, content: content }, container: true } %}

{
  "language": "en-US",
  "data": {
    "title": "Tiitel",
    "persons": [
      {
        "image": true,
        "name": "Name Ipsum",
        "info": "CEO of Assistant Managers <br> <a href=\"mailto:ceo@mail.com\">ceo@mail.com</a> <br> <a href=\"tel:+37253251166\">+372 53 251 166</a>",
        "links": [
          {
            "title": "Visit Linkedin",
            "link": "#"
          }
        ]
      },
      {
        "image": true,
        "name": "Name Ipsum",
        "info": "CEO of Assistant Managers <br> <a href=\"mailto:ceo@mail.com\">ceo@mail.com</a> <br> <a href=\"tel:+37253251166\">+372 53 251 166</a>",
        "links": [
          {
            "title": "Visit Linkedin",
            "link": "#"
          }
        ]
      },
      {
        "image": true,
        "name": "Name Ipsum",
        "info": "CEO of Assistant Managers <br> <a href=\"mailto:ceo@mail.com\">ceo@mail.com</a> <br> <a href=\"tel:+37253251166\">+372 53 251 166</a>",
        "links": [
          {
            "title": "Visit Linkedin",
            "link": "#"
          }
        ]
      },
      {
        "image": true,
        "name": "Name Ipsum",
        "info": "CEO of Assistant Managers <br> <a href=\"mailto:ceo@mail.com\">ceo@mail.com</a> <br> <a href=\"tel:+37253251166\">+372 53 251 166</a>",
        "links": [
          {
            "title": "Visit Linkedin",
            "link": "#"
          }
        ]
      },
      {
        "image": true,
        "name": "Name Ipsum",
        "info": "CEO of Assistant"
      },
      {
        "image": true,
        "name": "Name Ipsum",
        "info": "CEO of Assistant"
      },
      {
        "image": true,
        "name": "Name Ipsum",
        "info": "CEO of Assistant"
      },
      {
        "image": true,
        "name": "Name Ipsum",
        "info": "CEO of Assistant"
      },
      {
        "image": true,
        "name": "Name Ipsum",
        "info": "CEO of Assistant"
      },
      {
        "image": true,
        "name": "Name Ipsum",
        "info": "CEO of Assistant"
      },
      {
        "image": true,
        "name": "Name Ipsum",
        "info": "CEO of Assistant"
      },
      {
        "image": true,
        "name": "Name Ipsum",
        "info": "CEO of Assistant"
      }
    ],
    "moreButton": {
      "text": "Load more"
    }
  }
}
  • Content: 
    .employees__grid {
    margin-bottom: -48px;

    @include bp(md-min) {
        margin-bottom: -48px;
    }
}

.employees__grid-col {
    margin-bottom: 48px;

    @include bp(md-min) {
        margin-bottom: 48px;
    }
}

.employees__item {
    padding-bottom: 16px;

    @include bp(sm-min) {
        padding-bottom: 16px;
    }
}

.employees__more {
    padding-top: 24px;
    text-align: center;
}

.person__link {
    .employees & {
        display: none;
    }
}
  • URL: /components/raw/employees/employees.scss
  • Filesystem Path: src/patterns/modules/employees/employees.scss
  • Size: 470 Bytes
  • Content: 
    import './employees.scss';

import Component from '../../components/component/component';

export default class Employees extends Component {
    static initSelector: string = '.employees';

    public moreButton: JQuery;
    public columns: JQuery;

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

        this.moreButton = this.element.find('.js-show-more');
        this.columns = this.element.find('.employees__grid-col');

        if (this.columns.length > 6) {
            this.init();
        }
    }

    init(): void {
        this.moreButton.on('click', this.toggleColumns.bind(this));
    }
    toggleColumns(): void {
        this.columns.removeClass('h-hidden-xs');
        this.moreButton.parent().addClass('h-hidden');
    }
}
  • URL: /components/raw/employees/employees.ts
  • Filesystem Path: src/patterns/modules/employees/employees.ts
  • Size: 757 Bytes
  • Handle: @employees--default
  • Filesystem Path: src/patterns/modules/employees/employees.twig
  • References (3): @person, @button, @section