90 lines
4.7 KiB
HTML
90 lines
4.7 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 Components</title>
|
||
<link rel="stylesheet" href="../styleguide.css">
|
||
</head>
|
||
<body class="sg-page-public-page-components">
|
||
|
||
<h1 class="sg-main-heading">Components – Public Page Components</h1>
|
||
|
||
<div class="sg-page-layout-public__content-mirror">
|
||
<section id="component-content-group-box">
|
||
<p class="sg-preview-label">Component: Content Group Box</p>
|
||
|
||
<div class="sg-preview-area">
|
||
<div class="sg-content-group-box" data-component="content-group-box"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="component-text-block">
|
||
<p class="sg-preview-label">Component: Public Page Content left</p>
|
||
|
||
<div class="sg-preview-area">
|
||
<div class="sg-text-block" data-component="text-block">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="component-call-to-action-card">
|
||
<p class="sg-preview-label">Component: Call to action Card</p>
|
||
|
||
<div class="sg-preview-area">
|
||
<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>
|
||
</section>
|
||
|
||
<section id="component-call-to-action-card-three-column">
|
||
<p class="sg-preview-label">Component: Call to action Card – Drei-Spalten-Variante</p>
|
||
|
||
<div class="sg-preview-area">
|
||
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-card--call-to-action-card--three-column" data-component="call-to-action-card" data-component-variant="three-column" aria-label="Call to action Card Drei-Spalten-Variante">
|
||
<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">Mit dem Newsletter immer über neue Inhalte informiert bleiben.</p>
|
||
<div class="sg-labeled-input-row" data-component="single-line-input" data-component-state="inactive-selectable">
|
||
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="email" placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse" required>
|
||
</div>
|
||
<div class="sg-call-to-action-card__action">
|
||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" data-component="button" data-component-variant="process" data-component-state="inactive" disabled aria-disabled="true">Prozess Button</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="component-picture-full-width">
|
||
<p class="sg-preview-label">Component: Picture Full Width</p>
|
||
|
||
<div class="sg-preview-area">
|
||
<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>
|
||
</section>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|