University of Florida College of the Arts Pattern Library

List Link: Default 

<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="external_link">
                    <mask id="mask0_4834_1082" 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_1082)">
                        <path id="ungroup" d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V7C3 5.89543 3.89543 5 5 5H11V7H5V19H16.5V12H18.5V19C18.5 20.1046 17.6046 21 16.5 21H5Z" fill="#F5592F" />
                        <path id="ungroup_2" d="M9 13.5L10.4 14.9L18.6992 6.4V10H20.6992V3H13.6992V5H17.2992L9 13.5Z" 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": "external",
    "element": "li",
    "text": "External Link",
    "external_url": "https://google.com",
    "internal_url": "#",
    "file_url": "#"
  }
}
  • Content: 
    .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)
  • URL: /components/raw/list-link/list-link.styl
  • Filesystem Path: patterns/bits/list-link/list-link.styl
  • Size: 732 Bytes

No notes defined.