Surface Layout

The surface block tag creates a styled container with background, border, and optional shadow. Use it to visually group content within a consistent design language.

Wenn href angegeben wird, wird die Fläche anklickbar und als <a>-Element mit Hover-Effekten dargestellt. Dadurch eignet sie sich ideal für Navigationskarten, Funktionslinks oder beliebige anklickbare Inhaltsblöcke.

Neu
Block Tag

Funktionen

  • variant: Visual style - surface (light background), raised (with shadow), or outline (border only).

  • padding: Innerer Abstand mithilfe der Abstandsskala (xs/s/m/l/xl).

  • radius: Größen der Rundungen der Ecken aus dem Designsystem (xs/s/m/l/xl/none).

  • href: Wenn dieser Wert festgelegt ist, wird das Element als <a> mit Hover-Effekten und der Klasse group für die Gestaltung der untergeordneten Elemente dargestellt.

  • extern: Öffnet den Link in einem neuen Tab mit den entsprechenden rel-Attributen (nur wenn href angegeben ist).

Verwendung

Die Komponente wird über das surface Tag eingebunden.

{% load layout_tags %} <!-- Static container (renders as <div>) --> {% surface variant="surface" padding="l" %} <h3>Card Title</h3> <p>This is a basic surface container.</p> {% endsurface %} <!-- Raised variant with shadow --> {% surface variant="raised" padding="m" radius="l" %} <h4>Elevated Content</h4> <p>Content with visual prominence.</p> {% endsurface %} <!-- Outline variant (border only) --> {% surface variant="outline" padding="s" %} <span>Minimal container</span> {% endsurface %} <!-- Clickable surface (renders as <a>) --> {% surface href="/components" padding="m" %} {% hbox gap="s" v_align="center" %} <span class="group-hover:text-insight-primary">Browse Components</span> {% endhbox %} {% endsurface %} <!-- External link with new tab --> {% surface href="https://github.com/example/repo" external=True padding="m" %} <span>View on GitHub</span> {% endsurface %}

Parameter

Laden…

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

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
variant str

Darstellungsstil (surface|raised|outline).

 "surface" False
padding str

Größe des inneren Seitenabstands (xs|s|m|l|xl).

 "m" False
radius str

Größe der Rundungen der Ecken (xs|s|m|l|xl).

 "m" False
id str

Das HTML-Attribut „id“ für Ankerlinks und JavaScript-Targeting.

 "" False
href str

URL für eine anklickbare Fläche (wird als statt als

"" False
external bool

Link in einem neuen Tab öffnen (nur wenn „href“ angegeben ist).

 False False
{% load layout_tags %} {# Static container #} {% surface variant="raised" padding="l" %} <h3>Card Title</h3> <p>Content here</p> {% endsurface %} {# Clickable surface (renders as <a>) #} {% surface href="/components" padding="m" %} <span class="group-hover:text-insight-primary">Browse Components</span> {% endsurface %} {# External link #} {% surface href="https://example.com" external=True %} External Resource {% endsurface %}

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Statische Oberflächen (<div>) dienen der Darstellung und haben keine semantische Bedeutung.

  • Klickbare Flächen (<a>) sind über die Tasten „Tab“ und „Enter“ vollständig per Tastatur bedienbar.

  • When used as a link, ensure the surface contains descriptive text or an aria-label.

  • Die Utility-Klassen group-hover: bieten visuelles Feedback beim Überfahren mit der Maus für anklickbare Flächen.

Offene Punkte

  • Klickbaren Surfaces fehlen focus-visible:ring Styles für die Tastaturfokus-Anzeige.

Verwandte Themen