Custom CSS: Unterstützte HTML-Klassen und ID-Struktur

Dieses Dokument bietet eine Übersicht über die HTML-Struktur von Concorde, um die gezielte Anwendung von Custom CSS-Selektoren zu erleichtern.

Alle relevanten CSS-Klassen und -IDs sind mit dem Präfix Concorde- versehen, damit sie eindeutig erkennbar und leicht auffindbar sind.

Um die CSS-Klassen benutzen zu können müssen die Klassen immer so geschrieben werden: 

.Concorde-HIER_DIE_KLASSE{
  --concorde-HIER_UNTERKLASSE
  }

z.B

.Concorde-AvailabilityCheck-Block {
  --concorde-menu-bg-color: white;
  --concorde-menu-item-hover-bg-color: white;
  --concorde-menu-item-selected-bg-color: lightskyblue;
}

Concorde-Komponenten: HTML-Klassen

Die folgenden Klassen werden dauerhaft für Concorde-Komponenten gewartet und gepflegt:

Concorde-Autocomplete

Concorde-Badge

Concorde-BlockHeading

Concorde-Button

Concorde-Button__Primary

Concorde-Button__Ghost

Concorde-Button__Outlined

Concorde-Checkbox

Concorde-Chip

Concorde-CircularProgress

Concorde-Card

Concorde-DatePicker

Concorde-Divider

Concorde-DottedLine

Concorde-DropdownX

Concorde-ExpandIcon

Concorde-IbanInput

Concorde-Icon

Concorde-IconButton

Concorde-Image

Concorde-ImageStepper

Concorde-Input

Concorde-LinearProgress

Concorde-Link

Concorde-List

Concorde-ListItem

Concorde-Menu

Concorde-MenuItem

Concorde-MobileStepper

Concorde-Modal

Concorde-PopoverContent

Concorde-Radio

Concorde-RadioGroup

Concorde-Rating

Concorde-Reveal

Concorde-Skeleton

Concorde-Spacing

Concorde-StepperInput

Concorde-SwipeableDrawer

Concorde-Switch

Concorde-Textarea

Concorde-TextField

Concorde-ToggleButton

Concorde-ToggleGroup

Concorde-Tooltip

Concorde-Typography

Concorde-UploadZone

Concorde-Blöcke: Gepflegte HTML-Klassen

Diese Klassen werden für spezifische Blöcke innerhalb von Journeys gepflegt:

Concorde-Account-Block

Concorde-ActionBar-Block

Concorde-Address-Block

Concorde-App-Block

Concorde-AvailabilityCheck-Block

Concorde-BinaryInput-Block

Concorde-Consents-Block

Concorde-Contact-Block

Concorde-Date-Block

Concorde-DigitalSignature-Block

Concorde-HyperlinkButton-Block

Concorde-Image-Block

Concorde-InputCalculator-Block

Concorde-JourneyLauncher-Block

Concorde-LoginRegistration-Block

Concorde-MeterReading-Block

Concorde-MultipleChoice-Block

Concorde-MultipleChoice-Button-Block

Concorde-MultipleChoice-Checkbox-Block

Concorde-MultipleChoice-Image-Block

Concorde-NumberInput-Block

Concorde-Paragraph-Block

Concorde-PaymentMethod-Block

Concorde-PdfUserInputSummary-Block

Concorde-PersonalInformation-Block

Concorde-PreviousProvider-Block

Concorde-Products-Block

Concorde-ProductTile

Concorde-ProductTile__Featured

Concorde-ProductCategories-Block

Concorde-PVRooftopNavigator-Block

Concorde-SingleChoice-Block

Concorde-SingleChoice-Button-Block

Concorde-SingleChoice-Dropdown-Block

Concorde-SingleChoice-Image-Block

Concorde-SingleChoice-Radio-Block

Concorde-ShoppingCart-Block

Concorde-SuccessConfirmation-Block

Concorde-TextInput-Block

Concorde-Upload-Block

Concorde-UserInputSummary-Block

Concorde-Steps: Gepflegte HTML-Klassen

Diese Klasse wird für Schritte (Steps) innerhalb von Journeys gepflegt:

Concorde-Step

Concorde-Layout: Gepflegte HTML-Klassen

Diese Klassen werden im Rahmen des Seitenlayouts verwendet:

Concorde-Topbar

Concorde-Layout-Container

Concorde-Layout-Header

Concorde-Layout-Content

Concorde-Group-Layout

HTML-IDs für Blöcke und Schritte

Die IDs für Blöcke und Schritte sind automatisch generiert, aber innerhalb einer Session konsistent.

Wenn ein Block oder ein Schritt gelöscht wird, wird auch dessen ID aus dem DOM entfernt.

ID-Formate:

Block-ID: Concorde-Block---123456789100

Step-ID: Concorde-Step---123456789100

Beispielhafte HTML-Struktur

<div class="Concorde-Step" id="Concorde-Step---a1d9b0de98ac">
  <div class="Concorde-Topbar">
    ...
  </div>
  <div class="Concorde-Layout-Container">
    <div class="Concorde-Layout-Header">
      ...
    </div>
    <div class="Concorde-Layout-Content">
      ...
      <div class="Concorde-TextInput-Block" id="Concorde-Block---e982566808ed">
       ...
      </div>
      <div class="Concorde-NumberInput-Block" id="Concorde-Block---fec2535864ed">
       ...
      </div>
      ...
  </div>
</div>

Weitere Infos

Zur Übersicht der verfügbaren Design Tokens (CSS-Variablen):

Übersicht CSS-Variablen