3defacto Frontend-System / Styleguide
data-site

Hero-Varianten

Fünf Seitenköpfe in src/templates/heroes/. Alle teilen Marker, Titel, optionalen Lead und CTAs. Breadcrumb außer auf Startseiten. Styles in components/hero.css.

Abdunklung über Medien: drei Rezepte

Eintrag 387. Gilt für jede Schrift auf einem Foto oder Video: Hero Bild und Video, Ablauf auf Foto, Kundenstimmen auf Foto, Zitatband, Bereichstafel, Fotoband. Regel: Unter Schrift liegt mindestens 0,68 Tiefanthrazit (--color-scrim-field), über reinem Weiß rund 5,2:1 für weiße Schrift. Auf Medien steht nur Weiß, kein Silber. Das Rezept folgt der Lage des Textes, nicht dem Bild; die Redaktion stellt nichts ein. Tokens in tokens.css, Prüfung npm run contrast:media, Regeln für Craft und Redaktion in docs/medien-overlays.md. Links jeweils über Weiß (schlimmster Fall), rechts über einem hellen Rendering.

--scrim-side: Text auf einer Seite, breit (Hero ab 64rem, Zitatband)

Text links, das Motiv rechts bleibt frei.

Text links, das Motiv rechts bleibt frei.

--scrim-full: Text über die volle Breite (schmal, Ablauf, Kundenstimmen)

Flächig 0,68, unten 0,84. Text steht überall.

Flächig 0,68, unten 0,84. Text steht überall.

--scrim-foot: Text am Fuß, am Text verankert (Bereichstafel, Bildunterschrift)

0,68 an der Textkante, 0,84 sechs rem tiefer, darüber der Anlauf.

0,68 an der Textkante, 0,84 sechs rem tiefer, darüber der Anlauf.

hero-video

Dachmarken-Startseite. Vollbild-Video, stumm, Poster unter reduced-motion, Play/Pause im Textfluss unter den Aktionen (nur mit Videoquelle). Der Chevron am Fuß erscheint mit hero.scrollTo und springt als echter Anker-Link zur Folgesektion. Auf der Startseite trägt der Hero zusätzlich heroFull und läuft über genau einen Viewport abzüglich Band und Header; im Rahmen unten ist er auf die Grundhöhe gestellt, weil ein Vollbild-Block im Musterrahmen nichts zeigt.

Von der Idee zur laufenden Anlage.
Einfach. Sicher.

3defacto entwickelt, baut und wartet Maschinen und Produktionsanlagen, die sich ohne Rüstaufwand umstellen, modular erweitern und über NEXUS überwachen lassen.

Weiter zum Inhalt Werde Teil des Teams!

hero-image

Bereichsstartseiten, Branchen. Vollbreites Bild mit Overlay, Breadcrumb oben. Modifikator short für Listen- und Übersichtsseiten.

Engineering Design Services

Konstruktion mit eigener Werkhalle dahinter.

Konstrukteure mit Werkstatterfahrung, Fräszentrum und Technikum im eigenen Haus: Wir begleiten Ihr Projekt vom Lastenheft bis zum gefertigten Prototyp.

Weiter zum Inhalt
Sondermaschine von 3defacto in der Endabnahme

Übersicht

Wir kennen Ihre Branche aus eigenen Projekten

Prozessindustrie, Fahrzeugbau, Maschinenbau: Jede Branche hat ihre eigenen Normen, Taktzeiten und Stillstandskosten. Wir bringen diese Erfahrung mit und setzen sie mit eigener Konstruktion, Fertigung und Software um. So sprechen wir vom ersten Gespräch an über Ihre Anforderungen, nicht über Grundlagen.

hero-split

Produkt- und Service-Seiten (NEXUS, Maschinen). Text links, Bild oder Rendering rechts auf Wechselfläche.

3DF NEXUS: Ihr Projekt auf einer Plattform

Projektstände, Zeichnungen, Ersatzteillisten und Tickets an einem Ort.

Screen NEXUS

hero-page

Inhaltsseiten und Listen. Kompakter Kopf ohne Bild, Titel und Vorspann auf der Containerkante.

Meldungen

Hier finden Sie Meldungen aus unseren drei Geschäftsbereichen sowie übergeordnete Neuigkeiten aus dem Unternehmen – kompakt, aktuell und auf einen Blick.

hero-page, mit Bild

Bild 21:9 in Inhaltsbreite (Container: 1184px bei 1440px, ab 1536px 1440px). Beide Bildkanten stehen auf der Textkante von Titel und Vorspann, es gibt keinen Überstand (Eintrag 108). Nicht zu verwechseln mit dem Kasten des Bereichsrouters, der die Textkante um einen Seitenrand überragt, und mit dem breiten Container (104rem) für Raster und Bildstrecken. Beispiel: Über uns.

Über uns

Der Maschinenbauverbund, bei dem Konstruktion, Bau, Vernetzung und Betreuung in einer Hand bleiben.

3defacto besetzt die Lücke zwischen reinem Ingenieurbüro und Großkonzern: mittelständisch, mit eigener Fertigung an zwei Standorten, drei Spezialgebieten und einer eigenen IoT-Plattform.

  • Das Team von 3defacto beim Gruppenfoto zum 25-jährigen Jubiläum vor der Fotowand mit dem Logo 25 Years
    25 Jahre 3defacto: das Team beim Jubiläum.
  • Bildschirm mit der FEM-Simulation einer Baugruppe, im Vordergrund unscharf ein Konstrukteur
    Berechnung: FEM-Simulation einer Baugruppe.
  • Zwei Mitarbeitende von 3defacto besprechen eine technische Zeichnung
    Besprechung an der technischen Zeichnung.
  • Schweißer an einer Schweißkonstruktion in der eigenen Fertigung
    Schweißbau in der eigenen Fertigung.
  • Schaltschrankbau in der Elektroabteilung von 3defacto
    Schaltschrankbau in der Elektroabteilung.
  • Zwei Mitarbeiter von 3defacto im Gespräch in der Montagehalle
    Abstimmung in der Montagehalle.
  • Drei Mitarbeiter von 3defacto vor einer Montageanlage für Großräder
    Vor einer Montageanlage für Großräder.
  • Gebäude des Technikums am Hauptsitz in Mühltal in der Abenddämmerung
    Technikum am Hauptsitz in Mühltal.

hero-page, Musterhintergrund

Übersichtsseiten ohne Foto (pattern: true, Eintrag 91). Tiefanthrazit mit dem Zeichenblatt aus dem Abschluss-CTA (80px-Kachel, Eintrag 106), rechts präsent, zur Textseite hin ausgeblendet. Schließt ein Bild aus.

Aktuelles

Mediathek

Präsentationen, Broschüren, Zertifikate, Pressebilder und Filme zum Herunterladen.

hero-page, Meldung

Meldung im Detail (Eintrag 127, löst hero-article ab): derselbe Kopf wie Über uns. Rechts auf der Zeile der Bereichs-Tags das Blättern ‹ × › (stream-nav, Eintrag 128), an der Stelle der Eyebrow die Bereichs-Tags der Karte (keine Links), unter dem Titel die Metazeile mit Datum in Tinte und 700 und Lesezeit in Stahl. Bild 21:9 in Inhaltsbreite.

WAM

Neue Radmontagelinie für Werk in Osteuropa in Betrieb

4 Minuten Lesezeit

Zwölf Monate von der Beauftragung bis zur Serienfreigabe. Wie Wheel Assembly Machines, Industrial Plant Solutions und Engineering Design Services ein Projekt im Verbund gestemmt haben.

Radmontagelinie in der ProduktionshalleMit KI erzeugt