Kistenkoning components for Magento 2

Content Block: Default 

<div class="content-block ">
    <div class="content-block__row row">
        <div class="content-block__column col-xs-12">
            <h2 class="content-block__heading">
                Trendy inrichting
            </h2>

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

            <a class="link content-block__link" href="#" title="Title">
                Link
            </a>

        </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",
  "columns": [
    {
      "class": "col-xs-12",
      "elements": [
        {
          "contentElement": "heading",
          "contentContext": {
            "tag": "h2",
            "class": "content-block__heading",
            "text": "Trendy inrichting"
          }
        },
        {
          "contentElement": "paragraph",
          "contentContext": {
            "tag": "span",
            "class": "content-block__description",
            "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": "link",
          "contentContext": {
            "class": "content-block__link"
          }
        }
      ]
    }
  ]
}
  • 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.