University of Florida College of the Arts Pattern Library

Tag List 

<div class="tag-list">
    <ul class="tag-list__list">
        <span class="tag-list__icon"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <mask id="mask0_4613_118086" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
                    <rect width="16" height="16" fill="#D9D9D9" />
                </mask>
                <g mask="url(#mask0_4613_118086)">
                    <path d="M9.50016 14.2673C9.24461 14.5229 8.92794 14.6507 8.55016 14.6507C8.17239 14.6507 7.85572 14.5229 7.60016 14.2673L1.7335 8.40065C1.61127 8.27843 1.51405 8.13398 1.44183 7.96732C1.36961 7.80065 1.3335 7.62287 1.3335 7.43398V2.66732C1.3335 2.30065 1.46405 1.98676 1.72516 1.72565C1.98627 1.46454 2.30016 1.33398 2.66683 1.33398H7.4335C7.62239 1.33398 7.80016 1.3701 7.96683 1.44232C8.1335 1.51454 8.27794 1.61176 8.40016 1.73398L14.2668 7.61732C14.5224 7.87287 14.6502 8.18676 14.6502 8.55898C14.6502 8.93121 14.5224 9.2451 14.2668 9.50065L9.50016 14.2673ZM8.55016 13.334L13.3168 8.56732L7.4335 2.66732H2.66683V7.43398L8.55016 13.334ZM4.3335 5.33398C4.61127 5.33398 4.84739 5.23676 5.04183 5.04232C5.23627 4.84787 5.3335 4.61176 5.3335 4.33398C5.3335 4.05621 5.23627 3.8201 5.04183 3.62565C4.84739 3.43121 4.61127 3.33398 4.3335 3.33398C4.05572 3.33398 3.81961 3.43121 3.62516 3.62565C3.43072 3.8201 3.3335 4.05621 3.3335 4.33398C3.3335 4.61176 3.43072 4.84787 3.62516 5.04232C3.81961 5.23676 4.05572 5.33398 4.3335 5.33398Z" fill="#4E4E4E" />
                </g>
            </svg>
        </span>
        <li class="tag-list__tag">Deans Office</li>
        <span class="tag-list__separator">,</span>
        <li class="tag-list__tag">School of Music</li>
    </ul>
</div>
 
<div class="tag-list">
    <ul class="tag-list__list">
        <span class="tag-list__icon">{% include 'bits/icons/tag-icon.twig' %}</span>
        {% for tag in tags %}
            <li class="tag-list__tag">{{ tag.name }}</li>
            {% if not loop.last %}
                <span class="tag-list__separator">,</span>
            {% endif %}
        {% endfor %}
    </ul>
</div>
 
{
  "tags": [
    {
      "term_id": 5,
      "name": "Deans Office",
      "slug": "deans-office",
      "term_taxonomy_id": 5,
      "taxonomy": "units_and_areas",
      "parent": 0
    },
    {
      "term_id": 6,
      "name": "School of Music",
      "slug": "school-of-music",
      "term_taxonomy_id": 6,
      "taxonomy": "units_and_areas",
      "parent": 0
    }
  ]
}
  • Content: 
    .tag-list
    --textColor grey500

    &__list
        @extends $detail
        align-items center
        color var(--textColor)
        display flex
        text-align center

    &__icon svg
        margin-bottom -4px

    &__icon
    &__separator
        &:not(&:last-child)
            margin-right 8px
  • URL: /components/raw/tag-list/tag-list.styl
  • Filesystem Path: patterns/partials/tag-list/tag-list.styl
  • Size: 308 Bytes

No notes defined.