<span class="n7-chip   n7-chip--sm"><svg class="n7-icon inline-block align-middle fill-current w-4 h-4 mr-1" aria-hidden="true" focusable="false" role="img">
        <use href="../../icons.svg#mini--tag" />
    </svg>

    <span class="sr-only">Tag: </span>

    tag</span>
{% extends '@chip' %}
{% block classes %}{{ super() }} n7-chip--sm{% endblock %}
{%- block icon -%}
    {% render '@icon--small', { id: icon, classes: 'mr-1' }, true %}
{%- endblock -%}
{%- block close -%}{%- endblock -%}
{
  "label": "tag",
  "srLabel": "Tag: ",
  "icon": "mini--tag"
}
  • Content:
    /**
     * CHIP
     *
    */
    @layer components {
        .n7-chip {
            @apply inline-flex px-4 py-1 items-center border rounded-2xl n7-background-02;
        }
    
        .n7-chip--sm {
            @apply px-2 py-0.5 rounded-xl text-sm;
        }
    
        .rtds-chip--lg {
            @apply px-4 py-2 rounded-3xl text-sm;
        }
    
        /* Chip link - interactive */
        .n7-chip--interactive {
            @apply n7-border-primary n7-content-primary bg-transparent hover:n7-background-primary-light focus:bg-white focus:n7-border-gray-01 active:n7-background-primary-light active:n7-border-primary;
        }
    
        /* CHIP FILTER */
        .n7-chip.has-btn-close {
            @apply inline-flex items-center justify-center gap-1 relative;
        }
    
        .rtds-chip--filter {
            @apply gap-2 n7-background-06 text-white;
        }
    
        .n7-chip__close {
            @apply inline-flex items-center justify-center rounded-full hover:n7-background-02 hover:n7-content-01 focus:n7-background-02 focus:n7-content-01 active:n7-background-02 active:n7-content-01 transition-all;
        }
    
        .n7-chip__close {
            @apply after:content-[''] after:block after:right-0 after:w-8 after:h-8 after:absolute;
        }
    
    
        /* CHIP STATUS */
        /* .n7-chip--status.is-open {
            @apply bg-bando-aperto border-bando-aperto text-black;
        }
    
        .n7-chip--status.is-in-progress {
            @apply bg-bando-in-attivazione border-bando-in-attivazione text-black;
        }
    
        .n7-chip--status.is-closed {
            @apply bg-archiviato border-archiviato text-white;
        } */
    }
  • URL: /components/raw/chip/chip.css
  • Filesystem Path: components/02-atoms/chip/chip.css
  • Size: 1.5 KB

Chip component

Description

Chip component and its variants.

Chip can have a screen reader label (sr-only, in the example), depend on the context, if there’s an explicit textual label presenting the chip it can be omitted.

  • category: with icon;
  • tag: used for tag in card context or other
  • interactive: chip link
  • filter: with close button, used in search active filters

It’s available in 3 size: sm, default (no class is needed), lg.

Configurations - for development with NUNJUCKS

  • 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
  • srLabel: value - Semantic text for screen readers - gives more context for the information
  • label: value - chip text label
  • hasBtnClose: true - if close button is needed

Blocks:

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