Copy environment

Solution 

<div class="solution  ">
    <a href="#" class="solution__link">
        <figure class="image  solution__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%20360%20270%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>

        <h3 class="h3 solution__title">E-commerce &amp; Retail</h3>
        <div class="solution__content text">Lorem ipsum various fintech solutions to our clients, reimaginign their lorem ipsum text here.</div>
        <ul class="solution__tags">
            <li class="solution__tag text-tiny">T1</li>
            <li class="solution__tag text-tiny">Softrend</li>
            <li class="solution__tag text-tiny">Radis</li>
            <li class="solution__tag text-tiny">Kafo</li>
            <li class="solution__tag text-tiny">Rentist</li>
            <li class="solution__tag text-tiny">Rentist</li>
            <li class="solution__tag text-tiny">Rentist</li>
            <li class="solution__tag text-tiny">Rentist</li>
        </ul>
    </a>
</div>
 
{% set solutionImage %}
    {% if 'solution--tall' in modifier %}
        {% include '@image' with { modifier: '', class: 'solution__image', data: data.image|srcset('360x405') } %}
    {% elseif 'solution--wide' in modifier %}
        {% include '@image' with { modifier: '', class: 'solution__image', data: data.image|srcset('360x216') } %}
    {% else %}
        {% include '@image' with { modifier: '', class: 'solution__image', data: data.image|srcset('360x270') } %}
    {% endif %}
{% endset %}

<div class="solution {{ modifier }} {{ class }}">
    <a href="{{ data.link }}" {% if data.newtab %}target="_blank" rel="noreferrer noopener"{% endif %} class="solution__link">
        {% if data.image %}
            {{ solutionImage }}
        {% endif %}
        {% if data.title %}
            <h3 class="h3 solution__title">{{ data.title }}</h3>
        {% endif %}
        {% if data.content %}
            <div class="solution__content text">{{ data.content }}</div>
        {% endif %}
        {% if data.tags %}
            <ul class="solution__tags">
                {% apply spaceless %}
                    {% for tag in data.tags %}
                        <li class="solution__tag text-tiny">{{ tag.title }}</li>
                    {% endfor %}
                {% endapply %}
            </ul>
        {% endif %}
    </a>
</div>


{
  "language": "en-US",
  "data": {
    "image": true,
    "title": "E-commerce &amp; Retail",
    "content": "Lorem ipsum various fintech solutions to our clients, reimaginign their lorem ipsum text here.",
    "link": "#",
    "tags": [
      {
        "title": "T1"
      },
      {
        "title": "Softrend"
      },
      {
        "title": "Radis"
      },
      {
        "title": "Kafo"
      },
      {
        "title": "Rentist"
      },
      {
        "title": "Rentist"
      },
      {
        "title": "Rentist"
      },
      {
        "title": "Rentist"
      }
    ]
  }
}
  • Content: 
    .solution__title {
    margin-top: 24px;
}

.solution__link {
    color: inherit;
    text-decoration: none;
}

.solution__content {
    margin-top: 16px;
}

.solution__tags {
    margin: 16px 0 0 -16px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    width: max-content; /* stylelint-disable-line plugin/no-unsupported-browser-features */
}

.solution__tag {
    display: inline-block;
    margin-left: 16px;
}

.solution__tag-ellipsis {
    position: absolute;
    bottom: 0;
    right: 0;
    background: $color-ui-01;
    padding-left: 2px;
}

.solution__image {
    overflow: hidden;
    @include aspect-ratio(360, 270, 'image__img');

    .solution--tall & {
        @include aspect-ratio(360, 405, 'image__img');
    }

    .solution--wide & {
        @include aspect-ratio(360, 216, 'image__img');
    }
}

.image__img {
    .solution__image & {
        width: 100%;

        @include bp(md-min) {
            transition-property: transform, opacity;
            transform: scale(1) rotate(0);
            transition-timing-function: $transition-easing-out;
            transition-duration: $transition-duration;
        }

        .solution__link:hover & {
            @include bp(md-min) {
                transition-timing-function: $transition-easing-in;
                transform: scale(1.1) rotate(2deg);
            }
        }
    }
}
  • URL: /components/raw/solution/solution.scss
  • Filesystem Path: src/patterns/components/solution/solution.scss
  • Size: 1.4 KB
  • Content: 
    import Component from '../component/component';

import './solution.scss';

export default class Solution extends Component {
    static initSelector: string = '.solution';

    public tagList: JQuery;
    public ellipsisElement: JQuery;
    public ellipsisElementClass: string = 'solution__tag-ellipsis';
    public link: JQuery;

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

        this.tagList = this.element.find('.solution__tags');
        this.ellipsisElement = $(`<div class="${this.ellipsisElementClass}">...</div>`);
        this.link = this.element.find('.solution__link');

        this.init();
    }

    init(): void {
        this.tagOverflowHandler();
        this.link.on('click', this.clickHandler.bind(this));

        $(window).off('resize.resizeHandler');
        $(window).on('resize.resizeHandler', this.resizeHandler.bind(this));
    }

    tagOverflowHandler(): void {
        const parentWidth: number = this.element.innerWidth();
        const listWidth: number = this.tagList.innerWidth();

        if (parentWidth < (listWidth - 16)) {
            this.tagList.css({
                width: parentWidth + 16,
            });

            this.tagList.append(this.ellipsisElement);
        } else {
            this.ellipsisElement.remove();
        }
    }

    resizeHandler(): void {
        this.tagList.css('width', 'max-content');
        this.tagOverflowHandler();
    }

    clickHandler(event: JQuery.TriggeredEvent): void {
        const target: JQuery = $(event.target);

        if (target.hasClass(this.ellipsisElementClass)) {
            event.preventDefault();

            this.tagList.css({
                'white-space': 'normal',
                'width': 'auto',
            });

            this.ellipsisElement.remove();
            $(window).off('resize.resizeHandler');
        }
    }
}
  • URL: /components/raw/solution/solution.ts
  • Filesystem Path: src/patterns/components/solution/solution.ts
  • Size: 1.9 KB
  • Handle: @solution--default
  • Filesystem Path: src/patterns/components/solution/solution.twig
  • References (1): @image
  • Referenced by (1): @solutions

Tall 

<div class="solution solution--tall ">
    <a href="#" class="solution__link">
        <figure class="image  solution__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%20360%20405%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/360x405 360w, //via.placeholder.com/720x810 720w, //via.placeholder.com/640x720 640w, //via.placeholder.com/1280x1440 1280w, //via.placeholder.com/840x945 840w, //via.placeholder.com/1680x1890 1680w" data-sizes="auto" alt="" class="image__img lazyload">

        </figure>

        <h3 class="h3 solution__title">Finance &amp; Fintech</h3>
        <div class="solution__content text">Lorem ipsum various fintech solutions to our clients, reimaginign their lorem ipsum text here.</div>
        <ul class="solution__tags">
            <li class="solution__tag text-tiny">Tavid/Tavex</li>
            <li class="solution__tag text-tiny">MyFinancier</li>
            <li class="solution__tag text-tiny">GetITwise</li>
            <li class="solution__tag text-tiny">Creditstar</li>
        </ul>
    </a>
</div>
 
{% set solutionImage %}
    {% if 'solution--tall' in modifier %}
        {% include '@image' with { modifier: '', class: 'solution__image', data: data.image|srcset('360x405') } %}
    {% elseif 'solution--wide' in modifier %}
        {% include '@image' with { modifier: '', class: 'solution__image', data: data.image|srcset('360x216') } %}
    {% else %}
        {% include '@image' with { modifier: '', class: 'solution__image', data: data.image|srcset('360x270') } %}
    {% endif %}
{% endset %}

<div class="solution {{ modifier }} {{ class }}">
    <a href="{{ data.link }}" {% if data.newtab %}target="_blank" rel="noreferrer noopener"{% endif %} class="solution__link">
        {% if data.image %}
            {{ solutionImage }}
        {% endif %}
        {% if data.title %}
            <h3 class="h3 solution__title">{{ data.title }}</h3>
        {% endif %}
        {% if data.content %}
            <div class="solution__content text">{{ data.content }}</div>
        {% endif %}
        {% if data.tags %}
            <ul class="solution__tags">
                {% apply spaceless %}
                    {% for tag in data.tags %}
                        <li class="solution__tag text-tiny">{{ tag.title }}</li>
                    {% endfor %}
                {% endapply %}
            </ul>
        {% endif %}
    </a>
</div>


{
  "language": "en-US",
  "data": {
    "image": true,
    "title": "Finance &amp; Fintech",
    "content": "Lorem ipsum various fintech solutions to our clients, reimaginign their lorem ipsum text here.",
    "link": "#",
    "tags": [
      {
        "title": "Tavid/Tavex"
      },
      {
        "title": "MyFinancier"
      },
      {
        "title": "GetITwise"
      },
      {
        "title": "Creditstar"
      }
    ]
  },
  "modifier": "solution--tall"
}
  • Content: 
    .solution__title {
    margin-top: 24px;
}

.solution__link {
    color: inherit;
    text-decoration: none;
}

.solution__content {
    margin-top: 16px;
}

.solution__tags {
    margin: 16px 0 0 -16px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    width: max-content; /* stylelint-disable-line plugin/no-unsupported-browser-features */
}

.solution__tag {
    display: inline-block;
    margin-left: 16px;
}

.solution__tag-ellipsis {
    position: absolute;
    bottom: 0;
    right: 0;
    background: $color-ui-01;
    padding-left: 2px;
}

.solution__image {
    overflow: hidden;
    @include aspect-ratio(360, 270, 'image__img');

    .solution--tall & {
        @include aspect-ratio(360, 405, 'image__img');
    }

    .solution--wide & {
        @include aspect-ratio(360, 216, 'image__img');
    }
}

.image__img {
    .solution__image & {
        width: 100%;

        @include bp(md-min) {
            transition-property: transform, opacity;
            transform: scale(1) rotate(0);
            transition-timing-function: $transition-easing-out;
            transition-duration: $transition-duration;
        }

        .solution__link:hover & {
            @include bp(md-min) {
                transition-timing-function: $transition-easing-in;
                transform: scale(1.1) rotate(2deg);
            }
        }
    }
}
  • URL: /components/raw/solution/solution.scss
  • Filesystem Path: src/patterns/components/solution/solution.scss
  • Size: 1.4 KB
  • Content: 
    import Component from '../component/component';

import './solution.scss';

export default class Solution extends Component {
    static initSelector: string = '.solution';

    public tagList: JQuery;
    public ellipsisElement: JQuery;
    public ellipsisElementClass: string = 'solution__tag-ellipsis';
    public link: JQuery;

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

        this.tagList = this.element.find('.solution__tags');
        this.ellipsisElement = $(`<div class="${this.ellipsisElementClass}">...</div>`);
        this.link = this.element.find('.solution__link');

        this.init();
    }

    init(): void {
        this.tagOverflowHandler();
        this.link.on('click', this.clickHandler.bind(this));

        $(window).off('resize.resizeHandler');
        $(window).on('resize.resizeHandler', this.resizeHandler.bind(this));
    }

    tagOverflowHandler(): void {
        const parentWidth: number = this.element.innerWidth();
        const listWidth: number = this.tagList.innerWidth();

        if (parentWidth < (listWidth - 16)) {
            this.tagList.css({
                width: parentWidth + 16,
            });

            this.tagList.append(this.ellipsisElement);
        } else {
            this.ellipsisElement.remove();
        }
    }

    resizeHandler(): void {
        this.tagList.css('width', 'max-content');
        this.tagOverflowHandler();
    }

    clickHandler(event: JQuery.TriggeredEvent): void {
        const target: JQuery = $(event.target);

        if (target.hasClass(this.ellipsisElementClass)) {
            event.preventDefault();

            this.tagList.css({
                'white-space': 'normal',
                'width': 'auto',
            });

            this.ellipsisElement.remove();
            $(window).off('resize.resizeHandler');
        }
    }
}
  • URL: /components/raw/solution/solution.ts
  • Filesystem Path: src/patterns/components/solution/solution.ts
  • Size: 1.9 KB
  • Handle: @solution--tall
  • Filesystem Path: src/patterns/components/solution/solution.twig
  • References (1): @image

Wide 

<div class="solution solution--wide ">
    <a href="#" class="solution__link">
        <figure class="image  solution__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%20360%20216%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/360x216 360w, //via.placeholder.com/720x432 720w, //via.placeholder.com/1000x600 1000w, //via.placeholder.com/2000x1200 2000w, //via.placeholder.com/800x480 800w, //via.placeholder.com/1600x960 1600w, //via.placeholder.com/1200x720 1200w, //via.placeholder.com/2400x1440 2400w" data-sizes="auto" alt="" class="image__img lazyload">

        </figure>

        <h3 class="h3 solution__title">E-commerce &amp; Retail</h3>
        <div class="solution__content text">Lorem ipsum various fintech solutions to our clients, reimaginign their lorem ipsum text here.</div>
        <ul class="solution__tags">
            <li class="solution__tag text-tiny">T1</li>
            <li class="solution__tag text-tiny">Softrend</li>
            <li class="solution__tag text-tiny">Radis</li>
            <li class="solution__tag text-tiny">Kafo</li>
            <li class="solution__tag text-tiny">Rentist</li>
        </ul>
    </a>
</div>
 
{% set solutionImage %}
    {% if 'solution--tall' in modifier %}
        {% include '@image' with { modifier: '', class: 'solution__image', data: data.image|srcset('360x405') } %}
    {% elseif 'solution--wide' in modifier %}
        {% include '@image' with { modifier: '', class: 'solution__image', data: data.image|srcset('360x216') } %}
    {% else %}
        {% include '@image' with { modifier: '', class: 'solution__image', data: data.image|srcset('360x270') } %}
    {% endif %}
{% endset %}

<div class="solution {{ modifier }} {{ class }}">
    <a href="{{ data.link }}" {% if data.newtab %}target="_blank" rel="noreferrer noopener"{% endif %} class="solution__link">
        {% if data.image %}
            {{ solutionImage }}
        {% endif %}
        {% if data.title %}
            <h3 class="h3 solution__title">{{ data.title }}</h3>
        {% endif %}
        {% if data.content %}
            <div class="solution__content text">{{ data.content }}</div>
        {% endif %}
        {% if data.tags %}
            <ul class="solution__tags">
                {% apply spaceless %}
                    {% for tag in data.tags %}
                        <li class="solution__tag text-tiny">{{ tag.title }}</li>
                    {% endfor %}
                {% endapply %}
            </ul>
        {% endif %}
    </a>
</div>


{
  "language": "en-US",
  "data": {
    "image": true,
    "title": "E-commerce &amp; Retail",
    "content": "Lorem ipsum various fintech solutions to our clients, reimaginign their lorem ipsum text here.",
    "link": "#",
    "tags": [
      {
        "title": "T1"
      },
      {
        "title": "Softrend"
      },
      {
        "title": "Radis"
      },
      {
        "title": "Kafo"
      },
      {
        "title": "Rentist"
      }
    ]
  },
  "modifier": "solution--wide"
}
  • Content: 
    .solution__title {
    margin-top: 24px;
}

.solution__link {
    color: inherit;
    text-decoration: none;
}

.solution__content {
    margin-top: 16px;
}

.solution__tags {
    margin: 16px 0 0 -16px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    width: max-content; /* stylelint-disable-line plugin/no-unsupported-browser-features */
}

.solution__tag {
    display: inline-block;
    margin-left: 16px;
}

.solution__tag-ellipsis {
    position: absolute;
    bottom: 0;
    right: 0;
    background: $color-ui-01;
    padding-left: 2px;
}

.solution__image {
    overflow: hidden;
    @include aspect-ratio(360, 270, 'image__img');

    .solution--tall & {
        @include aspect-ratio(360, 405, 'image__img');
    }

    .solution--wide & {
        @include aspect-ratio(360, 216, 'image__img');
    }
}

.image__img {
    .solution__image & {
        width: 100%;

        @include bp(md-min) {
            transition-property: transform, opacity;
            transform: scale(1) rotate(0);
            transition-timing-function: $transition-easing-out;
            transition-duration: $transition-duration;
        }

        .solution__link:hover & {
            @include bp(md-min) {
                transition-timing-function: $transition-easing-in;
                transform: scale(1.1) rotate(2deg);
            }
        }
    }
}
  • URL: /components/raw/solution/solution.scss
  • Filesystem Path: src/patterns/components/solution/solution.scss
  • Size: 1.4 KB
  • Content: 
    import Component from '../component/component';

import './solution.scss';

export default class Solution extends Component {
    static initSelector: string = '.solution';

    public tagList: JQuery;
    public ellipsisElement: JQuery;
    public ellipsisElementClass: string = 'solution__tag-ellipsis';
    public link: JQuery;

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

        this.tagList = this.element.find('.solution__tags');
        this.ellipsisElement = $(`<div class="${this.ellipsisElementClass}">...</div>`);
        this.link = this.element.find('.solution__link');

        this.init();
    }

    init(): void {
        this.tagOverflowHandler();
        this.link.on('click', this.clickHandler.bind(this));

        $(window).off('resize.resizeHandler');
        $(window).on('resize.resizeHandler', this.resizeHandler.bind(this));
    }

    tagOverflowHandler(): void {
        const parentWidth: number = this.element.innerWidth();
        const listWidth: number = this.tagList.innerWidth();

        if (parentWidth < (listWidth - 16)) {
            this.tagList.css({
                width: parentWidth + 16,
            });

            this.tagList.append(this.ellipsisElement);
        } else {
            this.ellipsisElement.remove();
        }
    }

    resizeHandler(): void {
        this.tagList.css('width', 'max-content');
        this.tagOverflowHandler();
    }

    clickHandler(event: JQuery.TriggeredEvent): void {
        const target: JQuery = $(event.target);

        if (target.hasClass(this.ellipsisElementClass)) {
            event.preventDefault();

            this.tagList.css({
                'white-space': 'normal',
                'width': 'auto',
            });

            this.ellipsisElement.remove();
            $(window).off('resize.resizeHandler');
        }
    }
}
  • URL: /components/raw/solution/solution.ts
  • Filesystem Path: src/patterns/components/solution/solution.ts
  • Size: 1.9 KB
  • Handle: @solution--wide
  • Filesystem Path: src/patterns/components/solution/solution.twig
  • References (1): @image