Swegon Component Library

Link: With Icon 

<a href="#" class="link link--icon ">
    <span class="link__label">Link</span>
    <svg class="icon link__icon" focusable="false">
        <use xlink:href="#icon-chevron-right"></use>
    </svg>
</a>
 
<a href="{{href}}" class="link{{#if icon}} link--icon{{/if}} {{ getmodifiers modifiers "link"}}" {{{getattributes attributes}}}>
    <span class="link__label">{{label}}</span>
    {{#if icon}}
        {{>@icon id=icon additionalClasses="link__icon"}}
    {{/if}}
</a>
 
{
  "label": "Link",
  "href": "#",
  "icon": "chevron-right"
}
  • Content: 
    .link {
    display: inline-block;

    &--dark {
        color: $color-black;
    }

    &--small {
        font-size: size(1.75);
        line-height: size(2.5);
    }

    &--big {
        font-size: size(3);
        line-height: size(4);
    }

    &--bold {
        font-weight: $font-weight-bold;
    }

    &:not(.link--dark) {
        @include color-theme {
            color: $arg-theme-color;
        }
    }
}

.link__label {
    vertical-align: middle;
}

.link__icon {
    vertical-align: middle;
    width: size(2);
    height: size(2);
    fill: $color-green-dark;
    margin-left: size(0.5);

    .link--big & {
        width: size(2.5);
        height: size(2.5);
        margin-left: size(1);
    }

    @include color-theme {
        fill: $arg-theme-color;
    }
}
  • URL: /components/raw/link/link.scss
  • Filesystem Path: src/components/link/link.scss
  • Size: 785 Bytes

No notes defined.