Postcard

<div class="c-postcard">
    <h2>Paga con un click!</h2>
    <h3>Prenota il tuo parcheggio e pagalo online fino a 6 ore prima del tuo ingresso.</h3>

    <div class="c-postcard__body">
        <div class="content">
            <strong class="is-block">
                Il giorno del tuo ingresso
            </strong>
            <ol>
                <li>Presentati all'entrata del parcheggio prenotato e avvicinati alla colonnina.</li>
                <li>Posiziona il QRcode, che trovi sulla tua prenotazione, sotto il lettore della colonnina e attendi la lettura del codice.</li>
                <li>Ritira il biglietto d’ingresso, attendi l'apertura della sbarra ed entra.</li>
            </ol>
        </div>
        <div class="content">
            <strong class="is-block">
                Il giorno della tua uscita
            </strong>
            <ol>
                <li>Presentati all'entrata del parcheggio prenotato e avvicinati alla colonnina.</li>
                <li>Posiziona il QRcode, che trovi sulla tua prenotazione, sotto il lettore della colonnina e attendi la lettura del codice.</li>
                <li>Ritira il biglietto d’ingresso, attendi l'apertura della sbarra ed entra.</li>
            </ol>
        </div>
    </div>

    <div class="c-table_cnt c-table_cnt--noSlide">
        <table class="o-table c-table">
            <caption class="u-visuallyhidden">Come pagare il parcheggio</caption>
            <thead>
                <tr>
                    <th scope="col" class="">Puoi pagare</th>
                    <th scope="col" class="">Dove</th>
                    <th scope="col" class="">Quando</th>
                    <th scope="col" class="u-visuallyhidden">Prenota</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-label="Puoi pagare">Online (carta di credito)</td>
                    <td data-label="Dove">sul sito dell’aeroporto (Pc, Tablet, Smartphone)</td>
                    <td data-label="Quando">fino a 6 ore dall’ingresso al parcheggio</td>
                    <td data-label="Prenota"><a href="#"><strong>Prenota ora</strong></a></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="c-suggestion c-suggestion--simple c-suggestion--pale">

        <img src="../../images/svgs/stk_fatturazione.svg" alt="" aria-hidden="true">

        <div class="c-suggestion__text">
            <strong>Hai bisogno della fattura?</strong>
            <p>Se paghi la sosta online puoi richiedere la fattura solo durante l'acquisto e ti sarà inviata via mail. In caso di sosta più lunga rispetto a quella già corrisposta, l'eventuale eccedenza dovrà essere pagata (e richiesta fattura) in Aeroporto presso il Presidio parcheggi.</p>
        </div>

    </div>

</div>
<div class="c-postcard">
  <h2>{{{ title }}}</h2>
  <h3>{{{ subtitle }}}</h3>

  <div class="c-postcard__body">
    <div class="content">
      <strong class="is-block">
        {{ first-content-title }}
      </strong>
      {{{ first-content }}}
    </div>
    <div class="content">
      <strong class="is-block">
        {{ second-content-title }}
      </strong>
      {{{ second-content }}}
    </div>
  </div>

  {{#if specificTable}} {{render componentName }} {{else}}

  <div class="c-table_cnt {{ table-cnt-modifier }}">
    <table class="o-table c-table">
      <caption class="u-visuallyhidden">Come pagare il parcheggio</caption>
      <thead>
        <tr>
          {{#each table-head}}
          <th scope="col" class="{{this.modifier}}">{{ this.head-title }}</th>
          {{/each}}
        </tr>
      </thead>
      <tbody>
        {{#each table-rows}}
        <tr>
          {{#each this.table-cols}}
          <td data-label="{{ this.col-data-label }}">{{{ this.col-content }}}</td>
          {{/each}}
        </tr>
        {{/each}}
      </tbody>
    </table>
  </div>

  {{/if}} {{> @suggestion--simple suggestion }}

</div>
{
  "title": "Paga con un click!",
  "subtitle": "Prenota il tuo parcheggio e pagalo online fino a 6 ore prima del tuo ingresso.",
  "first-content-title": "Il giorno del tuo ingresso",
  "first-content": "<ol><li>Presentati all'entrata del parcheggio prenotato e avvicinati alla colonnina.</li><li>Posiziona il QRcode, che trovi sulla tua prenotazione, sotto il lettore della colonnina e attendi la lettura del codice.</li><li>Ritira il biglietto d’ingresso, attendi l'apertura della sbarra ed entra.</li></ol>",
  "second-content-title": "Il giorno della tua uscita",
  "second-content": "<ol><li>Presentati all'entrata del parcheggio prenotato e avvicinati alla colonnina.</li><li>Posiziona il QRcode, che trovi sulla tua prenotazione, sotto il lettore della colonnina e attendi la lettura del codice.</li><li>Ritira il biglietto d’ingresso, attendi l'apertura della sbarra ed entra.</li></ol>",
  "table-cnt-modifier": "c-table_cnt--noSlide",
  "table-head": [
    {
      "head-title": "Puoi pagare"
    },
    {
      "head-title": "Dove"
    },
    {
      "head-title": "Quando"
    },
    {
      "head-title": "Prenota",
      "modifier": "u-visuallyhidden"
    }
  ],
  "table-rows": [
    {
      "table-cols": [
        {
          "col-data-label": "Puoi pagare",
          "col-content": "Online (carta di credito)"
        },
        {
          "col-data-label": "Dove",
          "col-content": "sul sito dell’aeroporto (Pc, Tablet, Smartphone)"
        },
        {
          "col-data-label": "Quando",
          "col-content": "fino a 6 ore dall’ingresso al parcheggio"
        },
        {
          "col-data-label": "Prenota",
          "col-content": "<a href=\"#\"><strong>Prenota ora</strong></a>"
        }
      ]
    }
  ],
  "suggestion": {
    "modifier": "c-suggestion--pale",
    "hasImage": true,
    "img-src": "/images/svgs/stk_fatturazione.svg",
    "text": "<strong>Hai bisogno della fattura?</strong><p>Se paghi la sosta online puoi richiedere la fattura solo durante l'acquisto e ti sarà inviata via mail. In caso di sosta più lunga rispetto a quella già corrisposta, l'eventuale eccedenza dovrà essere pagata (e richiesta fattura) in Aeroporto presso il Presidio parcheggi.</p>"
  }
}
  • Content:
    .c-postcard {
      background-color: #fff;
      padding: remify(24px);
      position: relative;
      margin-bottom: remify(48px);
      @include shadow(medium);
    
      main & {
        grid-column: main;
      }
    
      @include min-screen(bp(tablet)) {
        padding: remify(48px);
      }
      
      @include min-screen(bp(tablet-l)) {
        margin-bottom: remify(140px);
      }
    
      &:last-child {
        margin-bottom: 0;
      }
    
      h2 {
        color: primary(sky, 120);
        font-size: 150%;
        line-height: 1.333;
        margin-bottom: remify(16px);
        
        @include min-screen(bp(tablet)) {
          font-size: 200%;
          line-height: 1.25;
        }
    
      }
    
      h3 {
        color: primary(night, 120);
        font-weight: fw(bold);
        margin-bottom: remify(32px);
        
        a {
          font-weight: fw(regular);
        }
        
        @include min-screen(bp(tablet)) {
          font-size: 125%;
          line-height: 1.4;
          margin-bottom: remify(48px);
        }
      }
    
    }
    
    .c-postcard__body {
    
      margin-bottom: remify(32px);
    
      @include min-screen(bp(tablet)) {
        display: flex;
      }
    
      .content {
        margin-right: remify(16px);
        margin-bottom: remify(24px);
        width: 100%;
    
        &:last-child {
          margin-right: 0;
        }
        
        @include min-screen(bp(tablet)) {
          width: 50%;
          margin-bottom: 0;
        }
    
        .is-block {
          margin-bottom: remify(8px);
          display: block;
        }
    
        ol {
          list-style-position: inside;
        }
    
        li {
          margin-bottom: remify(8px);
        }
    
      }
    
    }
  • URL: /components/raw/postcard/_postcard.scss
  • Filesystem Path: src/views/03-organisms/postcard/_postcard.scss
  • Size: 1.4 KB

No notes defined.