Swegon Component Library

External Link Area 

<div class="external-link-area">
    <strong class="external-link-area__title">Take a look at this product through our supplier:</strong>
    <a class="button  h-no-margin button--ghost button--icon" href="#">
        <span class="button__label">To the product</span>
        <svg class="icon button__icon" focusable="false">
            <use xlink:href="#icon-external-link"></use>
        </svg>
    </a>

</div>
 
<div class="external-link-area">
    <strong class="external-link-area__title">{{label}}</strong>
    {{ render "@button" button }}
</div>
 
{
  "label": "Take a look at this product through our supplier:",
  "button": {
    "href": "#",
    "label": "To the product",
    "additionalClasses": "h-no-margin button--ghost",
    "icon": "external-link"
  }
}
  • Content: 
    .external-link-area {
    margin: 12px 0;
    text-align: center;

    &__title {
        display: block;
        margin: 0 0 8px;
    }

    @include breakpoint($m) {
        margin: 24px 0;
        text-align: left;
    }
}
  • URL: /components/raw/external-link-area/external-link-area.scss
  • Filesystem Path: src/components/external-link-area/external-link-area.scss
  • Size: 225 Bytes

No notes defined.