Alpaca components for Magento 2

Block Info 

<div class="block-info margin-bottom-m">
    <div class="block-info__title">
        <span>
            Example title text
        </span>
        <div class="actions-group block-info__actions">
            <div class="actions-group__handler">
                <a class="link " href="#" title="Link">
                    Link
                </a>

            </div>
        </div>

    </div>
    <div class="block-info__content">
        <p class="block-info__content-text ">
            Content text example
        </p>
    </div>
</div>
 
<div class="block-info {{ class }}">
    <div class="block-info__title">
        {{#if link }}
            <span>
                {{ titleText }}
            </span>
            {{ render '@actions-group' link.button }}
        {{else}}
            {{ titleText }}
        {{/if}}
    </div>
    <div class="block-info__content">
        <p class="block-info__content-text {{ contentTextClass }}">
            {{ contentText }}
        </p>
    </div>
</div>
 
{
  "class": "margin-bottom-m",
  "titleText": "Example title text",
  "contentText": "Content text example",
  "contentClass": "margin-bottom-0",
  "link": {
    "button": {
      "class": "block-info__actions",
      "sides": [
        {
          "action": [
            {
              "link": {
                "title": "Link",
                "text": "Link"
              }
            }
          ]
        }
      ]
    }
  }
}
  • Content: 
    $block-info__title-font-size       : $font-size-medium !default;
$block-info__title-font-weight     : $font-weight-bold !default;
$block-info__title-text-transform  : uppercase !default;

$block-info__content-text-font-size: $font-size-base !default;

$block-info__actions-margin        : 0 $spacer--medium !default;
$block-info__actions-link-padding  : 0 !default;

$block-info__link-text-decoration  : underline !default;
$block-info__link-text-transform   : none !default;


.block-info {
    display: flex;
    flex-direction: column;

    &__title {
        display: flex;
        flex-direction: column;
        font-size: $block-info__title-font-size;
        text-transform: $block-info__title-text-transform;
        font-weight: $block-info__title-font-weight;
        @include mq($screen-m) {
            flex-direction: row;
        }
    }

    &__actions {
        width: auto;
        @include mq($screen-m) {
            margin: $block-info__actions-margin;
        }

        .link {
            text-decoration: $block-info__link-text-decoration;
            text-transform: $block-info__link-text-transform;
            @include mq($screen-m) {
                padding: $block-info__actions-link-padding;
            }
        }
    }

    &__content-text {
        font-size: $block-info__content-text-font-size;
    }
}
  • URL: /components/raw/dashboard-block-info/_block-info.scss
  • Filesystem Path: build/components/Organisms/dashboard/block-info/_block-info.scss
  • Size: 1.3 KB

No notes defined.