Copy environment

Columned Content 

<div class="section             section--mt-large
                 section--mb-large
     columned-content">
    <div class="section__inner ">
        <div class="section__content ">
            <div class="h-container">
                <div class="grid">
                    <div class="grid__col grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1">
                        <h2 class="columned-content__title h2 animation__target">Services</h2>
                    </div>
                    <div class="grid__col grid__col--md-6 grid__col--lg-7 text animation__target">
                        <p>From solid strategy to creative ideas and brilliant execution - everything to transform your business in the digital age and grow your business online. We assist our clients to make the best use of the solutions we build with them.</p>
                        <p>We stand for modern technologies and great customer experience while keeping in mind to meet expectations on the business side.</p>
                        <p>We work hand-in-hand with a network of professionals starting from Machine Learning, Digital Marketing, Copywriting.</p>
                    </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 %}
    <div class="h-container">
        <div class="grid">
            {% if data.title %}
                <div class="grid__col grid__col--md-5 grid__col--lg-4 grid__col--offset-md-1">
                    <h2 class="columned-content__title h2 animation__target">{{ data.title }}</h2>
                </div>
            {% endif %}
            {% if data.content %}
                <div class="grid__col grid__col--md-6 grid__col--lg-7 text animation__target">
                    {{ data.content }}
                </div>
            {% endif %}
        </div>
    </div>
{% endset %}
{% include '@section' with { class: 'columned-content', modifier: topSpacing ~ ' ' ~ bottomSpacing, data: { content: content }} %}

{
  "language": "en-US",
  "data": {
    "content": "<p>From solid strategy to creative ideas and brilliant execution - everything to transform your business in the digital age and grow your business online. We assist our clients to make the best use of the solutions we build with them.</p><p>We stand for modern technologies and great customer experience while keeping in mind to meet expectations on the business side.</p><p>We work hand-in-hand with a network of professionals starting from Machine Learning, Digital Marketing, Copywriting.</p>",
    "title": "Services"
  }
}
  • Content: 
    .columned-content__title {
    margin-bottom: 32px;
    margin-top: 0;

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

    @include bp(md-min) {
        margin-top: -14px;
        margin-bottom: 72px;
    }
}
  • URL: /components/raw/columned-content/columned-content.scss
  • Filesystem Path: src/patterns/modules/columned-content/columned-content.scss
  • Size: 224 Bytes
  • Handle: @columned-content--default
  • Filesystem Path: src/patterns/modules/columned-content/columned-content.twig
  • References (1): @section