cruc components for Magento 2

Section 

<section class="section ">
    <header class="section__heading">
        <h2 class="heading--first-level margin-0">
            Section title
        </h2>

    </header>
    <div class="section__content ">
        <div class="paragraph ">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            </p>
        </div>

    </div>
</section>
 
<section class="section {{ class }}">
    {{#if heading}}
        <header class="section__heading">
            {{ render (component heading.content) heading.contentContext }}
        </header>
    {{/if}}
    <div class="section__content {{ contentClass }}">
        {{# each components }}
            {{ render (component content.content) content.contentContext merge="true" }}
        {{/each}}
    </div>
</section>
 
{
  "heading": {
    "content": "heading",
    "contentContext": {
      "tag": "h2",
      "class": "heading--first-level margin-0",
      "text": "Section title"
    }
  },
  "contentClass": "",
  "components": [
    {
      "content": {
        "content": "paragraph",
        "contentContext": ""
      }
    }
  ]
}
  • Content: 
    $section__margin-bottom                     : 72px !default;
$section__margin                            : 0 0 $section__margin-bottom 0 !default;
$section__margin--secondary\@medium         : 0 !default;
$section__margin--fix-spacer                : 0 0 ($section__margin-bottom - $spacer) 0 !default;
$section__margin--fix-spacer-small          : 0 0 ($section__margin-bottom - $spacer--small) 0 !default;
$section__margin--fix-spacer-medium         : 0 0 ($section__margin-bottom - $spacer--medium) 0 !default;
$section__margin--fix-spacer-medium\@medium : 0 $spacer--extra-large ($section__margin-bottom - $spacer--medium) !default;
$section__margin--fix-spacer-medium\@large  : 0 0 ($section__margin-bottom - $spacer--medium) !default;
$section__margin--fix-spacer-semi-medium    : 0 0 ($section__margin-bottom - $spacer--semi-medium) 0 !default;
$section__margin--fix-spacer-large          : 0 0 ($section__margin-bottom - $spacer--large) 0 !default;
$section__margin--fix-spacer-large\@medium  : 0 $spacer--extra-large ($section__margin-bottom - $spacer--large) !default;
$section__margin--fix-spacer-large\@large   : 0 0 ($section__margin-bottom - $spacer--large) !default;
$section__margin--fix-spacer-semi-large     : 0 0 ($section__margin-bottom - $spacer--semi-large) 0 !default;
$section__margin--fix-spacer-extra-large    : 0 0 ($section__margin-bottom - $spacer--extra-large) 0 !default;

$section__heading-justify-content           : center !default;
$section__heading-min-height                : 48px !default;
$section__heading-margin                    : 0 0 $spacer--extra-large 0 !default;

$section__content-margin--products          : (-$spacer) (-$spacer) 0 !default;
  • URL: /components/raw/section/_section-variables.scss
  • Filesystem Path: build/components/Organisms/section/_section-variables.scss
  • Size: 1.7 KB
  • Content: 
    @import "section-variables";

.section {
    margin: $section__margin;
    &.mb--0 {
        margin-bottom: 0;
    }
    &--secondary {
        @include mq($screen-m) {
            margin: $section__margin--secondary\@medium;
        }
    }

    &--fix-spacer {
        margin: $section__margin--fix-spacer;
    }

    &--fix-spacer-small {
        margin: $section__margin--fix-spacer-small;
    }

    &--fix-spacer-medium {
        margin: $section__margin--fix-spacer-medium;

        @include mq($screen-m) {
            margin: $section__margin--fix-spacer-medium\@medium;
        }

        @include mq($screen-l) {
            margin: $section__margin--fix-spacer-medium\@large;
        }
    }

    &--fix-spacer-semi-medium {
        margin: $section__margin--fix-spacer-semi-medium;
    }

    &--fix-spacer-large {
        margin: $section__margin--fix-spacer-large;

        @include mq($screen-m) {
            margin: $section__margin--fix-spacer-large\@medium;
        }

        @include mq($screen-l) {
            margin: $section__margin--fix-spacer-large\@large;
        }
    }

    &--fix-spacer-semi-large {
        margin: $section__margin--fix-spacer-semi-large;
    }

    &--fix-spacer-extra-large {
        margin: $section__margin--fix-spacer-extra-large;
    }

    &__heading {
        display: flex;
        justify-content: $section__heading-justify-content;
        align-items: center;
        min-height: $section__heading-min-height;
        margin: $section__heading-margin;
    }

    &__content {
        &--products {
            margin: $section__content-margin--products;
        }
    }
}
  • URL: /components/raw/section/_section.scss
  • Filesystem Path: build/components/Organisms/section/_section.scss
  • Size: 1.6 KB

There are no notes for this item.