Net7 UI Kit

Category: Icon Left 

<span class="n7-category n7-content-placeholder "><svg class="n7-icon inline-block align-middle fill-current w-2 h-2" aria-hidden="true" focusable="false" role="img">
        <use href="../../icons.svg#solid--circle" />
    </svg>

    Category label
</span>
 
{% extends '@category' %}

{%- block before -%}
    {% render '@icon--small', { id: icon, size: 'w-2 h-2' }, true %}
{%- endblock before -%}
 
{
  "text": "Category label",
  "classes": "n7-content-placeholder",
  "icon": "solid--circle"
}
  • 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