Sync styleguide 2026.05.18.1
This commit is contained in:
@@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Content Cards Group</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Content Cards Group</h1>
|
||||
<section id="pattern-content-cards-group">
|
||||
<p class="sg-preview-label">Pattern: Content Cards Group</p>
|
||||
|
||||
<div class="sg-preview-area">
|
||||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Gruppe aus Content Cards">
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Content Card 1">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Box 1</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Content Card 2">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Box 2</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Content Card 3">
|
||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||||
<div class="sg-strong">Box 3</div>
|
||||
</div>
|
||||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user