Files
Styleguide/components/cards-public-page.html
T

51 lines
1.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide Cards Public Page</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body class="sg-page-cards-public-page">
<h1 class="sg-main-heading">Components Cards Public Page</h1>
<main aria-label="Cards Public Page">
<section id="component-content-wrapper-card">
<p class="sg-preview-label">Component: Content Wrapper Card</p>
<div class="sg-transparent-card" data-component="transparent-card">
<p class="sg-body">
Content Wrapper Card als Transparent Card ohne horizontale Außenabstände und mit vertikalem Abstand gemäss spacing-large.
</p>
</div>
</section>
<section id="component-cta-right">
<p class="sg-preview-label">Component: CTA Right</p>
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-cards-public-page__cta-right-card" data-component="content-card" aria-label="CTA Right">
<div class="sg-card-segment sg-card-segment--body sg-cards-public-page__cta-right-body">
<div class="sg-cards-public-page__cta-right-grid">
<div class="sg-cards-public-page__cta-right-copy">
<p class="sg-body">
Ein Satz Text als CTA-Hinweis.
</p>
</div>
<div class="sg-cards-public-page__cta-right-buttons" data-component="link-buttons">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
Link-Button
</button>
</div>
</div>
</div>
</article>
</section>
</main>
</body>
</html>