Alpaca 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">
                Lorem ipsum is simply
            </h2>

        </div>
        <div class="content-block__column col-xs-12 col-lg-7 col-xl-6">
            <div class="paragraph content-block__introduction">
                <span>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                </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": "Lorem ipsum is simply"
          }
        }
      ]
    },
    {
      "class": "col-xs-12 col-lg-7 col-xl-6",
      "elements": [
        {
          "contentElement": "paragraph",
          "contentContext": {
            "tag": "span",
            "class": "content-block__introduction",
            "text": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
          }
        },
        {
          "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.