List Link 

<a href="" class="links-list__link">
    <span class="links-list__link-icon"></span>
    <span class="links-list__link-text"></span>
</a>
 
<a href="{{url}}" class="links-list__link" {{#if target}} target="{{target}}"{{#ifEquals target "_blank"}} rel="noopener"{{/ifEquals}}{{/if}} >
    {{#unless isExternal}}<span class="links-list__link-icon"></span>{{/unless}}
    <span class="links-list__link-text">{{text}}</span>
    {{#if isExternal}}<span class="links-list__link-icon links-list__link-icon--external"></span>{{/if}}
</a>
 
/* No context defined for this component. */
  • Content: 
    @import 'src/core/scss/01-settings/_import';
@import 'src/core/scss/02-tools/_import';
$link-text-color: map-get($colors, 'woodsmoke');
.links-list {
    $this: &;
    &__link {
        align-items: center;
        cursor: pointer;
        display: flex;
        text-decoration: none;
        &:not(last-child) {
            margin-bottom: rem(15);
        }
        &:hover {
            #{$this}__link-text {
                color: $link-text-color;
                &::after {
                    opacity: 1;
                }
            }
        }
    }
    &__link-icon {
        background-image: url('/img/ui/icons/chevron-right-green-light.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 20px;
        display: block;
        height: 16px;
        margin-right: rem(5);
        width: 16px;
        &--external {
            background-image: url('/img/ui/icons/external-link-green-light.svg');
            margin: 0 0 0 rem(5);
        }
    }
    &__link-text {
        @extend %heading;
        color: $link-text-color;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        position: relative;
        &::after {
            background: map-get($colors, 'limeade');
            bottom: -2px;
            content: '';
            height: 2px;
            left: 0;
            opacity: 0;
            position: absolute;
            transition: opacity .15s ease-in;
            width: 100%;
        }
        &--cookies {
            background: none !important;
            border: 0 !important;
            color: inherit !important;
            font-size: 14px !important;
            padding: inherit !important;
            &:hover {
                background: none !important;
            }
        }
    }
}
  • URL: /components/raw/list-link/list-links.scss
  • Filesystem Path: src/patterns/03-components/site-furniture/_list-link/list-links.scss
  • Size: 1.8 KB

There are no notes for this item.