Solutions

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="section     section--mt-large     section--mb-large solutions">
    <div class="section__inner ">
        <div class="section__content ">
            <div class="h-container">
                <div class="grid solutions__inner solutions__grid">
                    <div class="grid__col grid__col--md-11 grid__col--offset-md-1 grid__col--no-vertical-gutter solutions__head">
                        <h2 class="h2 solutions__title animation__target">Solutions</h2>
                    </div>
                    <div class="grid__col                                                     grid__col--sm-9 solutions__col--wide
                                             solutions__col animation__target">

                        <div class="solution solution--wide solutions__item">
                            <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>
                                    <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>

                    </div>
                    <div class="grid__col                                                     grid__col--sm-5
                                             solutions__col animation__target">

                        <div class="solution  solutions__item">
                            <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>
                                </ul>
                            </a>
                        </div>

                    </div>
                    <div class="grid__col                                                     grid__col--sm-6 solutions__col--tall
                                             solutions__col animation__target">

                        <div class="solution solution--tall solutions__item">
                            <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">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>

                    </div>
                    <div class="grid__col                                                     grid__col--sm-9 solutions__col--wide
                                             solutions__col animation__target">

                        <div class="solution solution--wide solutions__item">
                            <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>

                    </div>
                    <div class="grid__col                                                     grid__col--sm-6 solutions__col--tall
                                             solutions__col animation__target">

                        <div class="solution solution--tall solutions__item">
                            <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">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>

                    </div>
                    <div class="grid__col                                                     grid__col--sm-5
                                             solutions__col animation__target">

                        <div class="solution  solutions__item">
                            <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>
                                </ul>
                            </a>
                        </div>

                    </div>
                </div>
            </div>

        </div>

    </div>
</div>


        {% set topSpacing %}
    {% apply spaceless %}
        {% if 'small' in data.topSpacing %}
            section--mt-small
        {% elseif 'medium' in data.topSpacing %}
            section--mt-medium
        {% else %}
            section--mt-large
        {% endif %}
    {% endapply %}
{% endset %}

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

{% set content %}
    <div class="h-container">
        <div class="grid solutions__inner solutions__grid">
            {% if data.title %}
                <div class="grid__col grid__col--md-11 grid__col--offset-md-1 grid__col--no-vertical-gutter solutions__head">
                    <h2 class="h2 solutions__title animation__target">{{ data.title }}</h2>
                </div>
            {% endif %}
            {% if data.items %}
                {% for item in data.items %}
                    {% set colClass %}
                        {% if item.type == 'tall' %}
                            grid__col--sm-6 solutions__col--tall
                        {% elseif item.type == 'wide' %}
                            grid__col--sm-9 solutions__col--wide
                        {% else %}
                            grid__col--sm-5
                        {% endif %}
                    {% endset %}
                    <div class="grid__col {{ colClass }} solutions__col animation__target">
                        {% set itemModifier = 'default' not in item.type ? 'solution--' ~ item.type : '' %}
                        {% include '@solution' with { data: item, class: 'solutions__item', modifier: itemModifier } %}
                    </div>
                {% endfor %}
            {% endif %}
        </div>
    </div>
{% endset %}
{% include '@section' with { class: 'solutions', modifier: topSpacing ~ ' ' ~ bottomSpacing, data: { content: content } } %}


        {
  "language": "en-US",
  "data": {
    "title": "Solutions",
    "items": [
      {
        "type": "wide",
        "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": "T1"
          },
          {
            "title": "Softrend"
          },
          {
            "title": "Radis"
          },
          {
            "title": "Kafo"
          },
          {
            "title": "Rentist"
          }
        ]
      },
      {
        "type": "default",
        "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"
          }
        ]
      },
      {
        "type": "tall",
        "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"
          }
        ]
      },
      {
        "type": "wide",
        "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"
          }
        ]
      },
      {
        "type": "tall",
        "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"
          }
        ]
      },
      {
        "type": "default",
        "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"
          }
        ]
      }
    ]
  }
}

File:

Content:
URL: /components/raw/solutions/preview.jpg
Filesystem Path: src/patterns/modules/solutions/preview.jpg
Size: 406.6 KB

Content:


                                .solutions__head {
    margin-bottom: 48px;

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

.solutions__grid {
    margin-bottom: -72px;

    @include bp(md-min) {
        justify-content: flex-end;
    }
}

.solutions__col {
    margin-bottom: 72px;
}

.solutions__col--wide {
    @include bp(md-min) {
        margin-right: calc(100% / 12 * 2); /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }
}

.solutions__item {
    // This is needed as solution__tags overflow is handled in TS

    body:not(.global-has-loaded) & {
        max-width: 100%;
        overflow: hidden;
    }
}

URL: /components/raw/solutions/solutions.scss
Filesystem Path: src/patterns/modules/solutions/solutions.scss
Size: 623 Bytes

Content:
import './solutions.scss';
URL: /components/raw/solutions/solutions.ts
Filesystem Path: src/patterns/modules/solutions/solutions.ts
Size: 27 Bytes

Handle: @solutions--default
Filesystem Path: src/patterns/modules/solutions/solutions.twig
References (2): @solution, @section

Solutions

Forms

Notifications

CMS

Copy environment

Solutions