<li class="list-link__container">
<a href="" class="list-link">
<span class="list-link__icon"><svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z" />
</svg>
</span>
</a>
</li>
<li class="list-link__container">
<a
href="{{ fields.linkUrl }}"
class="list-link"
{{ (type == 'external' or type == 'file') ? 'target="_blank" rel="noopener"' }}
{% set onClick %}onClick="window.open(this.href,'targetWindow','toolbar=no,location=0,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=250'); return false;"{% endset %}
{{ dialog ? onClick }}
>
{{ fields.linkText }}
<span class="list-link__icon">{% include 'bits/icons/'~ fields.linkType ~'-link.twig' %}</span>
</a>
</li>
{
"fields": {
"linkType": "internal",
"element": "li",
"text": "Internal Link",
"external_url": "https://google.com",
"internal_url": "https://google.com",
"file_url": "#"
}
}
.list-link
--iconFillColor orange
--linkColor blue500
--linkColorActive orange
@extends $linkBodySmall
transition all 0.3s
color var(--linkColor)
display flex
flex-direction row
justify-content space-between
align-items center
width 100%
margin-bottom 2px
padding 14px 16px
font-weight 500
background-color white
text-decoration none
&:last-of-type
margin-bottom 0
&:hover
color var(--linkColorActive)
&__container
display flex
flex-direction row
justify-content space-between
&__icon
line-height 0
& svg
width 24px
& path
fill var(--iconFillColor)
No notes defined.