<!-- Default -->
<div class="banner">
<style>
#BgImage-banner--default {
background-image: url("../../assets/bridge-1000-360.jpg");
}
</style>
<div id="BgImage-banner--default" class="banner_img banner_img-fade" aria-hidden="true"></div>
<div class="banner_inner l-containerSmall">
<h2 class="banner_title">
Lorem ipsum
</h2>
<h3 class="banner_subTitle">
Lorem ipsum dolor sit amet
</h3>
<div class="banner_text">
<div class="typography">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>
</div>
</div>
<p class="banner_btn">
< class="btn btn-truncate ">
Lorem ipsum
</>
</p>
<p class="banner_btn">
< class="btn btn-truncate ">
Consectetur
</>
</p>
<p class="banner_btn">
< class="btn btn-truncate ">
Integer varius
</>
</p>
</div>
</div>
<!-- No Content -->
<div class="banner">
<style>
#BgImage-banner--no-content {
background-image: url("../../assets/bridge-1000-360.jpg");
}
</style>
<div id="BgImage-banner--no-content" class="banner_img banner_img-fade" aria-hidden="true"></div>
<div class="banner_inner l-containerSmall">
<p class="banner_btn">
< class="btn btn-truncate ">
Lorem ipsum
</>
</p>
<p class="banner_btn">
< class="btn btn-truncate ">
Consectetur
</>
</p>
<p class="banner_btn">
< class="btn btn-truncate ">
Integer varius
</>
</p>
</div>
</div>
<!-- No Image -->
<div class="banner">
<div class="banner_inner l-containerSmall">
<h2 class="banner_title">
Lorem ipsum
</h2>
<h3 class="banner_subTitle">
Lorem ipsum dolor sit amet
</h3>
<div class="banner_text">
<div class="typography">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>
</div>
</div>
<p class="banner_btn">
< class="btn btn-truncate ">
Lorem ipsum
</>
</p>
<p class="banner_btn">
< class="btn btn-truncate ">
Consectetur
</>
</p>
<p class="banner_btn">
< class="btn btn-truncate ">
Integer varius
</>
</p>
</div>
</div>
<div class="banner">
{{#if img }}
<style>#BgImage-{{ _self.handle }} {background-image: url("{{ path img }}");}</style>
<div id="BgImage-{{ _self.handle }}" class="banner_img{{#if imgFade }} banner_img-fade{{/if}}" aria-hidden="true"></div>
{{/if}}
<div class="banner_inner l-containerSmall">
{{#if label}}
<h2 class="banner_title">
{{ label }}
</h2>
{{/if}}
{{#if labelLong}}
<h3 class="banner_subTitle">
{{ labelLong }}
</h3>
{{/if}}
{{#if htmlText }}
<div class="banner_text">
<div class="typography">
{{{ htmlText }}}
</div>
</div>
{{/if }}
{{#each links}}
<p class="banner_btn">
{{ render '@btn' context}}
</p>
{{/each}}
</div>
</div>
/* Default */
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"id": "1",
"img": "/assets/bridge-1000-360.jpg",
"imgFade": true,
"links": [
{
"name": "first link",
"context": {
"label": "Lorem ipsum",
"modifier": "truncate"
}
},
{
"name": "second link",
"context": {
"label": "Consectetur",
"modifier": "truncate"
}
},
{
"name": "third link",
"context": {
"label": "Integer varius",
"modifier": "truncate"
}
}
]
}
/* No Content */
{
"label": null,
"labelLong": null,
"htmlText": null,
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"id": "1",
"img": "/assets/bridge-1000-360.jpg",
"imgFade": true,
"links": [
{
"name": "first link",
"context": {
"label": "Lorem ipsum",
"modifier": "truncate"
}
},
{
"name": "second link",
"context": {
"label": "Consectetur",
"modifier": "truncate"
}
},
{
"name": "third link",
"context": {
"label": "Integer varius",
"modifier": "truncate"
}
}
]
}
/* No Image */
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"id": "1",
"img": null,
"imgFade": true,
"links": [
{
"name": "first link",
"context": {
"label": "Lorem ipsum",
"modifier": "truncate"
}
},
{
"name": "second link",
"context": {
"label": "Consectetur",
"modifier": "truncate"
}
},
{
"name": "third link",
"context": {
"label": "Integer varius",
"modifier": "truncate"
}
}
]
}
There are no notes for this item.