Hero Layout

Die hero Komponente rendert einen auffälligen Bannerbereich für Landingpages. Sie kombiniert einen Titel, einen Untertitel, einen Beschreibungstext und Call-to-Action-Buttons.

WCAG AA

Funktionen

  • Titel und Untertitel: Hauptüberschrift mit optionalem Zusatztext.

  • Beschreibung: Begleitender Text.

  • Call-to-Action-Buttons: Primäre und sekundäre Aktionsschaltflächen.

  • Badge: Optionales Badge zur Hervorhebung von Funktionen oder Ankündigungen.

HTML

Verwendung

Die Komponente wird über das hero Tag eingebunden.

{% load insight_tags %} {% hero config=hero_config %} <!-- or --> {% hero title="Insight UI" subtitle="A Django Component Framework" description="A modern UI library." cta_primary=cta_primary badge=badge %}

Parameter

Laden…

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

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
title str

Titel der Hero-Section.

 "" False
subtitle str

Untertitel der Hero-Section, welche unter dem Titel angezeigt wird.

 "" False
description str

Beschreibung der Hero-Section, welche unter dem Titel und Untertitel angezeigt wird.

 "" False
cta_primary

Primärer 'Call-to-Action'-Button.

 None False
cta_secondary ButtonConfig

Sekundärer 'Call-to-Action'-Button.

 None False
background_image_url str

URL des Hintergrundbildes.

 "" False
badge_config

Eine Plakette mit Icon und Text.

 None False
HeroConfig( title="Welcome to Our Platform", subtitle="The Future of Web Development", description="Build amazing applications with modern tools.", cta_primary=ButtonConfig(label="Get Started", request_url="/signup/", type="primary"), cta_secondary=ButtonConfig(label="Learn More", request_url="/docs/", type="secondary"), badge_config=BadgeConfig(text="New!", icon=IconConfig(name="sparkles")), )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Der Titel wird als semantisches <h1> Element gerendert.

  • CTA-Buttons sind als Link-Elemente mit klarer Beschriftung implementiert.

  • Hintergrundbilder werden mit aria-hidden markiert.

Verwandte Themen