No notes defined.
<!-- Default -->
<div class="dataInset">
<h2 class="dataInset-title">Ich bin der Titel</h2>
<div class="dataInset-items">
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>999.999</span></span> <span class="dataInset-label"><span>Dinge aus einer Gesamtmenge</span></span>
</div>
<div class="dataInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</div>
</div>
<!-- With Intro -->
<div class="dataInset">
<h2 class="dataInset-title">Ich bin der Titel</h2>
<div class="dataInset-intro">
<!-- Achtung: Doppelte Description -->
<div class="richtextBlock">
<h3>I am a heading</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ul>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href="#">skateboard chillwave deep</a>.
<p>
<ol>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ol>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-items">
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>999.999</span></span> <span class="dataInset-label"><span>Dinge aus einer Gesamtmenge</span></span>
</div>
<div class="dataInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</div>
</div>
<!-- With Intro -->
<div class="dataInset has-backdrop">
<h2 class="dataInset-title">Ich bin der Titel</h2>
<div class="dataInset-intro">
<!-- Achtung: Doppelte Description -->
<div class="richtextBlock">
<h3>I am a heading</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ul>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href="#">skateboard chillwave deep</a>.
<p>
<ol>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ol>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-items">
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>999.999</span></span> <span class="dataInset-label"><span>Dinge aus einer Gesamtmenge</span></span>
</div>
<div class="dataInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</div>
</div>
<!-- Boxed -->
<div class="dataInset" data-theme="accent">
<h2 class="dataInset-title">Ich bin der Titel</h2>
<div class="dataInset-items">
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>999.999</span></span> <span class="dataInset-label"><span>Dinge aus einer Gesamtmenge</span></span>
</div>
<div class="dataInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</div>
</div>
<!-- Single Item -->
<div class="dataInset" data-theme="accent">
<h2 class="dataInset-title">Ein einzelner Datensatz</h2>
<div class="dataInset-items">
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
</div>
</div>
<!-- Two Items -->
<div class="dataInset" data-theme="accent">
<h2 class="dataInset-title">Zwei Datensätze</h2>
<div class="dataInset-items">
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>999.999</span></span> <span class="dataInset-label"><span>Dinge aus einer Gesamtmenge</span></span>
</div>
<div class="dataInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</div>
</div>
<!-- Three Items -->
<div class="dataInset" data-theme="accent">
<h2 class="dataInset-title">Drei Datensätze</h2>
<div class="dataInset-items">
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>999.999</span></span> <span class="dataInset-label"><span>Dinge aus einer Gesamtmenge</span></span>
</div>
<div class="dataInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</div>
</div>
<!-- Four Items -->
<div class="dataInset" data-theme="accent">
<h2 class="dataInset-title">Vier Datensätze</h2>
<div class="dataInset-items">
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>999.999</span></span> <span class="dataInset-label"><span>Dinge aus einer Gesamtmenge</span></span>
</div>
<div class="dataInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
</div>
</div>
<!-- Five Items -->
<div class="dataInset" data-theme="accent">
<h2 class="dataInset-title">Fünf Datensätze</h2>
<div class="dataInset-items">
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>999.999</span></span> <span class="dataInset-label"><span>Dinge aus einer Gesamtmenge</span></span>
</div>
<div class="dataInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</div>
</div>
<!-- Six Items -->
<div class="dataInset" data-theme="accent">
<h2 class="dataInset-title">Sechs Datensätze</h2>
<div class="dataInset-items">
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>999.999</span></span> <span class="dataInset-label"><span>Dinge aus einer Gesamtmenge</span></span>
</div>
<div class="dataInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>999.999</span></span> <span class="dataInset-label"><span>Dinge aus einer Gesamtmenge</span></span>
</div>
<div class="dataInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
</div>
</div>
<div class="dataInset{{#if theme}}{{#unless title}} has-backdrop{{/unless}}{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
{{#title}}
<h2 class="dataInset-title">{{{.}}}</h2>
{{/title}}
{{#intro}}
<div class="dataInset-intro">
<!-- Achtung: Doppelte Description -->
{{#richtextblock}}
{{render '@richtextblock' (contextData '@datainset' this) merge=true}}
{{/richtextblock}}
</div>
{{/intro}}
<div class="dataInset-items">
{{#items}}
<div class="dataInset-item">
<div class="dataInset-data">{{#value}}
<span class="dataInset-value"><span>{{{.}}}</span></span>{{/value}}{{#label}} <span class="dataInset-label"><span>{{{.}}}</span></span>{{/label}}{{#description}}
</div>
<div class="dataInset-description">{{{.}}}</div>{{/description}}
</div>
{{/items}}
</div>
</div>
/* Default */
{
"title": "Ich bin der Titel",
"items": [
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"value": 999.999,
"label": "Dinge aus einer Gesamtmenge",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
]
}
/* With Intro */
{
"title": "Ich bin der Titel",
"items": [
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"value": 999.999,
"label": "Dinge aus einer Gesamtmenge",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
],
"intro": {
"richtextblock": {
"content": "<h3>I am a heading</h3><p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p><ul><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li></ul><p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href=\"#\">skateboard chillwave deep</a>.<p><ol><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li></ol><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>"
}
}
}
/* With Intro */
{
"title": "Ich bin der Titel",
"items": [
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"value": 999.999,
"label": "Dinge aus einer Gesamtmenge",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
],
"modifier": "has-backdrop",
"intro": {
"richtextblock": {
"content": "<h3>I am a heading</h3><p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p><ul><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li></ul><p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href=\"#\">skateboard chillwave deep</a>.<p><ol><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li></ol><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>"
}
}
}
/* Boxed */
{
"title": "Ich bin der Titel",
"items": [
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"value": 999.999,
"label": "Dinge aus einer Gesamtmenge",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
],
"theme": "accent"
}
/* Single Item */
{
"title": "Ein einzelner Datensatz",
"items": [
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
}
],
"theme": "accent"
}
/* Two Items */
{
"title": "Zwei Datensätze",
"items": [
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"value": 999.999,
"label": "Dinge aus einer Gesamtmenge",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
],
"theme": "accent"
}
/* Three Items */
{
"title": "Drei Datensätze",
"items": [
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"value": 999.999,
"label": "Dinge aus einer Gesamtmenge",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
],
"theme": "accent"
}
/* Four Items */
{
"title": "Vier Datensätze",
"items": [
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"value": 999.999,
"label": "Dinge aus einer Gesamtmenge",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
},
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
}
],
"theme": "accent"
}
/* Five Items */
{
"title": "Fünf Datensätze",
"items": [
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"value": 999.999,
"label": "Dinge aus einer Gesamtmenge",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
},
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
}
],
"theme": "accent"
}
/* Six Items */
{
"title": "Sechs Datensätze",
"items": [
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"value": 999.999,
"label": "Dinge aus einer Gesamtmenge",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
},
{
"value": 999.999,
"label": "Dinge aus einer Gesamtmenge",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
},
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
}
],
"theme": "accent"
}
@import "_dataInset.settings";
@import "_dataInset.styles";
.dataInset {
$separator_size: 124px;
@include stack-spacing(section);
--seperator-color: #{$_accent-color};
&-title {
@extend %sectionTitle;
@include stack-spacing(0);
@include stack-spacing(component, margin-bottom);
}
&-intro {
@include stack-spacing(section, margin-bottom);
> *:first-child {
@include stack-spacing(0);
}
}
&-item {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
&-value,
&-label {
display: block;
font-weight: $_font-weight--bold;
}
&-value {
$font-size--min: 55px;
$font-size--max: 110px;
font-size: clamp($font-size--min, math.div($font-size--max * 100vw, $_page_max-width), $font-size--max);
line-height: 1.05;
margin-top: -.15lh;
}
&-label {
@include font-size(2x-large);
line-height: 1.2;
}
&-description {
@include stack-spacing();
width: 80%;
margin-left: auto;
margin-right: auto;
text-wrap: pretty;
@include text-size(small);
> *:first-child {
@include stack-spacing(0);
}
}
&[data-theme] {
@include full-width-backdrop($set-padding: true);
--seperator-color: var(--spot-primary-background-color, white);
}
&[data-theme] &-title {
@extend %sectionTitle--on-backdrop;
}
&.has-intro, // Deprecated: Use has-backdrop
&.has-backdrop {
@include full-width-backdrop($set-padding: true);
}
@include only-on-desktop(){
$gutter: (2 * $_grid-gutter);
&-title,
&-intro {
width: get-columns-width(8);
margin-left: auto;
margin-right: auto;
}
&-item:only-child {
display: flex;
align-items: center;
column-gap: var(--sp-component);
text-align: left;
&::after {
content: "";
display: block;
width: var(--bw-large);
align-self: stretch;
background-color: var(--seperator-color);
}
> * {
flex: 1 0 1ch;
}
}
&-item:only-child & {
&-data {
display: flex;
column-gap: 1.2rem;
align-items: baseline;
justify-content: flex-end;
> * {
flex: 0;
}
}
&-value,
&-label {
span {
display: inline-block;
}
}
&-value {
flex: 1 0;
line-height: 1;
margin-top: -.05em;
text-align: right;
}
&-description {
@include stack-spacing(0);
order: 3;
}
}
&-items {
display: grid;
column-gap: (2 * $_grid_gutter);
row-gap: var(--sp-component);
grid-template-columns: repeat(6, 1fr);
justify-items: center;
}
&-item {
grid-column: auto / span 2;
position: relative;
& + & {
&::before {
content: "";
display: block;
height: $separator_size;
width: var(--bw-large);
position: absolute;
top: 50%;
transform: translate(calc(-.5 * var(--bw-large)), -50%);
margin-left: (-.5 * $gutter);
background-color: var(--seperator-color);
}
}
// Single item
&:only-child {
grid-column: 1 / -1 !important;
}
// 4 items
&:nth-child(1):nth-last-child(4),
&:nth-child(3):nth-last-child(2) {
grid-column-start: 2;
}
&:nth-child(3):nth-last-child(2)::before {
display: none;
}
&:nth-child(4):nth-last-child(1)::before {
display: block;
}
// Odd count of items in last row
&:nth-child(3n-2):nth-last-child(2) {
grid-column-start: 2;
}
&:nth-child(3n-1):nth-last-child(1) {
grid-column-start: 4;
}
&:nth-child(3n-2)::before {
display: none;
}
}
}
@include not-on-desktop(){
&-item {
max-width: 360px;
& + & {
@include stack-spacing(component);
@include stack-spacing(component, padding-top);
&::before {
content: "";
display: block;
width: $separator_size;
height: var(--bw-large);
position: relative;
left: 50%;
top: calc(-1 * var(--sp-component));
transform: translateX(-50%);
margin-top: calc(-.5 * var(--bw-large));
background-color: var(--seperator-color);
}
}
}
&-label {
@include text-size(x-large);
}
&-description {
@include stack-spacing(small);
}
&-value {
margin-top: -.1lh;
}
}
}