Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Tags

Et tag er en mindre knap, som du kan bruge til at angive metainformation om indhold, der kan kategoriseres, filtreres eller på anden vis beskrives med nøgleord. Tags forekommer med og uden ikon.

Eksempel på tags

Sådan bruges komponenten

Anvendes til

Et tag er en sekundær funktionalitet, der typisk anvendes til meta-information om indhold, der kan kategoriseres, filtreres eller på anden vis beskrives med nøgleord.

Anvendes ikke til

Primær funktionalitet som fx ”Gem”, hvor der i stedet bør anvendes en knap.

Hvis tags anvendes i tæt forbindelse med knapper, kan det forvirre brugeren. Overvej nøje placering og anvendelse og udfør brugertest.

Vejledning

Generelt skal du bruge tags til at give brugeren yderligere, sekundær information og nøgleord i relation til indholdet.

Brug så mange tags, der giver mening, men så få som muligt.

Brug ord og begreber, der kan genkendes fra løsningens kontekst og ikke ukendte.

Skriv kort og præcist.

Brug stort forbogstav og små bogstaver for resten.

Undgå at blande funktioner og husk at tags er noget, der må kunne overses uden at løsningens anvendelse forringes.

Sådan (do)

Eksempel på, hvordan tags kan se ud

Sådan: Brug tags til annoteringer eller nyttige metadata om indhold eller funktionalitet.

Ikke sådan (don't)

Eksempel på, hvordan tags ikke bør se ud

Ikke sådan: Brug ikke tags som erstatning for et systematisk navigationssystem på webstedet.

Varianter

Tags med luk-ikon

Installation

HTML Struktur

Kodeeksempel
<button class="tag ">Default </button>

Tags med luk-ikon

Kodeeksempel
<button class="tag tag-icon">Default
    <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#highlight-off"></use></svg>
</button>