<a href="#" class="n7-category text-primary-600 hover:underline hover:text-primary-800 focus:text-primary-800">
    Category label
</a>
<{% if href %}a href="{{ href }}"{% else %}span {% endif %} class="n7-category{%- block classes -%} {% if classes %} {{ classes }} {% endif %}{%- endblock classes -%}{% if href %} text-primary-600 hover:underline hover:text-primary-800 focus:text-primary-800{% endif %}">
    {%- block before -%}{%- endblock before %}
    {% block content %}{{ text }}{% endblock %}
</{% if href %}a{% else %}span{% endif %}>
{
  "text": "Category label"
}
  • Content:
    /**
     * CATEGORY
     *
    */
    @layer components {
        .n7-category {
            @apply inline-flex items-center gap-2 pr-2 uppercase font-medium text-sm border-r last-of-type:border-r-0;
        }
    
        .n7-category--sm {
            @apply text-xs;
        }
    
        .n7-category--lg {
            @apply text-lg;
        }
    
        .n7-category--outline {
            @apply px-2 py-1 rounded border last-of-type:border-r;
        }
    }
  • URL: /components/raw/category/category.css
  • Filesystem Path: components/02-atoms/category/category.css
  • Size: 389 Bytes

Category component configurations.

  • href: value - if component is used as link (print link tag instead of span)
  • span: true - if element is not interactive
  • classes: value - when you need extra classes - for style overriding etc
  • icon: value - id of icon
  • text: value - category text label

Blocks:

  • classes: for class overridings in variant templates, if needed
  • before: for content before main label (icon)
  • content: main content