<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.