Section

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="section  ">
    <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__content ">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
                </div>

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


        {% set sectionContent %}
    {% if data.title %}
        <div class="section__title animation__target">
            <{{ data.titleElement|default('h2') }} {% if data.titleClass %}class="{{ data.titleClass }}"{% endif %}>{{ data.title }}</{{ data.titleElement|default('h2') }}>
        </div>
    {% endif %}
    {% if data.content %}
        <div class="section__content {% if isText %}text animation__target{% endif %}">
            {{ data.content }}
        </div>
    {% endif %}
{% endset %}

<div class="section {{ modifier }} {{ class }}" {% if 'section--background-1' in modifier %}data-theme="dark"{% endif %}>
    <div class="section__inner {% if container %}h-container{% endif %}">
        {% if container %}
            <div class="grid">
                <div class="grid__col grid__col--xs-4 grid__col--sm-12 {% if 'section--split' in modifier %}grid__col--md-6{% else %}grid__col--md-11{% endif %} grid__col--offset-md-1">
                    {{ sectionContent }}
                </div>
            </div>
        {% else %}
            {{ sectionContent }}
        {% endif %}
    </div>
</div>


        {
  "language": "en-US",
  "container": true,
  "data": {
    "content": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>"
  }
}

File:

Content:


                                .section--pt-small {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 72px;
    }
}

.section--pb-small {
    padding-bottom: 48px;

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

.section--mt-small {
    margin-top: 48px;

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

.section--mb-small {
    margin-bottom: 48px;

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

.section--pt-medium {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 120px;
    }
}

.section--pb-medium {
    padding-bottom: 48px;

    @include bp(md-min) {
        padding-bottom: 120px;
    }
}

.section--mt-medium {
    margin-top: 48px;

    @include bp(md-min) {
        margin-top: 120px;
    }
}

.section--mb-medium {
    margin-bottom: 48px;

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

.section--pt-large {
    padding-top: 56px;

    @include bp(md-min) {
        padding-top: 190px;
    }
}

.section--pb-large {
    padding-bottom: 56px;

    @include bp(md-min) {
        padding-bottom: 190px;
    }
}

.section--mt-large {
    margin-top: 56px;

    @include bp(md-min) {
        margin-top: 190px;
    }
}

.section--mb-large {
    margin-bottom: 56px;

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

.section--background-1 {
    background-color: $color-brand-01;
    color: $color-text-03;
}

.section__title {
    margin-bottom: 48px;

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

URL: /components/raw/section/section.scss
Filesystem Path: src/patterns/components/section/section.scss
Size: 1.5 KB

Content:
import './section.scss';
URL: /components/raw/section/section.ts
Filesystem Path: src/patterns/components/section/section.ts
Size: 25 Bytes

Handle: @section--default
Filesystem Path: src/patterns/components/section/section.twig
Referenced by (24): @animation, @accordion-list, @case-study, @collaborations, @columned-content, @contact, @content-full, @content-half, @content-image, @dark-block, @dark-block--video, @dark-block--lottie, @employees, @explore-grid, @form, @gallery, @image-1-1, @impossible-video, @index-list, @not-found, @password-form, @solutions, @testimonial, @testimonial--large


        
        
        <div class="section  ">
    <div class="section__inner ">
        <div class="section__title animation__target">
            <h1 class="h2">Hello World!</h1>
        </div>
        <div class="section__content ">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
        </div>

    </div>
</div>


        {% set sectionContent %}
    {% if data.title %}
        <div class="section__title animation__target">
            <{{ data.titleElement|default('h2') }} {% if data.titleClass %}class="{{ data.titleClass }}"{% endif %}>{{ data.title }}</{{ data.titleElement|default('h2') }}>
        </div>
    {% endif %}
    {% if data.content %}
        <div class="section__content {% if isText %}text animation__target{% endif %}">
            {{ data.content }}
        </div>
    {% endif %}
{% endset %}

<div class="section {{ modifier }} {{ class }}" {% if 'section--background-1' in modifier %}data-theme="dark"{% endif %}>
    <div class="section__inner {% if container %}h-container{% endif %}">
        {% if container %}
            <div class="grid">
                <div class="grid__col grid__col--xs-4 grid__col--sm-12 {% if 'section--split' in modifier %}grid__col--md-6{% else %}grid__col--md-11{% endif %} grid__col--offset-md-1">
                    {{ sectionContent }}
                </div>
            </div>
        {% else %}
            {{ sectionContent }}
        {% endif %}
    </div>
</div>


        {
  "language": "en-US",
  "container": false,
  "data": {
    "content": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>",
    "title": "Hello World!",
    "titleElement": "h1",
    "titleClass": "h2"
  }
}

File:

Content:


                                .section--pt-small {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 72px;
    }
}

.section--pb-small {
    padding-bottom: 48px;

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

.section--mt-small {
    margin-top: 48px;

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

.section--mb-small {
    margin-bottom: 48px;

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

.section--pt-medium {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 120px;
    }
}

.section--pb-medium {
    padding-bottom: 48px;

    @include bp(md-min) {
        padding-bottom: 120px;
    }
}

.section--mt-medium {
    margin-top: 48px;

    @include bp(md-min) {
        margin-top: 120px;
    }
}

.section--mb-medium {
    margin-bottom: 48px;

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

.section--pt-large {
    padding-top: 56px;

    @include bp(md-min) {
        padding-top: 190px;
    }
}

.section--pb-large {
    padding-bottom: 56px;

    @include bp(md-min) {
        padding-bottom: 190px;
    }
}

.section--mt-large {
    margin-top: 56px;

    @include bp(md-min) {
        margin-top: 190px;
    }
}

.section--mb-large {
    margin-bottom: 56px;

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

.section--background-1 {
    background-color: $color-brand-01;
    color: $color-text-03;
}

.section__title {
    margin-bottom: 48px;

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

URL: /components/raw/section/section.scss
Filesystem Path: src/patterns/components/section/section.scss
Size: 1.5 KB

Content:
import './section.scss';
URL: /components/raw/section/section.ts
Filesystem Path: src/patterns/components/section/section.ts
Size: 25 Bytes

Handle: @section--title
Filesystem Path: src/patterns/components/section/section.twig

Padding Small

Top and bottom paddings can be set separately with: section--pt-small and section--pb-small

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="section section--pt-small section--pb-small ">
    <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__content ">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
                </div>

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


        {% set sectionContent %}
    {% if data.title %}
        <div class="section__title animation__target">
            <{{ data.titleElement|default('h2') }} {% if data.titleClass %}class="{{ data.titleClass }}"{% endif %}>{{ data.title }}</{{ data.titleElement|default('h2') }}>
        </div>
    {% endif %}
    {% if data.content %}
        <div class="section__content {% if isText %}text animation__target{% endif %}">
            {{ data.content }}
        </div>
    {% endif %}
{% endset %}

<div class="section {{ modifier }} {{ class }}" {% if 'section--background-1' in modifier %}data-theme="dark"{% endif %}>
    <div class="section__inner {% if container %}h-container{% endif %}">
        {% if container %}
            <div class="grid">
                <div class="grid__col grid__col--xs-4 grid__col--sm-12 {% if 'section--split' in modifier %}grid__col--md-6{% else %}grid__col--md-11{% endif %} grid__col--offset-md-1">
                    {{ sectionContent }}
                </div>
            </div>
        {% else %}
            {{ sectionContent }}
        {% endif %}
    </div>
</div>


        {
  "language": "en-US",
  "container": true,
  "data": {
    "content": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>"
  },
  "modifier": "section--pt-small section--pb-small"
}

File:

Content:


                                .section--pt-small {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 72px;
    }
}

.section--pb-small {
    padding-bottom: 48px;

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

.section--mt-small {
    margin-top: 48px;

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

.section--mb-small {
    margin-bottom: 48px;

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

.section--pt-medium {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 120px;
    }
}

.section--pb-medium {
    padding-bottom: 48px;

    @include bp(md-min) {
        padding-bottom: 120px;
    }
}

.section--mt-medium {
    margin-top: 48px;

    @include bp(md-min) {
        margin-top: 120px;
    }
}

.section--mb-medium {
    margin-bottom: 48px;

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

.section--pt-large {
    padding-top: 56px;

    @include bp(md-min) {
        padding-top: 190px;
    }
}

.section--pb-large {
    padding-bottom: 56px;

    @include bp(md-min) {
        padding-bottom: 190px;
    }
}

.section--mt-large {
    margin-top: 56px;

    @include bp(md-min) {
        margin-top: 190px;
    }
}

.section--mb-large {
    margin-bottom: 56px;

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

.section--background-1 {
    background-color: $color-brand-01;
    color: $color-text-03;
}

.section__title {
    margin-bottom: 48px;

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

URL: /components/raw/section/section.scss
Filesystem Path: src/patterns/components/section/section.scss
Size: 1.5 KB

Content:
import './section.scss';
URL: /components/raw/section/section.ts
Filesystem Path: src/patterns/components/section/section.ts
Size: 25 Bytes

Handle: @section--padding-small
Filesystem Path: src/patterns/components/section/section.twig

Padding Medium

Top and bottom paddings can be set separately with: section--pt-medium and section--pb-medium

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="section section--pt-medium section--pb-medium ">
    <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__content ">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
                </div>

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


        {% set sectionContent %}
    {% if data.title %}
        <div class="section__title animation__target">
            <{{ data.titleElement|default('h2') }} {% if data.titleClass %}class="{{ data.titleClass }}"{% endif %}>{{ data.title }}</{{ data.titleElement|default('h2') }}>
        </div>
    {% endif %}
    {% if data.content %}
        <div class="section__content {% if isText %}text animation__target{% endif %}">
            {{ data.content }}
        </div>
    {% endif %}
{% endset %}

<div class="section {{ modifier }} {{ class }}" {% if 'section--background-1' in modifier %}data-theme="dark"{% endif %}>
    <div class="section__inner {% if container %}h-container{% endif %}">
        {% if container %}
            <div class="grid">
                <div class="grid__col grid__col--xs-4 grid__col--sm-12 {% if 'section--split' in modifier %}grid__col--md-6{% else %}grid__col--md-11{% endif %} grid__col--offset-md-1">
                    {{ sectionContent }}
                </div>
            </div>
        {% else %}
            {{ sectionContent }}
        {% endif %}
    </div>
</div>


        {
  "language": "en-US",
  "container": true,
  "data": {
    "content": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>"
  },
  "modifier": "section--pt-medium section--pb-medium"
}

File:

Content:


                                .section--pt-small {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 72px;
    }
}

.section--pb-small {
    padding-bottom: 48px;

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

.section--mt-small {
    margin-top: 48px;

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

.section--mb-small {
    margin-bottom: 48px;

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

.section--pt-medium {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 120px;
    }
}

.section--pb-medium {
    padding-bottom: 48px;

    @include bp(md-min) {
        padding-bottom: 120px;
    }
}

.section--mt-medium {
    margin-top: 48px;

    @include bp(md-min) {
        margin-top: 120px;
    }
}

.section--mb-medium {
    margin-bottom: 48px;

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

.section--pt-large {
    padding-top: 56px;

    @include bp(md-min) {
        padding-top: 190px;
    }
}

.section--pb-large {
    padding-bottom: 56px;

    @include bp(md-min) {
        padding-bottom: 190px;
    }
}

.section--mt-large {
    margin-top: 56px;

    @include bp(md-min) {
        margin-top: 190px;
    }
}

.section--mb-large {
    margin-bottom: 56px;

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

.section--background-1 {
    background-color: $color-brand-01;
    color: $color-text-03;
}

.section__title {
    margin-bottom: 48px;

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

URL: /components/raw/section/section.scss
Filesystem Path: src/patterns/components/section/section.scss
Size: 1.5 KB

Content:
import './section.scss';
URL: /components/raw/section/section.ts
Filesystem Path: src/patterns/components/section/section.ts
Size: 25 Bytes

Handle: @section--padding-medium
Filesystem Path: src/patterns/components/section/section.twig

Padding Large

Top and bottom paddings can be set separately with: section--pt-large and section--pb-large

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="section section--pt-large section--pb-large ">
    <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__content ">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
                </div>

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


        {% set sectionContent %}
    {% if data.title %}
        <div class="section__title animation__target">
            <{{ data.titleElement|default('h2') }} {% if data.titleClass %}class="{{ data.titleClass }}"{% endif %}>{{ data.title }}</{{ data.titleElement|default('h2') }}>
        </div>
    {% endif %}
    {% if data.content %}
        <div class="section__content {% if isText %}text animation__target{% endif %}">
            {{ data.content }}
        </div>
    {% endif %}
{% endset %}

<div class="section {{ modifier }} {{ class }}" {% if 'section--background-1' in modifier %}data-theme="dark"{% endif %}>
    <div class="section__inner {% if container %}h-container{% endif %}">
        {% if container %}
            <div class="grid">
                <div class="grid__col grid__col--xs-4 grid__col--sm-12 {% if 'section--split' in modifier %}grid__col--md-6{% else %}grid__col--md-11{% endif %} grid__col--offset-md-1">
                    {{ sectionContent }}
                </div>
            </div>
        {% else %}
            {{ sectionContent }}
        {% endif %}
    </div>
</div>


        {
  "language": "en-US",
  "container": true,
  "data": {
    "content": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>"
  },
  "modifier": "section--pt-large section--pb-large"
}

File:

Content:


                                .section--pt-small {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 72px;
    }
}

.section--pb-small {
    padding-bottom: 48px;

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

.section--mt-small {
    margin-top: 48px;

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

.section--mb-small {
    margin-bottom: 48px;

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

.section--pt-medium {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 120px;
    }
}

.section--pb-medium {
    padding-bottom: 48px;

    @include bp(md-min) {
        padding-bottom: 120px;
    }
}

.section--mt-medium {
    margin-top: 48px;

    @include bp(md-min) {
        margin-top: 120px;
    }
}

.section--mb-medium {
    margin-bottom: 48px;

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

.section--pt-large {
    padding-top: 56px;

    @include bp(md-min) {
        padding-top: 190px;
    }
}

.section--pb-large {
    padding-bottom: 56px;

    @include bp(md-min) {
        padding-bottom: 190px;
    }
}

.section--mt-large {
    margin-top: 56px;

    @include bp(md-min) {
        margin-top: 190px;
    }
}

.section--mb-large {
    margin-bottom: 56px;

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

.section--background-1 {
    background-color: $color-brand-01;
    color: $color-text-03;
}

.section__title {
    margin-bottom: 48px;

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

URL: /components/raw/section/section.scss
Filesystem Path: src/patterns/components/section/section.scss
Size: 1.5 KB

Content:
import './section.scss';
URL: /components/raw/section/section.ts
Filesystem Path: src/patterns/components/section/section.ts
Size: 25 Bytes

Handle: @section--padding-large
Filesystem Path: src/patterns/components/section/section.twig

Margin Small

Top and bottom margins can be set separately with: margin--pt-small and margin--pb-small

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="section section--mt-small section--mb-small ">
    <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__content ">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
                </div>

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


        {% set sectionContent %}
    {% if data.title %}
        <div class="section__title animation__target">
            <{{ data.titleElement|default('h2') }} {% if data.titleClass %}class="{{ data.titleClass }}"{% endif %}>{{ data.title }}</{{ data.titleElement|default('h2') }}>
        </div>
    {% endif %}
    {% if data.content %}
        <div class="section__content {% if isText %}text animation__target{% endif %}">
            {{ data.content }}
        </div>
    {% endif %}
{% endset %}

<div class="section {{ modifier }} {{ class }}" {% if 'section--background-1' in modifier %}data-theme="dark"{% endif %}>
    <div class="section__inner {% if container %}h-container{% endif %}">
        {% if container %}
            <div class="grid">
                <div class="grid__col grid__col--xs-4 grid__col--sm-12 {% if 'section--split' in modifier %}grid__col--md-6{% else %}grid__col--md-11{% endif %} grid__col--offset-md-1">
                    {{ sectionContent }}
                </div>
            </div>
        {% else %}
            {{ sectionContent }}
        {% endif %}
    </div>
</div>


        {
  "language": "en-US",
  "container": true,
  "data": {
    "content": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>"
  },
  "modifier": "section--mt-small section--mb-small"
}

File:

Content:


                                .section--pt-small {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 72px;
    }
}

.section--pb-small {
    padding-bottom: 48px;

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

.section--mt-small {
    margin-top: 48px;

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

.section--mb-small {
    margin-bottom: 48px;

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

.section--pt-medium {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 120px;
    }
}

.section--pb-medium {
    padding-bottom: 48px;

    @include bp(md-min) {
        padding-bottom: 120px;
    }
}

.section--mt-medium {
    margin-top: 48px;

    @include bp(md-min) {
        margin-top: 120px;
    }
}

.section--mb-medium {
    margin-bottom: 48px;

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

.section--pt-large {
    padding-top: 56px;

    @include bp(md-min) {
        padding-top: 190px;
    }
}

.section--pb-large {
    padding-bottom: 56px;

    @include bp(md-min) {
        padding-bottom: 190px;
    }
}

.section--mt-large {
    margin-top: 56px;

    @include bp(md-min) {
        margin-top: 190px;
    }
}

.section--mb-large {
    margin-bottom: 56px;

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

.section--background-1 {
    background-color: $color-brand-01;
    color: $color-text-03;
}

.section__title {
    margin-bottom: 48px;

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

URL: /components/raw/section/section.scss
Filesystem Path: src/patterns/components/section/section.scss
Size: 1.5 KB

Content:
import './section.scss';
URL: /components/raw/section/section.ts
Filesystem Path: src/patterns/components/section/section.ts
Size: 25 Bytes

Handle: @section--margin-small
Filesystem Path: src/patterns/components/section/section.twig

Margin Medium

Top and bottom margins can be set separately with: section--mt-medium and section--mb-medium

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="section section--mt-medium section--mb-medium ">
    <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__content ">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
                </div>

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


        {% set sectionContent %}
    {% if data.title %}
        <div class="section__title animation__target">
            <{{ data.titleElement|default('h2') }} {% if data.titleClass %}class="{{ data.titleClass }}"{% endif %}>{{ data.title }}</{{ data.titleElement|default('h2') }}>
        </div>
    {% endif %}
    {% if data.content %}
        <div class="section__content {% if isText %}text animation__target{% endif %}">
            {{ data.content }}
        </div>
    {% endif %}
{% endset %}

<div class="section {{ modifier }} {{ class }}" {% if 'section--background-1' in modifier %}data-theme="dark"{% endif %}>
    <div class="section__inner {% if container %}h-container{% endif %}">
        {% if container %}
            <div class="grid">
                <div class="grid__col grid__col--xs-4 grid__col--sm-12 {% if 'section--split' in modifier %}grid__col--md-6{% else %}grid__col--md-11{% endif %} grid__col--offset-md-1">
                    {{ sectionContent }}
                </div>
            </div>
        {% else %}
            {{ sectionContent }}
        {% endif %}
    </div>
</div>


        {
  "language": "en-US",
  "container": true,
  "data": {
    "content": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>"
  },
  "modifier": "section--mt-medium section--mb-medium"
}

File:

Content:


                                .section--pt-small {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 72px;
    }
}

.section--pb-small {
    padding-bottom: 48px;

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

.section--mt-small {
    margin-top: 48px;

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

.section--mb-small {
    margin-bottom: 48px;

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

.section--pt-medium {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 120px;
    }
}

.section--pb-medium {
    padding-bottom: 48px;

    @include bp(md-min) {
        padding-bottom: 120px;
    }
}

.section--mt-medium {
    margin-top: 48px;

    @include bp(md-min) {
        margin-top: 120px;
    }
}

.section--mb-medium {
    margin-bottom: 48px;

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

.section--pt-large {
    padding-top: 56px;

    @include bp(md-min) {
        padding-top: 190px;
    }
}

.section--pb-large {
    padding-bottom: 56px;

    @include bp(md-min) {
        padding-bottom: 190px;
    }
}

.section--mt-large {
    margin-top: 56px;

    @include bp(md-min) {
        margin-top: 190px;
    }
}

.section--mb-large {
    margin-bottom: 56px;

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

.section--background-1 {
    background-color: $color-brand-01;
    color: $color-text-03;
}

.section__title {
    margin-bottom: 48px;

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

URL: /components/raw/section/section.scss
Filesystem Path: src/patterns/components/section/section.scss
Size: 1.5 KB

Content:
import './section.scss';
URL: /components/raw/section/section.ts
Filesystem Path: src/patterns/components/section/section.ts
Size: 25 Bytes

Handle: @section--margin-medium
Filesystem Path: src/patterns/components/section/section.twig

Margin Large

Top and bottom margins can be set separately with: section--mt-large and section--mb-large

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="section section--mt-large section--mb-large ">
    <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__content ">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
                </div>

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


        {% set sectionContent %}
    {% if data.title %}
        <div class="section__title animation__target">
            <{{ data.titleElement|default('h2') }} {% if data.titleClass %}class="{{ data.titleClass }}"{% endif %}>{{ data.title }}</{{ data.titleElement|default('h2') }}>
        </div>
    {% endif %}
    {% if data.content %}
        <div class="section__content {% if isText %}text animation__target{% endif %}">
            {{ data.content }}
        </div>
    {% endif %}
{% endset %}

<div class="section {{ modifier }} {{ class }}" {% if 'section--background-1' in modifier %}data-theme="dark"{% endif %}>
    <div class="section__inner {% if container %}h-container{% endif %}">
        {% if container %}
            <div class="grid">
                <div class="grid__col grid__col--xs-4 grid__col--sm-12 {% if 'section--split' in modifier %}grid__col--md-6{% else %}grid__col--md-11{% endif %} grid__col--offset-md-1">
                    {{ sectionContent }}
                </div>
            </div>
        {% else %}
            {{ sectionContent }}
        {% endif %}
    </div>
</div>


        {
  "language": "en-US",
  "container": true,
  "data": {
    "content": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>"
  },
  "modifier": "section--mt-large section--mb-large"
}

File:

Content:


                                .section--pt-small {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 72px;
    }
}

.section--pb-small {
    padding-bottom: 48px;

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

.section--mt-small {
    margin-top: 48px;

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

.section--mb-small {
    margin-bottom: 48px;

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

.section--pt-medium {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 120px;
    }
}

.section--pb-medium {
    padding-bottom: 48px;

    @include bp(md-min) {
        padding-bottom: 120px;
    }
}

.section--mt-medium {
    margin-top: 48px;

    @include bp(md-min) {
        margin-top: 120px;
    }
}

.section--mb-medium {
    margin-bottom: 48px;

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

.section--pt-large {
    padding-top: 56px;

    @include bp(md-min) {
        padding-top: 190px;
    }
}

.section--pb-large {
    padding-bottom: 56px;

    @include bp(md-min) {
        padding-bottom: 190px;
    }
}

.section--mt-large {
    margin-top: 56px;

    @include bp(md-min) {
        margin-top: 190px;
    }
}

.section--mb-large {
    margin-bottom: 56px;

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

.section--background-1 {
    background-color: $color-brand-01;
    color: $color-text-03;
}

.section__title {
    margin-bottom: 48px;

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

URL: /components/raw/section/section.scss
Filesystem Path: src/patterns/components/section/section.scss
Size: 1.5 KB

Content:
import './section.scss';
URL: /components/raw/section/section.ts
Filesystem Path: src/patterns/components/section/section.ts
Size: 25 Bytes

Handle: @section--margin-large
Filesystem Path: src/patterns/components/section/section.twig

Background 1

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="section section--background-1 " data-theme="dark">
    <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__content ">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
                </div>

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


        {% set sectionContent %}
    {% if data.title %}
        <div class="section__title animation__target">
            <{{ data.titleElement|default('h2') }} {% if data.titleClass %}class="{{ data.titleClass }}"{% endif %}>{{ data.title }}</{{ data.titleElement|default('h2') }}>
        </div>
    {% endif %}
    {% if data.content %}
        <div class="section__content {% if isText %}text animation__target{% endif %}">
            {{ data.content }}
        </div>
    {% endif %}
{% endset %}

<div class="section {{ modifier }} {{ class }}" {% if 'section--background-1' in modifier %}data-theme="dark"{% endif %}>
    <div class="section__inner {% if container %}h-container{% endif %}">
        {% if container %}
            <div class="grid">
                <div class="grid__col grid__col--xs-4 grid__col--sm-12 {% if 'section--split' in modifier %}grid__col--md-6{% else %}grid__col--md-11{% endif %} grid__col--offset-md-1">
                    {{ sectionContent }}
                </div>
            </div>
        {% else %}
            {{ sectionContent }}
        {% endif %}
    </div>
</div>


        {
  "language": "en-US",
  "container": true,
  "data": {
    "content": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>"
  },
  "modifier": "section--background-1"
}

File:

Content:


                                .section--pt-small {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 72px;
    }
}

.section--pb-small {
    padding-bottom: 48px;

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

.section--mt-small {
    margin-top: 48px;

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

.section--mb-small {
    margin-bottom: 48px;

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

.section--pt-medium {
    padding-top: 48px;

    @include bp(md-min) {
        padding-top: 120px;
    }
}

.section--pb-medium {
    padding-bottom: 48px;

    @include bp(md-min) {
        padding-bottom: 120px;
    }
}

.section--mt-medium {
    margin-top: 48px;

    @include bp(md-min) {
        margin-top: 120px;
    }
}

.section--mb-medium {
    margin-bottom: 48px;

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

.section--pt-large {
    padding-top: 56px;

    @include bp(md-min) {
        padding-top: 190px;
    }
}

.section--pb-large {
    padding-bottom: 56px;

    @include bp(md-min) {
        padding-bottom: 190px;
    }
}

.section--mt-large {
    margin-top: 56px;

    @include bp(md-min) {
        margin-top: 190px;
    }
}

.section--mb-large {
    margin-bottom: 56px;

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

.section--background-1 {
    background-color: $color-brand-01;
    color: $color-text-03;
}

.section__title {
    margin-bottom: 48px;

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

URL: /components/raw/section/section.scss
Filesystem Path: src/patterns/components/section/section.scss
Size: 1.5 KB

Content:
import './section.scss';
URL: /components/raw/section/section.ts
Filesystem Path: src/patterns/components/section/section.ts
Size: 25 Bytes

Handle: @section--background-1
Filesystem Path: src/patterns/components/section/section.twig

Title

Padding Small

Padding Medium

Padding Large

Margin Small

Margin Medium

Margin Large

Background 1

Forms

Notifications

CMS

Copy environment

Section

Title

Padding Small

Padding Medium

Padding Large

Margin Small

Margin Medium

Margin Large

Background 1