cruc components for Magento 2

Content Block: Secondary 

<div class="content-block content-block--secondary">
    <div class="content-block__row row between-lg evenly-xl">
        <div class="content-block__column col-xs-12 col-lg-4 col-xl-3">
            <h2 class="heading--first-level content-block__heading content-block__heading--secondary">
                Trendy inrichting
            </h2>

        </div>
        <div class="content-block__column col-xs-12 col-lg-7 col-xl-6">
            <div class="paragraph content-block__introduction">
                <span>
            Voelt je huis niet meer als thuis en ben je toe aan een make-over? Maar heb je niet een al te groot budget om gloednieuwe meubels aan te schaffen? Schaf dan nieuwe trendy woonaccessoires aan. Woonaccessoires maken je huis gezellig! Een mooi schilderij boven een kast , een sierkussen voor op je bank. Kleine aanpassing, groots effect!
        </span>
            </div>

            <div class="paragraph content-block__description">
                <span>
            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
        </span>
            </div>

        </div>
    </div>
</div>
 
<div class="content-block {{ class }}">
    <div class="content-block__row {{ rowClass }}">
        {{#each columns as |column|}}
            <div class="content-block__column {{ column.class }}">
                {{#each column.elements as |element|}}
                    {{ render (component contentElement) contentContext merge=true}}
                {{/each}}
            </div>
        {{/each}}
    </div>
</div>
 
{
  "rowClass": "row between-lg evenly-xl",
  "columns": [
    {
      "class": "col-xs-12 col-lg-4 col-xl-3",
      "elements": [
        {
          "contentElement": "heading",
          "contentContext": {
            "tag": "h2",
            "class": "heading--first-level content-block__heading content-block__heading--secondary",
            "text": "Trendy inrichting"
          }
        }
      ]
    },
    {
      "class": "col-xs-12 col-lg-7 col-xl-6",
      "elements": [
        {
          "contentElement": "paragraph",
          "contentContext": {
            "tag": "span",
            "class": "content-block__introduction",
            "text": "Voelt je huis niet meer als thuis en ben je toe aan een make-over? Maar heb je niet een al te groot budget om gloednieuwe meubels aan te schaffen? Schaf dan nieuwe trendy woonaccessoires aan. Woonaccessoires maken je huis gezellig! Een mooi schilderij boven een kast , een sierkussen voor op je bank. Kleine aanpassing, groots effect!"
          }
        },
        {
          "contentElement": "paragraph",
          "contentContext": {
            "tag": "span",
            "class": "content-block__description"
          }
        }
      ]
    }
  ],
  "class": "content-block--secondary"
}
  • Content: 
    $content-block__padding                             : 0 $spacer--medium !default;
$content-block__padding\@medium                     : 0 $spacer--large !default;
$content-block__padding\@large                      : 0 $spacer--semi-large !default;
$content-block__padding\@xl                         : 0 56px !default;

$content-block__heading-padding                     : $spacer--medium 0 !default;
$content-block__heading-line-height                 : 48px !default;

$content-block__introduction-margin                 : $spacer--large 0 !default;
$content-block__introduction-margin\@medium         : 0 0 $spacer--large !default;
$content-block__introduction-font-size              : $font-size-medium !default;
$content-block__introduction-font-size\@medium      : $font-size-large !default;
$content-block__introduction-font-weight            : $font-weight-bold !default;
$content-block__introduction-line-height            : 24px !default;

$content-block__description-font-size               : $font-size-base !default;
$content-block__description-font-size\@medium       : $font-size-medium !default;
$content-block__description-line-height             : 24px !default;

$content-block__link-font-size                      : $font-size-base !default;
$content-block__link-font-weight                    : $font-weight-bold !default;
$content-block__link-line-height                    : 48px !default;
$content-block__link-text-decoration                : none !default;
$content-block__link-text-decoration--hover         : underline !default;

//secondary
$content-block__padding--secondary                  : 0 $spacer--semi-medium !default;
$content-block__padding--secondary\@medium          : 0 128px !default;
$content-block__padding--secondary\@large           : 0 !default;

$content-block__heading-max-width--secondary        : 70% !default;
$content-block__heading-max-width--secondary\@medium: 60% !default;
$content-block__heading-max-width--secondary\@large : 100% !default;
$content-block__heading-border--secondary           : $spacer--extra-small $border-style-base $color-primary !default;
$content-block__heading-border-width--secondary     : $spacer--extra-small 0 !default;
  • URL: /components/raw/content-block/_content-block-variables.scss
  • Filesystem Path: build/components/Organisms/content-block/_content-block-variables.scss
  • Size: 2.2 KB
  • Content: 
    @import 'content-block-variables';

.content-block {
    padding: $content-block__padding;

    @include mq($screen-m) {
        padding: $content-block__padding\@medium;
    }

    @include mq($screen-l) {
        padding: $content-block__padding\@large;
    }

    @include mq($screen-xl) {
        padding: $content-block__padding\@xl;
    }

    &--secondary {
        padding: $content-block__padding--secondary;

        @include mq($screen-m) {
            padding: $content-block__padding--secondary\@medium;
        }

        @include mq($screen-l) {
            padding: $content-block__padding--secondary\@large;
        }

        .content-block__heading {
            max-width: $content-block__heading-max-width--secondary;
            border: $content-block__heading-border--secondary;
            border-width: $content-block__heading-border-width--secondary;

            @include mq($screen-m) {
                max-width: $content-block__heading-max-width--secondary\@medium;
            }

            @include mq($screen-l) {
                max-width: $content-block__heading-max-width--secondary\@large;
            }
        }

    }

    &__heading {
        padding: $content-block__heading-padding;
        line-height: $content-block__heading-line-height;
    }

    &__introduction {
        margin: $content-block__introduction-margin;
        font-size: $content-block__introduction-font-size;
        font-weight: $content-block__introduction-font-weight;

        @include mq($screen-m) {
            font-size: $content-block__introduction-font-size\@medium;
        }

        @include mq($screen-l) {
            margin: $content-block__introduction-margin\@medium;
        }
    }

    &__description {
        font-size: $content-block__description-font-size;

        @include mq($screen-m) {
            font-size: $content-block__description-font-size\@medium;
        }
    }

    &__link {
        font-size: $content-block__link-font-size;
        font-weight: $content-block__link-font-weight;
        line-height: $content-block__link-line-height;
        text-decoration: $content-block__link-text-decoration;

        &:hover,
        &.focus-visible {
            text-decoration: $content-block__link-text-decoration--hover;
        }
    }
}
  • URL: /components/raw/content-block/_content-block.scss
  • Filesystem Path: build/components/Organisms/content-block/_content-block.scss
  • Size: 2.3 KB

There are no notes for this item.