<li class="list-link__container">
<a href="" class="list-link">
<span class="list-link__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g id="description">
<mask id="mask0_4834_46427" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect id="Bounding box" width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4834_46427)">
<path id="description_2" d="M8 18H16V16H8V18ZM8 14H16V12H8V14ZM6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H14L20 8V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 9V4H6V20H18V9H13Z" fill="#F5592F" />
</g>
</g>
</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": "file",
"element": "li",
"text": "File Link",
"external_url": "https://google.com",
"internal_url": "#",
"file_url": "https://google.com"
}
}
.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.