-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathquote-sustainable.html
78 lines (78 loc) · 26.1 KB
/
quote-sustainable.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html><html lang="de"><head><title>Quote-Sustainable | Designsystem der Stadtwerke Münster</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="title" content="Quote-SustainableDesignsystem"><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="index,follow"><meta name="author" content="Autor"><meta name="publisher" content="Publizist"><meta property="og:site_name" content="Designsystem der Stadtwerke Münster"><meta property="og:url" content="https://swmue.brandsites.dequote-sustainable.html"><meta property="og:title" content="Quote-Sustainable"><meta property="og:description" content=""><meta property="og:image" content="https://swmue.brandsites.deassets/picts/default.png"><meta property="og:locale" content="de_DE"><meta property="og:language" content="de"><link rel="apple-touch-icon" sizes="180x180" href="assets/fav/apple-touch-icon.png?v=1637680488962"><link rel="icon" type="image/png" sizes="32x32" href="assets/fav/favicon-32x32.png?v=1637680488962"><link rel="icon" type="image/png" sizes="16x16" href="assets/fav/favicon-16x16.png?v=1637680488962"><link rel="manifest" href="assets/fav/site.webmanifest?v=1637680488962"><link rel="shortcut icon" href="assets/fav/favicon.ico?v=1637680488962"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-TileImage" content="assets/fav/mstile-144x144.png?v=1637680488962"><meta name="msapplication-config" content="assets/fav/browserconfig.xml?v=1637680488962"><meta name="theme-color" content="#ffffff"><link rel="stylesheet" href="assets/css/app.bundle-sustainable.css"><link rel="stylesheet" href="assets/css/ide-editmode.css"><script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="a2857e8c-8bbc-45fa-baf6-0d0986cb44f6" type="text/javascript" async></script><script>
let bots = new RegExp('/bot|slurp|crawler|spider|crawling/i');
if (!bots.test(navigator.userAgent)) {
let css = '[data-animate]{opacity:0;}';
let style = document.createElement('style');
document.head.appendChild(style);
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
}
</script><script>if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) document.write('<script>document.createElement("picture");<\/script><script src="/assets/js/picturefill.min.js" async><\/script>');</script></head><body><header></header><main><div class="c-section"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-component-header"><div class="c-component-header__action-wrapper"><div class="c-component-header__cta-wrapper"> <a class="c-cta c-cta--small" href="quote.html"><span class="c-cta__text">Main</span></a> <a class="c-cta c-cta--small is-active" href="quote-sustainable.html"><span class="c-cta__text">Sustainable</span></a> <a class="c-cta c-cta--small" href="quote-dynamic.html"><span class="c-cta__text">Dynamic</span></a> <a class="c-cta c-cta--small" href="quote-professional.html"><span class="c-cta__text">Professional</span></a></div></div></div></div></div></div></div><div id="figma" class="c-section"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-8"><div class="c-text c-markdown"><h1>Quote</h1><p>Das Zitat definiert einen Abschnitt, der aus einer anderen Quelle zitiert wird.</p><p>Folgende Klassen können gesetzt werden:</p><ul><li><code>c-quote--smaller</code> - kleinere Darstellung des Inhalts</li><li><code>c-quote--two-column</code> - zweispaltige Darstellung von Text und Bild</li></ul></div></div></div><div class="g-row mt-1"><div class="g-col-12"><div class="c-figma"><iframe class="c-figma__native" data-cookieconsent="marketing" data-src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwLXdixPS3eSOEmOtvxj6Jg%2FSWMS-DDS%3Fnode-id%3D457%253A213" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwLXdixPS3eSOEmOtvxj6Jg%2FSWMS-DDS%3Fnode-id%3D457%253A213" allowfullscreen></iframe><div class="cookieconsent-optout-marketing"><div class="c-message is-info"><div class="c-text"> Bitte <a href="javascript: Cookiebot.renew()">akzeptieren</a> Sie die Marketing-Cookies, um diesen Inhalt anzuzeigen.</div></div></div></div></div></div></div></div><div class="c-section pt-2 pb-1"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-code-block__intro"><div class="c-text"><h3>Default</h3></div></div><div class="c-code-block"><div class="c-code-block__preview"><blockquote class="c-quote"><div class="c-quote__avatar-wrapper"><picture class="c-quote__image"> <img src="assets/picts/avatar.jpg" alt="Tempor incididunt"></picture></div><div class="c-quote__content-wrapper"><div class="c-quote__content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><footer class="c-quote__author"><p>Tempor incididunt, labore et dolore</p></footer></div></blockquote></div><div class="c-code-block__source-wrapper"><div class="c-code-block__source"><pre><code class="hljs html">
<span class="hljs-tag"><<span class="hljs-name">blockquote</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__avatar-wrapper"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">picture</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__image"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/picts/avatar.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Tempor incididunt"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">picture</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__content-wrapper"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__content"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">footer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__author"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Tempor incididunt, labore et dolore<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">footer</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span>
</code></pre></div> <button class="c-code-block__copy-code-button"> <span class="label">Copy</span> <span class="error">Failed to copy</span> <span class="success">Copied</span></button></div><div class="c-code-block__buttons"> <button type="button" class="c-code-block__button c-code-block__toggle">Source<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></button></div></div></div></div></div></div><div class="c-section p-1"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-code-block__intro"><div class="c-text"><h3>Small</h3></div></div><div class="c-code-block"><div class="c-code-block__preview"><blockquote class="c-quote c-quote--smaller"><div class="c-quote__avatar-wrapper"><picture class="c-quote__image"> <img src="assets/picts/avatar.jpg" alt="Tempor incididunt"></picture></div><div class="c-quote__content-wrapper"><div class="c-quote__content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><footer class="c-quote__author"><p>Tempor incididunt, labore et dolore</p></footer></div></blockquote></div><div class="c-code-block__source-wrapper"><div class="c-code-block__source"><pre><code class="hljs html">
<span class="hljs-tag"><<span class="hljs-name">blockquote</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote c-quote--smaller"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__avatar-wrapper"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">picture</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__image"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/picts/avatar.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Tempor incididunt"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">picture</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__content-wrapper"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__content"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">footer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__author"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Tempor incididunt, labore et dolore<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">footer</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span>
</code></pre></div> <button class="c-code-block__copy-code-button"> <span class="label">Copy</span> <span class="error">Failed to copy</span> <span class="success">Copied</span></button></div><div class="c-code-block__buttons"> <button type="button" class="c-code-block__button c-code-block__toggle">Source<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></button></div></div></div></div></div></div><div class="c-section p-1"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-code-block__intro"><div class="c-text"><h3>Two Columns</h3></div></div><div class="c-code-block"><div class="c-code-block__preview"><blockquote class="c-quote c-quote--two-column"><div class="c-quote__avatar-wrapper"><picture class="c-quote__image"> <img src="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_1840357.jpg" alt="Tempor incididunt"></picture></div><div class="c-quote__content-wrapper"><div class="c-quote__content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><footer class="c-quote__author"><p>Tempor incididunt, labore et dolore</p></footer></div></blockquote></div><div class="c-code-block__source-wrapper"><div class="c-code-block__source"><pre><code class="hljs html">
<span class="hljs-tag"><<span class="hljs-name">blockquote</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote c-quote--two-column"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__avatar-wrapper"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">picture</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__image"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/picts/Stadtwerke-MS_INNENSTADT_20211027_1840357.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Tempor incididunt"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">picture</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__content-wrapper"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__content"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">footer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__author"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Tempor incididunt, labore et dolore<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">footer</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span>
</code></pre></div> <button class="c-code-block__copy-code-button"> <span class="label">Copy</span> <span class="error">Failed to copy</span> <span class="success">Copied</span></button></div><div class="c-code-block__buttons"> <button type="button" class="c-code-block__button c-code-block__toggle">Source<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></button></div></div></div></div></div></div><div class="c-section pt-1 pb-3"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-code-block__intro"><div class="c-text"><h3>Two Columns Small</h3></div></div><div class="c-code-block"><div class="c-code-block__preview"><blockquote class="c-quote c-quote--two-column c-quote--smaller"><div class="c-quote__avatar-wrapper"><picture class="c-quote__image"> <img src="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_1840357.jpg" alt="Tempor incididunt"></picture></div><div class="c-quote__content-wrapper"><div class="c-quote__content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><footer class="c-quote__author"><p>Tempor incididunt, labore et dolore</p></footer></div></blockquote></div><div class="c-code-block__source-wrapper"><div class="c-code-block__source"><pre><code class="hljs html">
<span class="hljs-tag"><<span class="hljs-name">blockquote</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote c-quote--two-column c-quote--smaller"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__avatar-wrapper"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">picture</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__image"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/picts/Stadtwerke-MS_INNENSTADT_20211027_1840357.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Tempor incididunt"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">picture</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__content-wrapper"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__content"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">footer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"c-quote__author"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Tempor incididunt, labore et dolore<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">footer</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span>
</code></pre></div> <button class="c-code-block__copy-code-button"> <span class="label">Copy</span> <span class="error">Failed to copy</span> <span class="success">Copied</span></button></div><div class="c-code-block__buttons"> <button type="button" class="c-code-block__button c-code-block__toggle">Source<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></button></div></div></div></div></div></div><aside class="sidebar"><nav class="c-side-nav"> <button class="c-side-nav__nav-toggle" id="c-side-nav__toggle"><span class="c-side-nav__toggle-icon"></span></button><div class="c-side-nav__picture-wrapper"><a class="c-side-nav__picture-link" href="/"><div class="c-picture"> <img alt="Logo" src="assets/img/logo.svg"> <span class="c-badge" style="
position: absolute;
left: 101px;
bottom: -10px;
">v1.0.0</span></div></a><div class="c-cta-group"> <a class="c-cta" href="https://github.com/wirDesign-communication-AG/stadtwerke-muenster-design-system" target="_blank"><span class="c-cta__text">GitHub</span></a> <a class="c-cta" href="https://www.figma.com/file/wLXdixPS3eSOEmOtvxj6Jg/SWMS-?node-id=0%3A1" target="_blank"><span class="c-cta__text">Figma</span></a></div><div class="c-cta-group c-filter"><span class="c-input-wrapper " data-action="wrapper"><div class="c-input__container"> <input autofocus class="c-input c-filter__input" type="search" name="input" id="input" aria-label="Componentenfilter. Bitte Text eintragen." placeholder="Filter Components..."></div></span></div></div><div class="c-side-nav__nav-wrapper"><ul><li><p>Introduction</p><ul><li> <a class="" href="index.html" title="Overview">Overview</a></li><li> <a class="" href="getting-started.html" title="Getting Started">Getting Started</a></li><li> <a class="" href="accessibility.html" title="Accessibility">Accessibility</a></li><li> <a class="" href="principles.html" title="Principles">Principles</a></li><li> <a class="" href="theming.html" title="Theming">Theming</a></li></ul></li><li><p>Basics</p><ul><li> <a class="" href="animation.html" title="Animation">Animation</a></li><li> <a class="" href="colors-sustainable.html" title="Colors">Colors</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/colors-sustainable.html#intro" data-anchor="intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/colors-sustainable.html#color-primary" data-anchor="color-primary" title="Primary">Primary</a></li><li> <a class="c-side-nav__section-link" href="/colors-sustainable.html#color-secondary" data-anchor="color-secondary" title="Secondary">Secondary</a></li><li> <a class="c-side-nav__section-link" href="/colors-sustainable.html#color-tertiary" data-anchor="color-tertiary" title="Tertiary">Tertiary</a></li><li> <a class="c-side-nav__section-link" href="/colors-sustainable.html#color-special" data-anchor="color-special" title="Special">Special</a></li><li> <a class="c-side-nav__section-link" href="/colors-sustainable.html#color-backgrounds" data-anchor="color-backgrounds" title="Backgrounds">Backgrounds</a></li></ul></li><li> <a class="" href="graphics.html" title="Graphics">Graphics</a></li><li> <a class="" href="layout.html" title="Layout">Layout</a></li><li> <a class="" href="icons.html" title="Icons">Icons</a></li><li> <a class="" href="logo.html" title="Logo">Logo</a></li><li> <a class="" href="spacing.html" title="Spacing">Spacing</a></li><li> <a class="" href="typography.html" title="Typography">Typography</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/typography.html#typo-intro" data-anchor="typo-intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-headlines" data-anchor="typo-headlines" title="Headline">Headline</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-text" data-anchor="typo-text" title="Text">Text</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-quote" data-anchor="typo-quote" title="Quote">Quote</a></li></ul></li></ul></li><li><p>Form-Elements</p><ul><li> <a class="" href="checkbox.html" title="Checkbox">Checkbox</a></li><li> <a class="" href="date-picker.html" title="Date-Picker">Date-Picker</a></li><li> <a class="" href="dropdown.html" title="Dropdown">Dropdown</a></li><li> <a class="" href="file-upload.html" title="File-Upload">File-Upload</a></li><li> <a class="" href="form.html" title="Form">Form</a></li><li> <a class="" href="input.html" title="Input">Input</a></li><li> <a class="" href="radio-button.html" title="Radio-Button">Radio-Button</a></li><li> <a class="" href="switch.html" title="Switch">Switch</a></li><li> <a class="" href="toggle-button.html" title="Toggle-Button">Toggle-Button</a></li><li> <a class="" href="tooltip.html" title="Tooltip">Tooltip</a></li></ul></li><li><p>Basic Components</p><ul><li> <a class="" href="badge.html" title="Badge">Badge</a></li><li> <a class="" href="button-sustainable.html" title="Button">Button</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/button-sustainable.html#intro" data-anchor="intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/button-sustainable.html#standard" data-anchor="standard" title="Variationen">Variationen</a></li><li> <a class="c-side-nav__section-link" href="/button-sustainable.html#cta-group" data-anchor="cta-group" title="Gruppe">Gruppe</a></li></ul></li><li> <a class="" href="chips-sustainable.html" title="Chips">Chips</a></li><li> <a class="" href="image.html" title="Image">Image</a></li><li> <a class="" href="loader.html" title="Loader">Loader</a></li><li> <a class="" href="lottie-animation.html" title="Lottie-Animation">Lottie-Animation</a></li><li> <a class="" href="messages.html" title="Messages">Messages</a></li><li> <a class="is-active" href="quote-sustainable.html" title="Quote">Quote</a></li><li> <a class="" href="text.html" title="Text">Text</a></li><li> <a class="" href="video.html" title="Video">Video</a></li></ul></li><li><p>Modules</p><ul><li> <a class="" href="accordion.html" title="Accordion">Accordion</a></li><li> <a class="" href="card-sustainable.html" title="Card">Card</a></li><li> <a class="" href="carousel.html" title="Carousel">Carousel</a></li><li> <a class="" href="hero-sustainable.html" title="Hero">Hero</a></li><li> <a class="" href="hero-carousel.html" title="Hero-Carousel">Hero-Carousel</a></li><li> <a class="" href="navigation.html" title="Navigation">Navigation</a></li><li> <a class="" href="tabs.html" title="Tabs">Tabs</a></li><li> <a class="" href="text-picture.html" title="Text-Picture">Text-Picture</a></li></ul></li></ul></div></nav></aside></main><footer><div class="c-footer p-1"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-footer__nav-wrapper"><nav class="c-footer__nav"><ul class="c-footer__nav-list"><li class="c-footer__nav-list-item"> <a href="impressum.html" title="Impressum">Impressum</a></li><li class="c-footer__nav-list-item"> <a href="datenschutz.html" title="Datenschutz">Datenschutz</a></li></ul></nav></div></div></div></div></div></footer><script src='assets/js/app.js'></script><script src='assets/js/side-nav.js'></script><script src='assets/js/code-block.js'></script></body></html>