68 lines
3.2 KiB
HTML
68 lines
3.2 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 – Layout VSF List Card</title>
|
||
<link rel="stylesheet" href="../styleguide.css">
|
||
</head>
|
||
<body>
|
||
|
||
<h1 class="sg-main-heading">Layout – VSF List Card</h1>
|
||
|
||
<section id="layout-vsf-list-card">
|
||
<p class="sg-preview-label">Layout: VSF List Card</p>
|
||
<p class="sg-body">Diese Layout-Seite zeigt VSF-spezifische Statusvarianten der List Card als Grundlage fuer weitere Ausdifferenzierungen.</p>
|
||
|
||
<h2 class="sg-sub-heading sg-section-h2">Status: Default</h2>
|
||
<div class="sg-object-card-grid" aria-label="VSF List Card Status Default">
|
||
<article class="sg-card sg-object-card" data-pattern="company-card" aria-label="VSF List Card Default">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
|
||
<div class="sg-strong">Alphabet Inc.</div>
|
||
</header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey">
|
||
<p class="sg-body">Status-Referenz: Default</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<h2 class="sg-sub-heading sg-section-h2">Status: Hover</h2>
|
||
<div class="sg-object-card-grid" aria-label="VSF List Card Status Hover">
|
||
<article class="sg-card sg-object-card" data-pattern="company-card" data-component-state="hover" aria-label="VSF List Card Hover">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
|
||
<div class="sg-strong">Microsoft Corp.</div>
|
||
</header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey">
|
||
<p class="sg-body">Status-Referenz: Hover</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<h2 class="sg-sub-heading sg-section-h2">Status: Selected</h2>
|
||
<div class="sg-object-card-grid" aria-label="VSF List Card Status Selected">
|
||
<article class="sg-card sg-object-card" data-pattern="company-card" data-component-state="selected" aria-label="VSF List Card Selected">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
|
||
<div class="sg-strong">Amazon.com, Inc.</div>
|
||
</header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey">
|
||
<p class="sg-body">Status-Referenz: Selected</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<h2 class="sg-sub-heading sg-section-h2">Status: Disabled</h2>
|
||
<div class="sg-object-card-grid" aria-label="VSF List Card Status Disabled">
|
||
<article class="sg-card sg-object-card" data-pattern="company-card" data-component-state="disabled" aria-label="VSF List Card Disabled" aria-disabled="true">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
|
||
<div class="sg-strong">Tesla, Inc.</div>
|
||
</header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey">
|
||
<p class="sg-body">Status-Referenz: Disabled</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
</body>
|
||
</html>
|