Tangible Pattern Library

Categories 

<div class="c-categories">
    <ul class="c-categories__list">
        <li class="c-categories__list-item">
            <a href="#" class="c-categories__link ">Education</a>
        </li>
        <li class="c-categories__list-item">
            <a href="#" class="c-categories__link ">Business Intelligence</a>
        </li>
        <li class="c-categories__list-item">
            <a href="#" class="c-categories__link ">Fintech</a>
        </li>
        <li class="c-categories__list-item">
            <a href="#" class="c-categories__link ">Servizi</a>
        </li>
        <li class="c-categories__list-item">
            <a href="#" class="c-categories__link ">GDO</a>
        </li>
        <li class="c-categories__list-item">
            <a href="#" class="c-categories__link ">Travel</a>
        </li>
        <li class="c-categories__list-item">
            <a href="#" class="c-categories__link ">Health</a>
        </li>
        <li class="c-categories__list-item">
            <a href="#" class="c-categories__link ">HR</a>
        </li>
        <li class="c-categories__list-item">
            <a href="#" class="c-categories__link ">Cyber Security</a>
        </li>
    </ul>
</div>
 
{% import "@macros" as macroNav %}

<div class="c-categories{% if modifier is defined %} {{ modifier }}{% endif %}">
  <ul class="c-categories__list"{% if attr is defined %} {{ attr|raw }}{% endif %}>
    {% for item in items %}
      {%  set isActive = activeCategory is defined and activeCategory and item.title == activeCategory.title %}
      <li class="c-categories__list-item">
        <a href="{{ item.url }}" 
          class="c-categories__link {{ isActive ? 'is-active' : '' }}"
          {{ isActive ? 'aria-label="Filtro selezionato"'|t|raw : '' }}
        >{{ item.title }}</a>{% if hasCount is defined %} <span class="c-categories__counter">({{ item.count }})</span>{% endif %}
      </li>
    {% endfor %}
  </ul>
</div>
 
{
  "items": [
    {
      "title": "Education",
      "url": "#",
      "active": true
    },
    {
      "title": "Business Intelligence",
      "url": "#",
      "active": false
    },
    {
      "title": "Fintech",
      "url": "#",
      "active": false
    },
    {
      "title": "Servizi",
      "url": "#",
      "active": false
    },
    {
      "title": "GDO",
      "url": "#",
      "active": false
    },
    {
      "title": "Travel",
      "url": "#",
      "active": false
    },
    {
      "title": "Health",
      "url": "#",
      "active": false
    },
    {
      "title": "HR",
      "url": "#",
      "active": false
    },
    {
      "title": "Cyber Security",
      "url": "#",
      "active": false
    }
  ]
}
  • Content: 
    .c-categories__list {
  list-style: none;
  display: flex;
  margin: 0 -#{spacing(space-16)};
  overflow-x: auto;
  padding-bottom: spacing(space-16);
}

.c-categories__list-item {
  display: flex;
  margin: 0 spacing(space-16);
  @include font-scale(level-2, $font-secondary, bold);
}

.c-categories__link {
  color: useHSL(--primary-100);
  white-space: pre;
}

.c-categories__link.is-active {
  color: useHSL(--accent-100);
}

.c-categories__counter {
  margin-left: spacing(space-4);
}

/*------------------------------------*
  Vertical modifier
*------------------------------------*/
.c-categories--vertical {
  margin: 0;
  
  .c-categories__list {
    @include min-screen(bp(large)) {
      display: block;
      margin: 0;
    }
  }

  .c-categories__list-item {
    
    @include min-screen(bp(large)) {
      margin: spacing(space-32) 0;

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

  }

}
  • URL: /components/raw/categories/_categories.scss
  • Filesystem Path: src/pattern-library/02-components/categories/_categories.scss
  • Size: 975 Bytes

No notes defined.