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

            <div class="paragraph content-block__description">
                <span>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
                </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": "Lorem ipsum"
          }
        },
        {
          "contentElement": "paragraph",
          "contentContext": {
            "tag": "span",
            "class": "content-block__description",
            "text": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text"
          }
        },
        {
          "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.