Sync styleguide 2026.05.18.1
This commit is contained in:
@@ -36,6 +36,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">pattern: Content Focus Box</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
<div class="sg-content-group-box" data-component="content-group-box">
|
||||
<article class="sg-card" data-component="basic-card">
|
||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig-gestacked" aria-label="Text Layout zweispaltig mobil gestacked">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column sg-text-layout-pattern__two-column--stacked-mobile" data-pattern-part="text-block-two-column-stacked-mobile">
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">pattern: CTA box left</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
@@ -76,6 +97,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">pattern: CTA small button box right</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
<div class="sg-content-group-box" data-component="content-group-box">
|
||||
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-call-to-action-card--align-right" data-component="call-to-action-card" aria-label="Call to action Card">
|
||||
<div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
|
||||
<p class="sg-body sg-call-to-action-card__text">
|
||||
Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
|
||||
</p>
|
||||
|
||||
<div class="sg-call-to-action-card__action">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||
Link-Button aktiv
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">pattern: picture full width</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
|
||||
@@ -6,56 +6,60 @@
|
||||
<title>Styleguide – Pattern Text Layouts</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="sg-page-text-layouts">
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Text Layouts</h1>
|
||||
<section id="pattern-text-layouts">
|
||||
<p class="sg-preview-label">Pattern: Text Layout ganze Breite</p>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-ganze-breite" aria-label="Text Layout ganze Breite">
|
||||
<div class="sg-text-layout-pattern__preview-surface">
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width">
|
||||
Text 100% Breite: Dieser Textblock nimmt die komplette verfügbare Breite des Containers ein und eignet sich für lineare Erklärungen, einleitende Kontexte und Fliesstext ohne Nebenspalte.
|
||||
</p>
|
||||
</div>
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width">
|
||||
Text 100% Breite: Dieser Textblock nimmt die komplette verfügbare Breite des Containers ein und eignet sich für lineare Erklärungen, einleitende Kontexte und Fliesstext ohne Nebenspalte.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">Pattern: Text 60% Breite</p>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-sechzig-prozent" aria-label="Text Layout 60 Prozent Breite">
|
||||
<div class="sg-text-layout-pattern__preview-surface">
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width" data-pattern-part="text-block-sixty-width">
|
||||
Text 60% Breite: Dieser Textblock nutzt sechzig Prozent der Containerbreite und schafft dadurch bewusst mehr Luft für begleitende Inhalte wie Metriken, Visuals oder Kontextinformationen.
|
||||
</p>
|
||||
</div>
|
||||
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width" data-pattern-part="text-block-sixty-width">
|
||||
Text 60% Breite: Dieser Textblock nutzt sechzig Prozent der Containerbreite und schafft dadurch bewusst mehr Luft für begleitende Inhalte wie Metriken, Visuals oder Kontextinformationen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">Pattern: Text zweispaltig (mobil zweispaltig)</p>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig mobil zweispaltig">
|
||||
<div class="sg-text-layout-pattern__preview-surface">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">Pattern: Text zweispaltig (mobil gestacked)</p>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig-gestacked" aria-label="Text Layout zweispaltig mobil gestacked">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column sg-text-layout-pattern__two-column--stacked-mobile" data-pattern-part="text-block-two-column-stacked-mobile">
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column">
|
||||
Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="sg-preview-label">Pattern: Dreispaltig verteilt (mobil dreispaltig)</p>
|
||||
<div class="sg-text-layout-pattern" data-pattern="text-layout-dreispaltig-verteilt" aria-label="Text Layout dreispaltig verteilt mobil dreispaltig">
|
||||
<div class="sg-text-layout-pattern__preview-surface">
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" data-pattern-part="text-block-three-column-distributed">
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
|
||||
Linke Spalte linksbündig: Diese Spalte führt den Inhalt mit einer klaren Startkante und eignet sich für einleitende Aussagen oder Kontext, die direkt in den Lesefluss einsteigen sollen.
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
|
||||
Mittlere Spalte mittelachsig: Diese Spalte zentriert den Text auf der Mittelachse und eignet sich für vergleichende Kernaussagen, die visuell als Schwerpunkt zwischen den Randspalten stehen sollen.
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
|
||||
Rechte Spalte rechtsbündig: Diese Spalte schließt den Abschnitt mit einer klaren Endkante ab und eignet sich für ergänzende Hinweise oder abschließende Perspektiven im gleichen Inhaltsblock.
|
||||
</p>
|
||||
</div>
|
||||
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" data-pattern-part="text-block-three-column-distributed">
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
|
||||
Linke Spalte linksbündig: Diese Spalte führt den Inhalt mit einer klaren Startkante und eignet sich für einleitende Aussagen oder Kontext, die direkt in den Lesefluss einsteigen sollen.
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-center">
|
||||
Mittlere Spalte mittelachsig: Diese Spalte zentriert den Text auf der Mittelachse und eignet sich für vergleichende Kernaussagen, die visuell als Schwerpunkt zwischen den Randspalten stehen sollen.
|
||||
</p>
|
||||
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-right">
|
||||
Rechte Spalte rechtsbündig: Diese Spalte schließt den Abschnitt mit einer klaren Endkante ab und eignet sich für ergänzende Hinweise oder abschließende Perspektiven im gleichen Inhaltsblock.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user