Tags
Über das Pattern
Ein Tag verlinkt zu häufig gesuchten, passenden Themen und Bereichen und hebt sich durch einen pillenförmigen Rahmen von anderen Links ab.
Parameter und Anwendung in Nunjucks
# navTagLink(link, modifiers, attributes, icon_id, icon_title)
link: "string" # Link des Tags
modifiers: "array"
- "string" # zulässige Werte: amt, no-hover
attributes: "object" # HTML-Attribute (z. B.: class,...), frei wählbar
icon_id: "string" # ID des Icons (siehe /look-and-feel/icons/?icon_cat=uiedv)
icon_title: "string" # Beschreibung des Icons (im jeweiligen Zusammenhang)
{% call navTagLink(link = "#") %}
Text frei wählbar
{% endcall%}
# navTagDropdown(text, link, dropdownLink, id, items)
text: "string" # Text des Dropdown Tags
link: "string" # Link des Dropdown Tags
dropdownLink: "boolean" # Dropdown Tag auch Link als (default: false)
id: "string" # ID des Dropdown
items: "array" # Liste der enthaltenen Elemente
- text: "string" # Text frei wählbar
url: "string" # Link des Elements
selected: "boolean" # Option vorausgewählt (default: false)
{% from "components/nav/tag/nav-tag.njk" import navTagDropdown with context %}
{{ navTagDropdown(text, link, dropdownLink, id, items) }}
# navTag(nav, modifiers, items)
nav: "boolean" # Tags innerhalb eines <nav></nav> darstellen (enthält id und attribute "data-skip-link" für Skiplinks) (default: false)
modifiers: "array" # Liste von modifiers
- "string" # zulässige Werte: no-scroll, scroll
items: "array" # Liste der Navigation-Tags
- text: "string" # Text frei wählbar
url: "string" # Link des Tags
{% from "components/nav/tag/nav-tag.njk" import navTag with context %}
{{ navTag(items) }}
Variationen
Tag
Tag mit Icon
Tags für Amtswege und Stadtplan haben ein Icon.
Tag für Amtswege
Der Tag für Amtswege und Formulare verlinkt in den meisten Fällen zu Online-Anträgen und enthält ein entsprechendes Icon. Als Call-to-Action-Tag weist ihn sein fliederfarbener Hintergrund aus.
Tag Liste
Tags brechen automatisch um, wenn nicht alle in einer Zeile Platz haben.
Tag Liste mit Scrollbalken
Tags brechen nicht um, wenn nicht alle in einer Zeile Platz haben.