Brand Mark Hilfsfunktionen

The brand_mark component renders a logo combined with a two-tone wordmark. Use it when an application needs a recognizable brand identity.

WCAG AA

Funktionen

  • Two-tone wordmark: Primary and secondary text with different colors.

  • Logo-Integration: Lässt sich mit der Logo-Komponente kombinieren.

  • Position des Logos: Das Logo kann am Anfang oder am Ende platziert werden.

  • Design tokens: Uses Insight UI brand color tokens.

HTML

Verwendung

Die Komponente wird über das brand_mark Tag eingebunden.

{% load insight_tags %} {# Direct use with defaults #} {% brand_mark %} {# Deployment-lane variant #} {% brand_mark primary_text="Alpin Insight" secondary_text="Develop" variant="develop" %} {# Navbar brand mode #} {% navbar config=navbar_config %}

Parameter

Laden…

config (BrandMarkConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
primary_text str

Erster Teil der Wortmarke (Primäre Textfarbe).

 "" False
secondary_text str

Zweiter Teil der Wortmarke (Primärfarbe).

 "" False
logo

Logo-Konfiguration.

 None False
logo_position InlinePosition
InlinePosition

Inline positions respecting text direction (RTL-aware).

start end
Typen Dokumentation →

Position des Logos: entweder „Start“ oder „Ende“.

 start False
css_class str

Optionale CSS-Klassen für das Hauptelement.

 "" False
BrandMarkConfig( primary_text="Insight", secondary_text="UI", logo=LogoConfig( url="img/logo.svg", url_dark="img/logo-dark.svg", alt="Company Logo", height="2rem", ), )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Die Wortmarke wird als lesbarer Text dargestellt, damit assistive Technologien den Markennamen ansagen können.

  • Das Logo/Icon wird mithilfe von aria-hidden='true' für assistiven Technologien ausgeblendet.

  • Bei Verwendung innerhalb der Navigationsleiste sollte brand.aria_label oder brand.mark.primary_text angegeben werden, damit der zugehörige Link einen eindeutigen, barrierefreien Namen erhält.

Verwandte Themen