Net7 UI Kit

Category: Sm 

<a href="#" class="n7-category
  n7-category--sm
 text-primary-600 hover:underline hover:text-primary-800 focus:text-primary-800">
    Category label
</a>
 
{% extends '@category' %}

{% block classes %}
 {{ super() }} n7-category--sm
{% endblock classes %}
 
{
  "text": "Category label",
  "href": "#"
}
  • 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