University of Florida College of the Arts Pattern Library

Link List 

<div class="link-list">
    <h3 class="link-list__list-name" data-cy="link-list__list-name" id="Link list heading">Link list heading
    </h3>
    <ul class="link-list__links" data-cy="link-list__links">

        <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="" 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="" 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>
    </ul>
</div>
 
<div class="link-list">
   {% if fields.heading %}
        <{{ fields.level | default('h3') }} class="link-list__list-name"
            data-cy="link-list__list-name"
            id="{{ fields.heading|sanitize }}">{{ fields.heading }}
        </{{ fields.level | default('h3') }}>
    {% endif %}
    <ul class="link-list__links"
        data-cy="link-list__links">
        {{ content }}
        {% for item in fields.innerBlocks.links  %}
            {% include 'bits/list-link/list-link.twig' with item %}
        {% endfor %}
    </ul>
</div>
 
{
  "fields": {
    "type": "link-list",
    "heading": "Link list heading",
    "innerBlocks": {
      "links": [
        {
          "fields": {
            "element": "li",
            "linkType": "external",
            "text": "External link",
            "external_url": "https://google.com"
          }
        },
        {
          "fields": {
            "linkType": "internal",
            "text": "Internal Link",
            "internal_url": "https://google.com"
          }
        },
        {
          "fields": {
            "linkType": "file",
            "text": "File Link",
            "file_url": "https://google.com"
          }
        }
      ]
    }
  }
}
  • Content: 
    .link-list
    @extends $componentWithMargin

    &__links
        padding-left 0

    &__list-name
        @extends $label
        color blue500
        margin 16px 0

.link-lists .link-list
    margin 0
  • URL: /components/raw/link-list/link-list.styl
  • Filesystem Path: patterns/blocks/link-list/link-list.styl
  • Size: 205 Bytes

No notes defined.