Hier findest du ein paar Anwendungsbeispiele für Custom-CSS

Header mit Farbverlauf erstellen

.Concorde-Topbar {
  background: linear-gradient(0.70turn, #dcf7ff 5%, #ccdaff 40%, #dadbff 55%);

Höhe der Header anpassen

    img {
    margin-bottom: 20px;
    max-height: 30px;
    margin-top: 20px;
    padding-right: 20px;
    margin-right: max( calc((100% - 1256px - (2*16px)) / 2), 0px);

    @media (max-width:936px) {
      margin-right: max( calc((100% - 936px - (2*16px)) / 2); 0px);
    }
  }

Farbverlauf zur Aktion-Buttons hinzufügen (Hover, Aktiv, Fokus)

.Concorde-ActionBar-Block {
  .Concorde-Button__Primary {
    color: #FFFFF;
    background: linear-gradient(0deg, #4f4ffc, #4f4ffc, #4f4ffc);
    
    &:focus {
      background-size: 100% 100%;
      background-position: center;
      color: #4f4ffc;
      background: linear-gradient(0.70turn, #dcf7ff 5%, #ccdaff 40%, #dadbff 55%);
    }
         
    &:hover {
      color: #4f4ffc;
      background: linear-gradient(0.70turn, #dcf7ff 5%, #ccdaff 40%, #dadbff 55%);
      background-size: 200% 200%;
      background-position: bottom;
      transition: background-size 0.4s ease-in-out, background-position 0.4s ease-in-out, color 0.4s ease-in-out;
    }
  
    &:active {
      background-size: 100% 100%;
      background-position: center;
      color: #4f4ffc;
      background:  linear-gradient(0.70turn, #dcf7ff 5%, #ccdaff 40%, #dadbff 55%);
    }
  }
}

Farbverläufe zu Überschriften hinzufügen

h1.Concorde-Typography,
h2.Concorde-Typography {
  background: linear-gradient(90deg, #4f4ffc, #00D7FF);
  -webkit-background-clip: text;
  color: transparent;
}

Ausrichtung des Logos im Header ändern

Dieses Snippet ändert die horizontale Ausrichtung des Logos im Header der Journey:

Links ausrichten

:root {
  --concorde-topbar-logo-alignment: flex-start; /* Links ausrichten */
  }

Zentriert (Standard)

:root {
  --concorde-topbar-logo-alignment: center;     /* Zentriert (Standard) */
}

Rechts ausrichten

:root {
  --concorde-topbar-logo-alignment: flex-end;   /* Rechts ausrichten */
}

 

Header fixieren (Sticky Header)

Das folgende Beispiel sorgt dafür, dass der Header beim Scrollen am oberen Bildschirmrand „kleben“ bleibt:

.Concorde-Topbar {
  position: sticky;
  top: 0;
  z-index: 99999;
}

Alle Buttons anpassen

Dieses Snippet verändert das Aussehen aller Buttons (inkl. IconButtons) mithilfe von Design Tokens:

:root {
  --concorde-button-label-color: var(--concorde-secondary-text);
  --concorde-button-background-color: #fffff;
  --concorde-button-hover-bg-color: #258FF9FF;
}

Nur Primary Buttons anpassen

Mit diesem Snippet werden nur die Primary Buttons (z. B. „Weiter“ oder „Absenden“) über die offizielle CSS-Klasse angepasst:

.Concorde-Button__Primary {
  color: var(--concorde-secondary-text);
  background-color: #258FF9FF;

  &:hover {
    color: #ffffff;
  }
}

Hintergrund des DatePickers ändern

Dieses Beispiel zeigt zwei Varianten, um den Hintergrund des Kalenders im DatePicker zu ändern:

/* Variante 1 – über Design Token */ 

:root {
  --concorde-datepicker-calendar-bg-color: #fffff;
}

/* Variante 2 – direkt über die CSS-Klasse */ 

.Concorde-DatePicker {
  .Concorde-DatePicker__Calendar {
    background-color: gray;
  }
}

Hintergrund des PLZ-Dropdowns im Verfügbarkeitsblock ändern

Dieses Snippet passt nur die Hintergrundfarben der PLZ-Auswahl im Block „Verfügbarkeit prüfen“ an:

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

Textfarbe der Produkt-Features anpassen

Dieses Snippet setzt die Schriftfarbe aller Produkt-Merkmale (z. B. Stichpunkte) auf den Wert des Design Tokens --concorde-secondary-text:

.Concorde-ProductTile__Features p {
  color: var(--concorde-secondary-text);
}

---

Textgrößen erhöhen

Mit dem folgenden Snippet kannst du die Schriftgrößen aller Textelemente in der Journey mithilfe von CSS-Variablen (Design Tokens) vergrößern:

In dem Beispiel nutzen wir: 

:root {
  --concorde-text-xl: 2.5rem;
}

und

:root {
  --concorde-text-xs: 0.875rem;
}

:root {
  --concorde-text-3xl: 2.5rem;
}

:root {
  --concorde-text-2xl: 2rem;
}

:root {
  --concorde-text-xl: 1.875rem;
}

:root {
  --concorde-text-lg: 1.5rem;
}

:root {
  --concorde-text-base: 1.25rem;
}

:root {
  --concorde-text-sm: 1rem;
}

:root {
  --concorde-text-xs: 0.875rem;
}