Net7 UI Kit

Category 

<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