<div class="c-canvas c-canvas--content-template " id="" grid="grid">
<div class="c-canvas__paper" grid="8@md offset-3@md">
<span class="c-rounded-label " aria-label="">
18/06/2018
</span>
<h2>Titolo blocco</h2>
<h3>Sottotitolo paragrafo</h3>
<p>Le operazioni di check-in vengono controllati:</p>
<ul class="c-list--bulleted">
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
</ul>
<p><a href="#"><img alt="Certificato Sistema Gestione Ambientale UNI EN ISO 14001:2004" style="float: left;" src="http://blq.staging.endurance.it/System/images/Ambiente/14001.png"></a>Il nostro Sistema di Gestione Ambientale (SGA) è conforme agli standard previsti dalla normativa ISO EN-UNI 14001, a garanzia di efficacia delle misure intraprese nel campo della tutela ambientale. Come aeroporto sappiamo che costruire rapporti di fiducia con il territorio e gli altri soggetti aeroportuali significa parlare una lingua comune, basata su dati certi e condivisi. Il nostro SGA prevede quindi la misurazione degli impatti ambientali generati dalle attività aeroportuali ed aeronautiche (tra cui rumore, qualità delle acque, rifiuti), utilizzando indicatori numerici in grado di quantificare l'entità degli impatti stessi. Inoltre, lo stesso SGA include l'adozione di diverse procedure interne atte a garantire l'attuazione di adeguate azioni preventive e correttive in caso di potenziale o effettivo insorgere di impatti ambientali significativi.</p>
<p>Lorem ipsum dolor sit <a href="#">amet consectetur</a>, adipisicing elit. Voluptatem sit quibusdam tempora qui fuga tempore nam alias molestias reprehenderit! Dolores beatae minus cupiditate porro modi ipsa illo eaque illum error!</p>
<a href="#" class="c-link c-link--primary">
<span>Link</span>
<svg class="svg-24">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
<h3>Sottotitolo paragrafo</h3>
<ol>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
</ol>
<div class="c-collapsible--simple o-collapsible ">
<p class="c-collapsible__title o-collapsible__title js-collapsible-title" id="organism-canvas">Element title</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime recusandae eligendi beatae nesciunt sit. Officiis nulla maiores, alias minima, dolorum harum et earum molestias odio architecto tempore est consequuntur ullam.</p>
</div>
<div class="c-collapsible--simple o-collapsible ">
<p class="c-collapsible__title o-collapsible__title js-collapsible-title" id="">2022</p>
<div class="c-collapsible__content">
<div class="c-media o-media ">
<img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="Gennaio 2022" height="" width="32">
<div class="c-media__body o-media__body">
<a href="#"><strong>Gennaio</strong></a><br>PDF, 577 kb
</div>
</div>
<div class="c-media o-media ">
<img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="Febbraio 2022" height="" width="32">
<div class="c-media__body o-media__body">
<a href="#"><strong>Febbraio</strong></a><br>PDF, 577 kb
</div>
</div>
<div class="c-media o-media ">
<img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="Marzo 2022" height="" width="32">
<div class="c-media__body o-media__body">
<a href="#"><strong>Marzo</strong></a><br>PDF, 577 kb
</div>
</div>
<div class="c-media o-media ">
<img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="Aprile 2022" height="" width="32">
<div class="c-media__body o-media__body">
<a href="#"><strong>Aprile</strong></a><br>PDF, 577 kb
</div>
</div>
<div class="c-media o-media ">
<img class="c-media__figure o-media__figure" src="../../images/svgs/pdf.svg" alt="Maggio 2022" height="" width="32">
<div class="c-media__body o-media__body">
<a href="#"><strong>Maggio</strong></a><br>PDF, 577 kb
</div>
</div>
</div>
</div>
<p>Lorem ipsum dolor sit <a href="#">amet consectetur</a>, adipisicing elit. Voluptatem sit quibusdam tempora qui fuga tempore nam alias molestias reprehenderit! Dolores beatae minus cupiditate porro modi ipsa illo eaque illum error!</p>
<div class="c-snapshot " aria-hidden="true">
<div class="c-snapshot__thumbnail">
<img src="../../images/amsterdam.jpg" alt="Amsterdam" class="u-OF-cover">
<a href="#" class="c-snapshot__download-link">
<span class="u-visuallyhidden">Download gallery</span>
<svg class="c-icon c-icon--24">
<use xlink:href="#ic-download-24px"></use>
</svg> </a>
<button class="c-snapshot__button js-fr-dialogmodal-open" aria-controls="dialog-gallery">
<span class="u-visuallyhidden">Apri la gallery</span>
<svg class="c-icon c-icon--24">
<use xlink:href="#ic-zoom-24px"></use>
</svg> </button>
</div>
<p>Amsterdam</p>
</div>
<div class="c-dialog c-dialog--gallery js-fr-dialogmodal " id="dialog-gallery">
<div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-gallery-dialog-title">
<div role="document">
<p class="c-dialog__title u-visuallyhidden" id="dialog-gallery-dialog-title" aria-hidden="true">Titolo della gallery</p>
<section class="c-carousel c-carousel--big-gallery c-carousel--big-gallery c-carousel--top-nav" aria-hidden="true">
<div class="jsInstance owl-carousel">
<div class="c-carousel__item">
<img src="https://picsum.photos/800/533" alt="">
<p class="img-desc">Image description 1</p>
</div>
<div class="c-carousel__item">
<img src="https://picsum.photos/300/533" alt="">
<p class="img-desc">Image description 2</p>
</div>
<div class="c-carousel__item">
<img src="https://picsum.photos/800/533" alt="">
<p class="img-desc">Image description 3</p>
</div>
<div class="c-carousel__item">
<img src="https://picsum.photos/800/533" alt="">
<p class="img-desc">Image description 4</p>
</div>
<div class="c-carousel__item">
<img src="https://picsum.photos/800/533" alt="">
<p class="img-desc">Image description 5</p>
</div>
</div>
</section> <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
</div>
</div>
<div class="c-highlight ">
<h3>Title</h3>
<h4>Subtitle</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam quia <strong>laborum impedit ipsum</strong> culpa asperiores nulla. Repellat nobis, porro officia, placeat, labore veritatis voluptatum corporis nulla consequuntur illo optio neque.</p>
</div>
<p>Lorem ipsum dolor sit <a href="#">amet consectetur</a>, adipisicing elit. Voluptatem sit quibusdam tempora qui fuga tempore nam alias molestias reprehenderit! Dolores beatae minus cupiditate porro modi ipsa illo eaque illum error!</p>
<blockquote class="c-blockquote ">
<p>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium oloremque laudantium, totam rem.
</p>
<footer>
<cite>Mario Rossi</cite>
</footer>
</blockquote>
<form class="c-form c-form--outstanding">
<header form-title>
<h3>Dati anagrafici</h3>
</header>
<div class="c-form__samerow">
<label for="name" class="sibling" aria-label="">
Nome <span class="required-marker" aria-hidden="true">*</span>
<input id="name" type="text" class="" placeholder="" value="" aria-describedby="name-note">
<p class="c-field__note " id="name-note">
Inserisci il nome
</p>
</label>
<label for="surname" class="sibling" aria-label="">
Cognome <span class="required-marker" aria-hidden="true">*</span>
<input id="surname" type="text" class="" placeholder="" value="" aria-describedby="surname-note">
<p class="c-field__note " id="surname-note">
Inserisci il cognome
</p>
</label>
</div>
<label for="function" class="" aria-label="">
Funzione <span class="required-marker" aria-hidden="true">*</span>
<input id="function" type="text" class="" placeholder="" value="" aria-describedby="function-note">
<p class="c-field__note " id="function-note">
Inserisci la funzione
</p>
</label>
<label for="management" class="" aria-label="">
Ente / Società / Direzione di appartenenza <span class="required-marker" aria-hidden="true">*</span>
<input id="management" type="text" class="" placeholder="" value="" aria-describedby="management-note">
<p class="c-field__note " id="management-note">
Inserisci l'Ente, Società o Direzione di appartenenza
</p>
</label>
<div class="c-form__samerow">
<label for="cellphone" class="" aria-label="">
Cellulare <span class="required-marker" aria-hidden="true">*</span>
<input id="cellphone" type="tel" class="" placeholder="" value="" aria-describedby="cellphone-note">
<p class="c-field__note " id="cellphone-note">
Inserisci il tuo numero di cellulare
</p>
</label>
<label for="email" class="" aria-label="">
E-mail <span class="required-marker" aria-hidden="true">*</span>
<input id="email" type="email" class="" placeholder="" value="" aria-describedby="email-note">
<p class="c-field__note " id="email-note">
Inserisci il tuo indirizzo e-mail
</p>
</label>
</div>
<header form-title>
<h3>Voluntary Safety Report (aperto a tutti coloro che operano sul sedime aeroportuale)</h3>
<strong>Eventi o mancati eventi</strong>
</header>
<div>
<input type="checkbox" id="other" name="other" class="u-visuallyhidden u-chkbx-toggle" role="group" aria-label="other">
<label for="other" class="is-block">
Descrivi l'evento
</label> <label for="textarea-field" class="sibling u-chkbx-toggleReceiver" aria-label="">
Messaggio: <span class="required-marker" aria-hidden="true">*</span>
<textarea id="textarea-field" placeholder="Descrivi l'evento" class="" rows="4" required aria-required="true" aria-describedby="textarea-note"></textarea>
<em class="c-field__note u-visuallyhidden" id="textarea-note">
Inserisci il messaggio
</em>
</label>
</div>
<header form-title>
<strong>Consenso obbligatorio</strong>
</header>
<input type="checkbox" id="privacy" name="privacy" class="u-visuallyhidden " role="group" aria-label="privacy">
<label for="privacy" class="is-block">
Endurance: qui va il testo per il consenso obbligatorio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit dignissimos iste quae vel at incidunt aperiam! Iste natus, eaque magnam saepe corrupti ad neque facere sapiente ipsum deleniti facilis enim?
</label>
<button type="submit" class="c-button c-button--confirm">
Invia la richiesta
</button>
</form>
<form class="c-form c-form--outstanding">
<header form-title>
<h3>STEP 1 - Visualizza i dati del rumore aereo, in base alle varie zone di Bologna:</h3>
</header>
<div class="c-form__samerow">
<label for="select-field" class="" aria-label="">
Label: <span class="required-marker" aria-hidden="true">*</span>
<select id="select-field" class="" aria-describedby="select-note">
<option value="" disabled selected>Make your choice</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<em class="c-field__note " id="select-note">
Seleziona una opzione dal menù a tendina
</em>
</label>
<label for="select-field" class="" aria-label="">
Label: <span class="required-marker" aria-hidden="true">*</span>
<select id="select-field" class="" aria-describedby="select-note">
<option value="" disabled selected>Make your choice</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<em class="c-field__note " id="select-note">
Seleziona una opzione dal menù a tendina
</em>
</label>
<button type="submit" class="c-button c-button--confirm">
Invia la richiesta
</button>
</div>
</form>
<section class="c-carousel c-carousel--gallery" aria-hidden="true">
<div class="jsInstance owl-carousel">
<div style="background-image: url(https://picsum.photos/560/360)" class="c-carousel__background-image" alt=""></div>
<div style="background-image: url(https://picsum.photos/560/360)" class="c-carousel__background-image" alt=""></div>
<div style="background-image: url(https://picsum.photos/560/360)" class="c-carousel__background-image" alt=""></div>
<div style="background-image: url(https://picsum.photos/560/360)" class="c-carousel__background-image" alt=""></div>
</div>
</section>
<div class="c-table_cnt">
<table class="o-table c-table">
<caption>Table title</caption>
<thead>
<tr>
<th scope="col">One</th>
<th scope="col">Two</th>
<th scope="col">Three</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="One"><strong>Lorem ipsum</strong></td>
<td data-label="Two">
Lorem, ipsum dolor sit amet consectetur adipisicing elit
</td>
<td data-label="Three">Lorem, ipsum dolor sit amet consectetur adipisicing elit</td>
</tr>
<tr>
<td data-label="One"><strong>Lorem ipsum</strong></td>
<td data-label="Two">
Lorem, ipsum dolor sit amet consectetur adipisicing elit
</td>
<td data-label="Three">Lorem, ipsum dolor sit amet consectetur adipisicing elit</td>
</tr>
<tr>
<td data-label="One"><strong>Lorem ipsum</strong></td>
<td data-label="Two">
Lorem, ipsum dolor sit amet consectetur adipisicing elit
</td>
<td data-label="Three">Lorem, ipsum dolor sit amet consectetur adipisicing elit</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="c-canvas c-canvas--content-template {{ modifier }}" id="{{ canvas-id }}" grid="grid">
<div class="c-canvas__paper" grid="8@md offset-3@md">
{{!-- partial-block defined page by page --}}
{{#> @partial-block }}
{{> @rounded-label date }}
<h2>Titolo blocco</h2>
<h3>Sottotitolo paragrafo</h3>
<p>Le operazioni di check-in vengono controllati:</p>
<ul class="c-list--bulleted">
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
</ul>
<p><a href="#"><img alt="Certificato Sistema Gestione Ambientale UNI EN ISO 14001:2004" style="float: left;" src="http://blq.staging.endurance.it/System/images/Ambiente/14001.png"></a>Il nostro Sistema di Gestione Ambientale (SGA) è conforme agli standard previsti dalla normativa ISO EN-UNI 14001, a garanzia di efficacia delle misure intraprese nel campo della tutela ambientale. Come aeroporto sappiamo che costruire rapporti di fiducia con il territorio e gli altri soggetti aeroportuali significa parlare una lingua comune, basata su dati certi e condivisi. Il nostro SGA prevede quindi la misurazione degli impatti ambientali generati dalle attività aeroportuali ed aeronautiche (tra cui rumore, qualità delle acque, rifiuti), utilizzando indicatori numerici in grado di quantificare l'entità degli impatti stessi. Inoltre, lo stesso SGA include l'adozione di diverse procedure interne atte a garantire l'attuazione di adeguate azioni preventive e correttive in caso di potenziale o effettivo insorgere di impatti ambientali significativi.</p>
<p>Lorem ipsum dolor sit <a href="#">amet consectetur</a>, adipisicing elit. Voluptatem sit quibusdam tempora qui fuga tempore nam alias molestias reprehenderit! Dolores beatae minus cupiditate porro modi ipsa illo eaque illum error!</p>
{{ render "@link--primary" }}
<h3>Sottotitolo paragrafo</h3>
<ol>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
</ol>
{{> @collapsible--default accordion }}
{{> @collapsible--docs documents }}
<p>Lorem ipsum dolor sit <a href="#">amet consectetur</a>, adipisicing elit. Voluptatem sit quibusdam tempora qui fuga tempore nam alias molestias reprehenderit! Dolores beatae minus cupiditate porro modi ipsa illo eaque illum error!</p>
{{ render "@snapshot" }}
{{ render "@highlight" }}
<p>Lorem ipsum dolor sit <a href="#">amet consectetur</a>, adipisicing elit. Voluptatem sit quibusdam tempora qui fuga tempore nam alias molestias reprehenderit! Dolores beatae minus cupiditate porro modi ipsa illo eaque illum error!</p>
{{ render "@blockquote" }}
{{!-- {{ render "@social-share" }} --}}
<form class="c-form c-form--outstanding">
<header form-title>
<h3>Dati anagrafici</h3>
</header>
<div class="c-form__samerow">
{{> @input segnalations-name }}
{{> @input segnalations-surname }}
</div>
{{> @input segnalations-function }}
{{> @input segnalations-management }}
<div class="c-form__samerow">
{{> @input segnalations-cellphone }}
{{> @input segnalations-email }}
</div>
<header form-title>
<h3>Voluntary Safety Report (aperto a tutti coloro che operano sul sedime aeroportuale)</h3>
<strong>Eventi o mancati eventi</strong>
</header>
<div>
{{> @checkbox segnalations-other }}
{{> @textarea segnalations-other-txt }}
</div>
<header form-title>
<strong>Consenso obbligatorio</strong>
</header>
{{> @checkbox segnalations-privacy }}
{{> @button btn-enabled }}
</form>
<form class="c-form c-form--outstanding">
<header form-title>
<h3>STEP 1 - Visualizza i dati del rumore aereo, in base alle varie zone di Bologna:</h3>
</header>
<div class="c-form__samerow">
{{ render "@select" }}
{{ render "@select" }}
{{> @button btn-enabled }}
</div>
</form>
{{> @carousel--background-gallery canvas-carousel }}
{{ render "@table--default" }}
{{/ @partial-block }}
{{!-- end partial-block --}}
</div>
</div>
{
"illustration": {
"path": "/images/svgs/routes/ill-animali-veterinario.svg",
"alt": "Veterinario"
},
"pdf-map": {
"img-src": "/images/svgs/pdf.svg",
"img-alt": "Mappa parcheggi",
"img-width": "32",
"body": "<a href=\"#\"><strong>Mappa parcheggi</strong></a><br>PDF, 577 kb"
},
"suggestion": {
"text": "<strong>I nostri consigli</strong><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>",
"hasImage": true,
"img-src": "/images/svgs/stk_informazioni.svg",
"img-alt": ""
},
"accordion": {
"title": "Element title",
"text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime recusandae eligendi beatae nesciunt sit. Officiis nulla maiores, alias minima, dolorum harum et earum molestias odio architecto tempore est consequuntur ullam.",
"id": "organism-canvas"
},
"documents": {
"title": "2022",
"pdf": [
{
"img-src": "/images/svgs/pdf.svg",
"img-alt": "Gennaio 2022",
"img-width": "32",
"body": "<a href=\"#\"><strong>Gennaio</strong></a><br>PDF, 577 kb"
},
{
"img-src": "/images/svgs/pdf.svg",
"img-alt": "Febbraio 2022",
"img-width": "32",
"body": "<a href=\"#\"><strong>Febbraio</strong></a><br>PDF, 577 kb"
},
{
"img-src": "/images/svgs/pdf.svg",
"img-alt": "Marzo 2022",
"img-width": "32",
"body": "<a href=\"#\"><strong>Marzo</strong></a><br>PDF, 577 kb"
},
{
"img-src": "/images/svgs/pdf.svg",
"img-alt": "Aprile 2022",
"img-width": "32",
"body": "<a href=\"#\"><strong>Aprile</strong></a><br>PDF, 577 kb"
},
{
"img-src": "/images/svgs/pdf.svg",
"img-alt": "Maggio 2022",
"img-width": "32",
"body": "<a href=\"#\"><strong>Maggio</strong></a><br>PDF, 577 kb"
}
]
},
"date": {
"text": "18/06/2018"
},
"segnalations-name": {
"label_id": "name",
"label_message": "Nome",
"label_class": "sibling",
"atom-input": {
"id": "name",
"type": "text",
"class": null,
"placeholder": "",
"value": null,
"required": true,
"hasNote": true,
"describedby": "name-note"
},
"note_id": "name-note",
"note_message": "Inserisci il nome",
"note_class": ""
},
"segnalations-surname": {
"label_id": "surname",
"label_message": "Cognome",
"label_class": "sibling",
"atom-input": {
"id": "surname",
"type": "text",
"class": null,
"placeholder": "",
"value": null,
"required": true,
"hasNote": true,
"describedby": "surname-note"
},
"note_id": "surname-note",
"note_message": "Inserisci il cognome",
"note_class": ""
},
"segnalations-function": {
"label_id": "function",
"label_message": "Funzione",
"label_class": "",
"atom-input": {
"id": "function",
"type": "text",
"class": null,
"placeholder": "",
"value": null,
"required": true,
"hasNote": true,
"describedby": "function-note"
},
"note_id": "function-note",
"note_message": "Inserisci la funzione",
"note_class": ""
},
"segnalations-management": {
"label_id": "management",
"label_message": "Ente / Società / Direzione di appartenenza",
"label_class": "",
"atom-input": {
"id": "management",
"type": "text",
"class": null,
"placeholder": "",
"value": null,
"required": true,
"hasNote": true,
"describedby": "management-note"
},
"note_id": "management-note",
"note_message": "Inserisci l'Ente, Società o Direzione di appartenenza",
"note_class": ""
},
"segnalations-cellphone": {
"label_id": "cellphone",
"label_message": "Cellulare",
"label_class": null,
"atom-input": {
"id": "cellphone",
"type": "tel",
"class": null,
"placeholder": "",
"value": null,
"required": true,
"hasNote": true,
"describedby": "cellphone-note"
},
"note_id": "cellphone-note",
"note_message": "Inserisci il tuo numero di cellulare",
"note_class": ""
},
"segnalations-email": {
"label_id": "email",
"label_message": "E-mail",
"label_class": null,
"atom-input": {
"id": "email",
"type": "email",
"class": null,
"placeholder": "",
"value": null,
"required": true,
"hasNote": true,
"describedby": "email-note"
},
"note_id": "email-note",
"note_message": "Inserisci il tuo indirizzo e-mail",
"note_class": ""
},
"segnalations-other": {
"class": "is-block",
"id": "other",
"name": "other",
"text": "Descrivi l'evento",
"checkbox-class": "u-chkbx-toggle"
},
"segnalations-other-txt": {
"label_id": "textarea-field",
"label_message": "Messaggio:",
"label_class": "sibling u-chkbx-toggleReceiver",
"atom-textarea": {
"id": "textarea-field",
"class": null,
"rows": "4",
"placeholder": "Descrivi l'evento",
"required": true,
"hasNote": true,
"describedby": "textarea-note"
},
"note_id": "textarea-note",
"note_message": "Inserisci il messaggio",
"note_class": "u-visuallyhidden"
},
"segnalations-privacy": {
"class": "is-block",
"id": "privacy",
"name": "privacy",
"text": "Endurance: qui va il testo per il consenso obbligatorio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit dignissimos iste quae vel at incidunt aperiam! Iste natus, eaque magnam saepe corrupti ad neque facere sapiente ipsum deleniti facilis enim?"
},
"btn-enabled": {
"name": "submit",
"type": "submit",
"text": "Invia la richiesta",
"modifier": "c-button--confirm"
},
"sidebar-components": [
{
"componentName": "@starter--identity"
},
{
"componentName": "@snapshot--gallery-title"
},
{
"componentName": "@snapshot--video"
},
{
"componentName": "@snapshot--default"
},
{
"componentName": "@snapshot--single"
},
{
"componentName": "@starter--doc"
},
{
"componentName": "@starter--related"
},
{
"componentName": "@starter--insights",
"componentInstance": {
"modifier": "c-starter--folders"
}
},
{
"componentName": "@snapshot--gallery-title"
},
{
"componentName": "@starter--archive",
"componentInstance": {
"hasNested": true,
"modifier": ""
}
},
{
"componentName": "@starter--login"
},
{
"componentName": "@starter--logout"
}
],
"canvas-carousel": {
"aria-label-title": "carosello di immagini",
"modifier": "c-carousel--gallery",
"images": [
{
"img-path": "https://picsum.photos/560/360"
},
{
"img-path": "https://picsum.photos/560/360"
},
{
"img-path": "https://picsum.photos/560/360"
},
{
"img-path": "https://picsum.photos/560/360"
}
]
}
}
.c-canvas {
margin-bottom: remify(40px);
padding-top: remify(40px);
main & {
grid-column: main;
}
}
.c-canvas__picture {
text-align: right;
flex: 1 1 40%;
display: none;
@include min-screen(bp(tablet-p)) {
display: block;
}
img {
max-height: remify(710px);
position: relative;
right: -4vw;
top: remify(48px);
// z-index: 0;
// top: 50%;
// transform: translateY(-50%);
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
width: 100%;
}
}
}
.c-canvas__paper {
position: relative;
z-index: 1;
// padding: remify(24px);
// background-color: #fff;
// border-radius: remify(4px);
// @include shadow(medium);
// flex: 1 1 100%;
@include min-screen(bp(tablet)) {
// padding: remify(32px);
}
@include min-screen(bp(tablet-p)) {
// flex: 0 1 60%;
// padding: remify(56px);
}
& .o-collapsible__content p {
margin-bottom: remify(32px);
}
& .o-collapsible__content p:last-child {
margin-bottom: 0;
}
}
.c-canvas__paper h2,
.c-canvas__paper h3 {
color: primary(night, 100);
}
.c-canvas__paper h2 {
font-weight: fw(light);
margin-bottom: remify(24px);
background-color: #fff;
}
.c-canvas__paper h3 {
font-weight: fw(semibold);
margin-bottom: remify(8px);
&.is-positive,
&.is-negative {
display: flex;
align-items: center;
}
&.is-positive {
color: status(positive);
}
&.is-negative {
color: status(negative);
}
svg {
margin-right: remify(8px);
* {
fill: currentColor;
}
}
}
.c-canvas__paper .c-link {
margin-bottom: remify(32px);
}
.c-canvas__paper > p {
margin-bottom: remify(32px);
}
.c-canvas__paper p {
line-height: 1.8;
}
// The following lines has been added because of this:
// https://bitbucket.org/GnvPartners/adb/issues/198/comandi-in-linea-float-left-float-right
.c-canvas__paper > p a img {
max-width: remify(190px);
padding: 0 16px 16px 16px;
}
.c-canvas__paper > img {
margin-bottom: remify(32px);
}
.c-canvas__paper ul,
.c-canvas__paper ol {
margin-top: remify(8px);
margin-bottom: remify(32px);
}
.c-canvas__paper .spaced > li {
margin-bottom: remify(16px);
}
.c-canvas__paper hr {
display: block;
height: remify(1px);
border: 0;
border-top: remify(1px) solid #ccc;
margin: remify(16px) 0;
padding: 0;
}
.c-canvas__paper .c-media {
margin-bottom: remify(32px);
}
.c-canvas__paper .c-collapsible__content .c-media {
margin-bottom: remify(16px);
}
.c-canvas__paper .c-suggestion {
margin-bottom: remify(40px);
position: relative;
// @include min-screen(bp(tablet-p)) {
// left: remify(-100px);
// }
}
.c-canvas__paper .c-collapsible--simple {
margin-top: remify(32px);
margin-bottom: remify(32px);
}
.c-canvas__paper .c-snapshot,
.c-canvas__paper .c-highlight {
margin-bottom: remify(32px);
}
.c-canvas__paper {
& > * {
&:last-child {
margin-bottom: 0;
}
}
& > img:last-child {
margin-bottom: remify(32px);
}
}
.c-canvas__sidebar {
// flex: 1 1 100%;
// margin-top: remify(24px);
// & > * {
// margin-bottom: remify(16px);
// padding-bottom: remify(16px);
// &:last-child {
// margin-bottom: 0;
// }
// }
@include min-screen(bp(tablet-p)) {
// flex: 0 1 35%;
// position: relative;
// right: remify(-40px);
// margin-top: 0;
}
@include min-screen(remify(1400px)) {
// right: remify(-70px);
}
}
/*------------------------------------*\
Content template modifier
\*------------------------------------*/
.c-canvas--content-template {
position: relative;
}
/*------------------------------------*\
Map modifier
\*------------------------------------*/
.c-canvas--map {
padding: 0;
.c-canvas__paper {
min-height: remify(280px);
height: auto;
padding: 0;
margin-bottom: 0;
@include min-screen(bp(tablet-p)) {
flex: 1 1 100%;
height: remify(935px);
}
.g-map {
width: 100%;
height: 100%;
}
}
.c-canvas__sidebar {
@include min-screen(bp(tablet-p)) {
position: absolute;
z-index: 10;
right: remify(-20px);
top: 50%;
transform: translateY(-50%);
width: 100%;
max-width: remify(400px);
}
}
}
.c-canvas--hasCarousel {
.c-canvas__paper {
overflow-x: hidden;
}
}
/*------------------------------------*\
Report modifier
\*------------------------------------*/
.c-canvas__report {
// max-height: 800px;
// overflow-y: scroll;
padding: remify(0px) remify(16px);
span {
display: block;
font-weight: fw(bold);
color: primary(night, 80);
text-transform: uppercase;
margin-bottom: remify(8px);
}
h3 {
font-weight: fw(regular);
color: primary(night, 100);
font-size: 150%;
line-height: 1.4;
margin-bottom: remify(16px);
@include min-screen(bp(tablet)) {
font-size: 150%;
line-height: 1.333;
}
}
p {
margin-bottom: remify(24px);
}
}
.c-canvas__report-item {
margin-bottom: remify(48px);
}
No notes defined.