Section

Preview
HTML
View
Context
Assets
Info


        
        
        <section class="section   ">
    <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>

</section>


        {% set BEM -%}
    section
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.sectionOffset %} {{ data.sectionOffset }}{% endif %}
{% endset %}

{% set headingElement = data.headingElement|default('h2') %}

{% if not sectionHeading and not data.sectionHeading %}
    {% set sectionHeading %}
        {% if data.title %}
            <{{ headingElement }} class="section__heading {{ headingElement }}">
            {{ data.title }}
            </{{ headingElement }}>
        {% endif %}
    {% endset %}
{% endif %}


<section {{ class('section', [
    modifier ? modifier : '',
    class ? class : '',
    data.sectionOffset ? data.sectionOffset : ''
])}}
    {% if data.sectionId %} id="{{ data.sectionId }}"{% endif %}>
    {{ sectionContent|default(data.sectionContent) }}
    {#<div class="section__container">
        <div class="section__container-inner">
            {% if not noHeading %}
                {{ sectionHeading|default(data.sectionHeading) }}
            {% endif %}

        </div>
    </div>
    {{ sectionWideContent|default(data.sectionWideContent) }}#}
</section>


        {
  "language": "en-US",
  "data": {
    "sectionContent": "<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:


                                @use 'sass:math';

@mixin make-section-offset($name, $columns, $gutter) {
    @for $i from 1 through $columns {
        &.section--offset-#{$name}-#{$i} {
            .section__container-inner {
                margin-left: calc(math.div(100%, $columns) * $i + math.div($gutter, 2));
            }
        }
    }
}

.section {
    /*padding: $section-padding-default-sm 0 $section-padding-bottom;

    @include bp(md-min) {
        padding-top: $section-padding-default;
    }*/

    @include make-section-offset(xs, $grid-cols, $grid-gutter);

    @include bp(md-min) {

        @include make-section-offset(md, $grid-cols-md, $grid-gutter-md);
    }
}

.section__container {
    width: 100%;
    max-width: $container-max-width;
    margin: 0 auto;
    padding: 0 $container-padding;

    @include bp(md-min) {
        padding: 0 $container-padding-md;
    }
}

.section__heading {
    margin-bottom: 1em;
}

.section--top-none {
    padding-top: 0;
}

.section--bottom-none {
    padding-bottom: 0;
}

.section--checkout-form {
    margin-top: 12px;

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

.section--order-summary {
    margin-top: 8px;

    @include bp(lg-min) {
        margin-top: 24px;
    }
}

.section--faq {
    margin-top: 8px;

    @include bp(lg-min) {
        margin-top: 72px;
        margin-left: 108px;
    }
}

.section--checkout-buttons {
    margin-top: 24px;
    margin-bottom: 32px;

    @include bp(lg-min) {
        margin: 72px 0;
    }
}

h2.h3 {
    .section--faq &,
    .section--order-confirmation-faq & {
        margin-bottom: 16px;
    }
}

.section--cart-table {
    margin-top: 12px;

    &:nth-child(n+2) {
        margin-top: 24px;
    }

    @include bp(lg-min) {
        margin-top: 32px;

        &:nth-child(n+2) {
            margin-top: 72px;
        }
    }
}

.section--order-confirmation-table {
    margin: 24px 0;

    @include bp(lg-min) {
        margin: 40px 0;
    }
}

URL: /components/raw/section/section.scss
Filesystem Path: src/patterns/components/section/section.scss
Size: 1.9 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 (13): @checkout-form, @section--wide-example, @accordion-module, @grid-module, @grid-module--showcase, @image-module, @image-module--wide, @logo-module, @logo-module--grid-layout, @view-cart, @view-checkout, @view-order-confirmation, @view-single-product


        
        
        <section class="section   ">
    <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>

</section>


        {% set BEM -%}
    section
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.sectionOffset %} {{ data.sectionOffset }}{% endif %}
{% endset %}

{% set headingElement = data.headingElement|default('h2') %}

{% if not sectionHeading and not data.sectionHeading %}
    {% set sectionHeading %}
        {% if data.title %}
            <{{ headingElement }} class="section__heading {{ headingElement }}">
            {{ data.title }}
            </{{ headingElement }}>
        {% endif %}
    {% endset %}
{% endif %}


<section {{ class('section', [
    modifier ? modifier : '',
    class ? class : '',
    data.sectionOffset ? data.sectionOffset : ''
])}}
    {% if data.sectionId %} id="{{ data.sectionId }}"{% endif %}>
    {{ sectionContent|default(data.sectionContent) }}
    {#<div class="section__container">
        <div class="section__container-inner">
            {% if not noHeading %}
                {{ sectionHeading|default(data.sectionHeading) }}
            {% endif %}

        </div>
    </div>
    {{ sectionWideContent|default(data.sectionWideContent) }}#}
</section>


        {
  "language": "en-US",
  "data": {
    "sectionContent": "<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>"
  },
  "isWide": true
}

File:

Content:


                                @use 'sass:math';

@mixin make-section-offset($name, $columns, $gutter) {
    @for $i from 1 through $columns {
        &.section--offset-#{$name}-#{$i} {
            .section__container-inner {
                margin-left: calc(math.div(100%, $columns) * $i + math.div($gutter, 2));
            }
        }
    }
}

.section {
    /*padding: $section-padding-default-sm 0 $section-padding-bottom;

    @include bp(md-min) {
        padding-top: $section-padding-default;
    }*/

    @include make-section-offset(xs, $grid-cols, $grid-gutter);

    @include bp(md-min) {

        @include make-section-offset(md, $grid-cols-md, $grid-gutter-md);
    }
}

.section__container {
    width: 100%;
    max-width: $container-max-width;
    margin: 0 auto;
    padding: 0 $container-padding;

    @include bp(md-min) {
        padding: 0 $container-padding-md;
    }
}

.section__heading {
    margin-bottom: 1em;
}

.section--top-none {
    padding-top: 0;
}

.section--bottom-none {
    padding-bottom: 0;
}

.section--checkout-form {
    margin-top: 12px;

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

.section--order-summary {
    margin-top: 8px;

    @include bp(lg-min) {
        margin-top: 24px;
    }
}

.section--faq {
    margin-top: 8px;

    @include bp(lg-min) {
        margin-top: 72px;
        margin-left: 108px;
    }
}

.section--checkout-buttons {
    margin-top: 24px;
    margin-bottom: 32px;

    @include bp(lg-min) {
        margin: 72px 0;
    }
}

h2.h3 {
    .section--faq &,
    .section--order-confirmation-faq & {
        margin-bottom: 16px;
    }
}

.section--cart-table {
    margin-top: 12px;

    &:nth-child(n+2) {
        margin-top: 24px;
    }

    @include bp(lg-min) {
        margin-top: 32px;

        &:nth-child(n+2) {
            margin-top: 72px;
        }
    }
}

.section--order-confirmation-table {
    margin: 24px 0;

    @include bp(lg-min) {
        margin: 40px 0;
    }
}

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

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

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

No Padding

Top and bottom padding are cleared separately with: section--top-none and section--bottom-none

Preview
HTML
View
Context
Assets
Info


        
        
        <section class="section section--top-none section--bottom-none  ">
    <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>

</section>


        {% set BEM -%}
    section
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.sectionOffset %} {{ data.sectionOffset }}{% endif %}
{% endset %}

{% set headingElement = data.headingElement|default('h2') %}

{% if not sectionHeading and not data.sectionHeading %}
    {% set sectionHeading %}
        {% if data.title %}
            <{{ headingElement }} class="section__heading {{ headingElement }}">
            {{ data.title }}
            </{{ headingElement }}>
        {% endif %}
    {% endset %}
{% endif %}


<section {{ class('section', [
    modifier ? modifier : '',
    class ? class : '',
    data.sectionOffset ? data.sectionOffset : ''
])}}
    {% if data.sectionId %} id="{{ data.sectionId }}"{% endif %}>
    {{ sectionContent|default(data.sectionContent) }}
    {#<div class="section__container">
        <div class="section__container-inner">
            {% if not noHeading %}
                {{ sectionHeading|default(data.sectionHeading) }}
            {% endif %}

        </div>
    </div>
    {{ sectionWideContent|default(data.sectionWideContent) }}#}
</section>


        {
  "language": "en-US",
  "data": {
    "sectionContent": "<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--top-none section--bottom-none"
}

File:

Content:


                                @use 'sass:math';

@mixin make-section-offset($name, $columns, $gutter) {
    @for $i from 1 through $columns {
        &.section--offset-#{$name}-#{$i} {
            .section__container-inner {
                margin-left: calc(math.div(100%, $columns) * $i + math.div($gutter, 2));
            }
        }
    }
}

.section {
    /*padding: $section-padding-default-sm 0 $section-padding-bottom;

    @include bp(md-min) {
        padding-top: $section-padding-default;
    }*/

    @include make-section-offset(xs, $grid-cols, $grid-gutter);

    @include bp(md-min) {

        @include make-section-offset(md, $grid-cols-md, $grid-gutter-md);
    }
}

.section__container {
    width: 100%;
    max-width: $container-max-width;
    margin: 0 auto;
    padding: 0 $container-padding;

    @include bp(md-min) {
        padding: 0 $container-padding-md;
    }
}

.section__heading {
    margin-bottom: 1em;
}

.section--top-none {
    padding-top: 0;
}

.section--bottom-none {
    padding-bottom: 0;
}

.section--checkout-form {
    margin-top: 12px;

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

.section--order-summary {
    margin-top: 8px;

    @include bp(lg-min) {
        margin-top: 24px;
    }
}

.section--faq {
    margin-top: 8px;

    @include bp(lg-min) {
        margin-top: 72px;
        margin-left: 108px;
    }
}

.section--checkout-buttons {
    margin-top: 24px;
    margin-bottom: 32px;

    @include bp(lg-min) {
        margin: 72px 0;
    }
}

h2.h3 {
    .section--faq &,
    .section--order-confirmation-faq & {
        margin-bottom: 16px;
    }
}

.section--cart-table {
    margin-top: 12px;

    &:nth-child(n+2) {
        margin-top: 24px;
    }

    @include bp(lg-min) {
        margin-top: 32px;

        &:nth-child(n+2) {
            margin-top: 72px;
        }
    }
}

.section--order-confirmation-table {
    margin: 24px 0;

    @include bp(lg-min) {
        margin: 40px 0;
    }
}

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

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

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

Offset Example

Preview
HTML
View
Context
Assets
Info


        
        
        <section class="section section--offset-md-4  ">
    <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>

</section>


        {% set BEM -%}
    section
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.sectionOffset %} {{ data.sectionOffset }}{% endif %}
{% endset %}

{% set headingElement = data.headingElement|default('h2') %}

{% if not sectionHeading and not data.sectionHeading %}
    {% set sectionHeading %}
        {% if data.title %}
            <{{ headingElement }} class="section__heading {{ headingElement }}">
            {{ data.title }}
            </{{ headingElement }}>
        {% endif %}
    {% endset %}
{% endif %}


<section {{ class('section', [
    modifier ? modifier : '',
    class ? class : '',
    data.sectionOffset ? data.sectionOffset : ''
])}}
    {% if data.sectionId %} id="{{ data.sectionId }}"{% endif %}>
    {{ sectionContent|default(data.sectionContent) }}
    {#<div class="section__container">
        <div class="section__container-inner">
            {% if not noHeading %}
                {{ sectionHeading|default(data.sectionHeading) }}
            {% endif %}

        </div>
    </div>
    {{ sectionWideContent|default(data.sectionWideContent) }}#}
</section>


        {
  "language": "en-US",
  "data": {
    "sectionContent": "<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--offset-md-4"
}

File:

Content:


                                @use 'sass:math';

@mixin make-section-offset($name, $columns, $gutter) {
    @for $i from 1 through $columns {
        &.section--offset-#{$name}-#{$i} {
            .section__container-inner {
                margin-left: calc(math.div(100%, $columns) * $i + math.div($gutter, 2));
            }
        }
    }
}

.section {
    /*padding: $section-padding-default-sm 0 $section-padding-bottom;

    @include bp(md-min) {
        padding-top: $section-padding-default;
    }*/

    @include make-section-offset(xs, $grid-cols, $grid-gutter);

    @include bp(md-min) {

        @include make-section-offset(md, $grid-cols-md, $grid-gutter-md);
    }
}

.section__container {
    width: 100%;
    max-width: $container-max-width;
    margin: 0 auto;
    padding: 0 $container-padding;

    @include bp(md-min) {
        padding: 0 $container-padding-md;
    }
}

.section__heading {
    margin-bottom: 1em;
}

.section--top-none {
    padding-top: 0;
}

.section--bottom-none {
    padding-bottom: 0;
}

.section--checkout-form {
    margin-top: 12px;

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

.section--order-summary {
    margin-top: 8px;

    @include bp(lg-min) {
        margin-top: 24px;
    }
}

.section--faq {
    margin-top: 8px;

    @include bp(lg-min) {
        margin-top: 72px;
        margin-left: 108px;
    }
}

.section--checkout-buttons {
    margin-top: 24px;
    margin-bottom: 32px;

    @include bp(lg-min) {
        margin: 72px 0;
    }
}

h2.h3 {
    .section--faq &,
    .section--order-confirmation-faq & {
        margin-bottom: 16px;
    }
}

.section--cart-table {
    margin-top: 12px;

    &:nth-child(n+2) {
        margin-top: 24px;
    }

    @include bp(lg-min) {
        margin-top: 32px;

        &:nth-child(n+2) {
            margin-top: 72px;
        }
    }
}

.section--order-confirmation-table {
    margin: 24px 0;

    @include bp(lg-min) {
        margin: 40px 0;
    }
}

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

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

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

Wide Example

This allows built-in wide sections and mixed content as well

Preview
HTML
View
Context
Assets
Info


        
        
        <section class="section   ">
    <div class="sg-box">I am Normal</div>

</section>


        {% set wideContent %}
    <div class="sg-box sg-box--dark">I am Wide</div>
{% endset %}

{% set normalContent %}
    <div class="sg-box">I am Normal</div>
{% endset %}

{% include '@section' with { sectionContent: normalContent, sectionWideContent: wideContent } %}


        {
  "language": "en-US",
  "data": {
    "sectionContent": "<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:


                                @use 'sass:math';

@mixin make-section-offset($name, $columns, $gutter) {
    @for $i from 1 through $columns {
        &.section--offset-#{$name}-#{$i} {
            .section__container-inner {
                margin-left: calc(math.div(100%, $columns) * $i + math.div($gutter, 2));
            }
        }
    }
}

.section {
    /*padding: $section-padding-default-sm 0 $section-padding-bottom;

    @include bp(md-min) {
        padding-top: $section-padding-default;
    }*/

    @include make-section-offset(xs, $grid-cols, $grid-gutter);

    @include bp(md-min) {

        @include make-section-offset(md, $grid-cols-md, $grid-gutter-md);
    }
}

.section__container {
    width: 100%;
    max-width: $container-max-width;
    margin: 0 auto;
    padding: 0 $container-padding;

    @include bp(md-min) {
        padding: 0 $container-padding-md;
    }
}

.section__heading {
    margin-bottom: 1em;
}

.section--top-none {
    padding-top: 0;
}

.section--bottom-none {
    padding-bottom: 0;
}

.section--checkout-form {
    margin-top: 12px;

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

.section--order-summary {
    margin-top: 8px;

    @include bp(lg-min) {
        margin-top: 24px;
    }
}

.section--faq {
    margin-top: 8px;

    @include bp(lg-min) {
        margin-top: 72px;
        margin-left: 108px;
    }
}

.section--checkout-buttons {
    margin-top: 24px;
    margin-bottom: 32px;

    @include bp(lg-min) {
        margin: 72px 0;
    }
}

h2.h3 {
    .section--faq &,
    .section--order-confirmation-faq & {
        margin-bottom: 16px;
    }
}

.section--cart-table {
    margin-top: 12px;

    &:nth-child(n+2) {
        margin-top: 24px;
    }

    @include bp(lg-min) {
        margin-top: 32px;

        &:nth-child(n+2) {
            margin-top: 72px;
        }
    }
}

.section--order-confirmation-table {
    margin: 24px 0;

    @include bp(lg-min) {
        margin: 40px 0;
    }
}

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

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

Handle: @section--wide-example
Filesystem Path: src/patterns/components/section/section--wide-example.twig
References (1): @section

Wide

No Padding

Offset Example

Wide Example

Filter

Forms

Notifications

Search

Return

CMS

Copy environment

Section

Wide

No Padding

Offset Example

Wide Example