University of Florida College of the Arts Pattern Library

Unit List 

<div class="unit-list">
    <ul class="unit-list__list">
        <li class="unit-list__unit">Deans Office</li>
        <span class="unit-list__separator">•</span>
        <li class="unit-list__unit">School of Music</li>
    </ul>
</div>
 
<div class="unit-list">
    <ul class="unit-list__list">
        {% for unit in units %}
            <li class="unit-list__unit">{{ unit.name }}</li>
            {% if not loop.last %}
                <span class="unit-list__separator">•</span>
            {% endif %}
        {% endfor %}
    </ul>
</div>
 
{
  "units": [
    {
      "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: 
    .unit-list
    --textColor grey500

    &__list
        @extends $label
        align-items center
        color var(--textColor)
        display flex
        flex-wrap wrap
        line-height 1.7

    &__icon
    &__separator
        margin-right 8px

    &__unit
        &:not(&:last-child)
            margin-right 8px
  • URL: /components/raw/unit-list/unit-list.styl
  • Filesystem Path: patterns/partials/unit-list/unit-list.styl
  • Size: 323 Bytes

No notes defined.