<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__description-font-size               : $font-size-base !default;
    $content-block__description-font-size\@medium       : $font-size-medium !default;
    
    $content-block__link-margin                         : 0 0 $spacer--medium !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 {
            margin: $content-block__link-margin;
            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

No notes defined.