91 lines
5.1 KiB
HTML
91 lines
5.1 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 – Charts</title>
|
||
<link rel="stylesheet" href="../styleguide.css">
|
||
</head>
|
||
<body>
|
||
|
||
<h1 class="sg-main-heading">Components – Charts</h1>
|
||
|
||
<section id="component-score-bar">
|
||
<p class="sg-preview-label">Component: Score-Balken / Median-Marker</p>
|
||
|
||
<div class="sg-form-preview-area sg-chart-preview-area">
|
||
<div class="sg-score-bar-list" data-component="score-bar-list">
|
||
<div class="sg-score-bar-item" data-component="score-bar">
|
||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Äpfel</p>
|
||
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
|
||
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sg-score-bar-item" data-component="score-bar">
|
||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Birnen</p>
|
||
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||
<div class="sg-score-bar__value sg-score-bar__value--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div>
|
||
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sg-score-bar-item" data-component="score-bar">
|
||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Zitronen</p>
|
||
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||
<div class="sg-score-bar__value sg-score-bar__value--negative sg-score-bar__value--w35" data-component-part="score-value" data-component-state="negative"></div>
|
||
<div class="sg-score-bar__median-marker sg-score-bar__median-marker--outline" data-component-part="score-median-marker" data-component-variant="outline"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sg-score-bar-item" data-component="score-bar">
|
||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Kirschen</p>
|
||
<div class="sg-score-bar sg-score-bar--marker-mid sg-score-bar--no-value" role="img" aria-label="Keine Daten" data-component-part="score-track">
|
||
<span class="sg-score-bar__empty-state" data-component-part="score-empty-state">keine Daten</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="pattern-gesamtscore-balken">
|
||
<p class="sg-preview-label">Component: Gesamtscore-Balken</p>
|
||
|
||
<div class="sg-form-preview-area sg-chart-preview-area">
|
||
<div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list">
|
||
<div class="sg-score-bar-item" data-component="score-bar">
|
||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p>
|
||
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
|
||
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
|
||
</div>
|
||
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
|
||
</div>
|
||
|
||
<div class="sg-score-bar-item" data-component="score-bar">
|
||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p>
|
||
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||
<div class="sg-score-bar__value sg-score-bar__value--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="warning"></div>
|
||
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
|
||
</div>
|
||
<p class="sg-bar-label sg-score-state--warning" data-component-part="score-state">abwarten</p>
|
||
</div>
|
||
|
||
<div class="sg-score-bar-item" data-component="score-bar">
|
||
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p>
|
||
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
|
||
<div class="sg-score-bar__value sg-score-bar__value--negative sg-score-bar__value--w35" data-component-part="score-value" data-component-state="negative"></div>
|
||
<div class="sg-score-bar__median-marker sg-score-bar__median-marker--outline" data-component-part="score-median-marker" data-component-variant="outline"></div>
|
||
</div>
|
||
<p class="sg-bar-label sg-score-state--negative" data-component-part="score-state">unattraktiv</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|