260 lines
16 KiB
HTML
260 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Styleguide – Public Page Patterns</title>
|
||
<link rel="stylesheet" href="../styleguide.css">
|
||
</head>
|
||
<body class="sg-page-public-page-patterns">
|
||
|
||
<h1 class="sg-main-heading">Patterns – Public Page Patterns</h1>
|
||
|
||
<div class="sg-page-layout-public__content-mirror">
|
||
<section id="public-page-patterns">
|
||
<p class="sg-preview-label">pattern: Public Page Content left</p>
|
||
|
||
<div class="sg-preview-area">
|
||
<div class="sg-content-group-box" data-component="content-group-box">
|
||
<div class="sg-text-block" data-component="text-block">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="sg-preview-label">pattern: Public Page Content right</p>
|
||
|
||
<div class="sg-preview-area">
|
||
<div class="sg-content-group-box" data-component="content-group-box">
|
||
<div class="sg-text-block sg-text-block--align-right" data-component="text-block">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="sg-preview-label">Pattern: text and picture right</p>
|
||
|
||
<div class="sg-preview-area">
|
||
<div class="sg-content-group-box" data-component="content-group-box">
|
||
<div class="sg-public-page-pattern-text-and-picture-right" data-pattern="text-and-picture-right">
|
||
<h2 class="sg-heading-h2">H2 Überschrift</h2>
|
||
|
||
<div class="sg-public-page-pattern-text-and-picture-right__text">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
|
||
</p>
|
||
</div>
|
||
|
||
<img
|
||
class="sg-picture-full-width"
|
||
data-component="picture-full-width"
|
||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXJ5PSIyNCAxNiIgb3BhY2l0eT0iMC41NSIvPjx0ZXh0IHg9IjgwMCIgeT0iNDUwIiBmaWxsPSIjZjNmNGY2IiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI1MiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UGljdHVyZSBmdWxsIHdpZHRoPC90ZXh0Pjwvc3ZnPg=="
|
||
alt="Platzhalterbild für die Picture Full Width Component"
|
||
width="1600"
|
||
height="900"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="sg-preview-label">Pattern: text and picture fullwidth</p>
|
||
|
||
<div class="sg-preview-area">
|
||
<div class="sg-content-group-box" data-component="content-group-box">
|
||
<div class="sg-public-page-pattern-text-and-picture-fullwidth" data-pattern="text-and-picture-fullwidth">
|
||
<h2 class="sg-heading-h2">H2 Überschrift</h2>
|
||
|
||
<img
|
||
class="sg-picture-full-width"
|
||
data-component="picture-full-width"
|
||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXJ5PSIyNCAxNiIgb3BhY2l0eT0iMC41NSIvPjx0ZXh0IHg9IjgwMCIgeT0iNDUwIiBmaWxsPSIjZjNmNGY2IiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI1MiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UGljdHVyZSBmdWxsIHdpZHRoPC90ZXh0Pjwvc3ZnPg=="
|
||
alt="Platzhalterbild für die Picture Full Width Component"
|
||
width="1600"
|
||
height="900"
|
||
>
|
||
|
||
<div class="sg-public-page-pattern-text-and-picture-fullwidth__text">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="sg-preview-label">Pattern: text and picture left</p>
|
||
|
||
<div class="sg-preview-area">
|
||
<div class="sg-content-group-box" data-component="content-group-box">
|
||
<div class="sg-public-page-pattern-text-and-picture-left" data-pattern="text-and-picture-left">
|
||
<h2 class="sg-heading-h2">H2 Überschrift</h2>
|
||
|
||
<img
|
||
class="sg-picture-full-width"
|
||
data-component="picture-full-width"
|
||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXJ5PSIyNCAxNiIgb3BhY2l0eT0iMC41NSIvPjx0ZXh0IHg9IjgwMCIgeT0iNDUwIiBmaWxsPSIjZjNmNGY2IiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI1MiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UGljdHVyZSBmdWxsIHdpZHRoPC90ZXh0Pjwvc3ZnPg=="
|
||
alt="Platzhalterbild für die Picture Full Width Component"
|
||
width="1600"
|
||
height="900"
|
||
>
|
||
|
||
<div class="sg-public-page-pattern-text-and-picture-left__text">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</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">
|
||
<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" 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--cta" type="button" data-component="button" data-component-variant="cta">
|
||
Call-to-action-Button
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="sg-preview-label">pattern: CTA 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--cta" type="button" data-component="button" data-component-variant="cta">
|
||
Call-to-action-Button
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</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: Public Call to Action Box</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-public-page-pattern-call-to-action-box" data-pattern="public-call-to-action-box" aria-label="Public Call to Action Box">
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<ul class="sg-bullet-list">
|
||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</li>
|
||
<li>Lorem ipsum dolor sit amet, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</li>
|
||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod ut labore et dolore.</li>
|
||
<li>Lorem ipsum dolor sit amet, reprehenderit in voluptate velit esse cillum dolore eu fugiat.</li>
|
||
<li>Lorem ipsum dolor sit amet, cupidatat non proident, sunt in culpa qui officia deserunt mollit.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body sg-public-page-pattern-call-to-action-box__action" data-component-part="card-action">
|
||
<button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
|
||
Call-to-action-Button
|
||
</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="sg-preview-label">pattern: Public Call to Action Box light</p>
|
||
|
||
<div class="sg-preview-area">
|
||
<div class="sg-content-group-box sg-public-page-pattern-call-to-action-box--light" data-component="content-group-box">
|
||
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-public-page-pattern-call-to-action-box" data-pattern="public-call-to-action-box-light" aria-label="Public Call to Action Box light">
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<ul class="sg-bullet-list">
|
||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</li>
|
||
<li>Lorem ipsum dolor sit amet, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</li>
|
||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod ut labore et dolore.</li>
|
||
<li>Lorem ipsum dolor sit amet, reprehenderit in voluptate velit esse cillum dolore eu fugiat.</li>
|
||
<li>Lorem ipsum dolor sit amet, cupidatat non proident, sunt in culpa qui officia deserunt mollit.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body sg-public-page-pattern-call-to-action-box__action" data-component-part="card-action">
|
||
<button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
|
||
Call-to-action-Button
|
||
</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="sg-preview-label">pattern: picture full width</p>
|
||
|
||
<div class="sg-preview-area">
|
||
<div class="sg-content-group-box" data-component="content-group-box">
|
||
<img
|
||
class="sg-picture-full-width"
|
||
data-component="picture-full-width"
|
||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE2MDAgOTAwIj48cmVjdCB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMyZjM0NDAiLz48cmVjdCB4PSI2NCIgeT0iNjQiIHdpZHRoPSIxNDcyIiBoZWlnaHQ9Ijc3MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjNmNGY2IiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1kYXNoYXJyYXk9IjI0IDE2IiBvcGFjaXR5PSIwLjU1Ii8+PHRleHQgeD0iODAwIiB5PSI0NTAiIGZpbGw9IiNmM2Y0ZjYiIGZvbnQtZmFtaWx5PSJBcmlhbCwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjUyIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5QaWN0dXJlIGZ1bGwgd2lkdGg8L3RleHQ+PC9zdmc+"
|
||
alt="Platzhalterbild für die Picture Full Width Component"
|
||
width="1600"
|
||
height="900"
|
||
>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|