<div class="c-contact-strip ">

    <div class="c-contact-strip__el">
        <img src="/images/cotabo-logo.jpg" alt="Cotabo">
    </div>
    <div class="c-contact-strip__el">
        <p>Società: <strong>Cotabo</strong><br>Telefono: <strong>051 1234567</strong></p>
    </div>
    <div class="c-contact-strip__el">
        <a href="#">Visita il sito <span aria-hidden="true">&#8594;</span></a>
    </div>

</div>
<div class="c-contact-strip {{ modifier }}">

  {{#each elements}}
  <div class="c-contact-strip__el">
    {{{ this.raw-content }}}
  </div>
  {{/each}}
  
</div>
{
  "logo": {
    "path": "/images/flight-companies/aegean-scheda-compagnia.png",
    "alt": "Aegean"
  },
  "small-text": "Codice: A3",
  "strong-text": "Aegean Airlines",
  "body-contact-info": "<p>Call center: 069 7150532-33 <a href=\"#\">www.aegeanair.com</a></p>",
  "link": {
    "url": "#",
    "text": "Scopri le destinazioni <span aria-hidden=\"true\">&#8594;</span>"
  },
  "elements": [
    {
      "raw-content": "<img src=\"/images/cotabo-logo.jpg\" alt=\"Cotabo\">"
    },
    {
      "raw-content": "<p>Società: <strong>Cotabo</strong><br>Telefono: <strong>051 1234567</strong></p>"
    },
    {
      "raw-content": "<a href=\"#\">Visita il sito <span aria-hidden=\"true\">&#8594;</span></a>"
    }
  ]
}
  • Content:
    .c-contact-strip {
      padding: remify(16px);
      background-color: secondary(soft, 100);
      border: 1px solid primary(night, 20);
      border-radius: remify(16px);
      @include shadow(medium);
      text-align: center;
    
       @include min-screen(bp(tablet)) {
        text-align: left;
      }
    
      .c-contact-strip__wrapper {
        @include min-screen(bp(tablet)) {
          display: flex;
          flex: 1;
          justify-content: space-between;
        }
      }
    
      main & {
        grid-column: main;
      }
    
      .c-canvas & {
        margin-bottom: remify(16px);
      }
    
      .c-rounded-label {
        margin: 0 auto remify(8px);
        line-height: 1;
    
        @include min-screen(bp(tablet)) {
          margin-bottom: remify(4px);
        }
    
        .icon {
          font-size: remify(24px);
          transform: rotate(-90deg);
          vertical-align: middle;
          margin-right: remify(4px);
        }
        strong {
          @include font-scale(level-1, bold);
        }
      }
      .c-contact-strip__el {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: remify(16px);
    
        @include min-screen(bp(tablet)) {
          margin-bottom: 0;
          flex: 1;
          flex-direction: row;
          justify-content: flex-start;
          padding: 0 remify(8px);
    
          &.is-last {
            justify-content: flex-end;
          }
        }
    
        &:last-child {
          margin-bottom: 0;
        }
        
        a {
          color: primary(night, 120);
        }
    
      }
    
      figure {
        margin-right: remify(16px);
      }
    
      figcaption {
        font-size: 75%;
        text-align: center;
        margin-top: remify(4px);
      }
    
    }
    
    .c-contact-strip + .c-contact-strip {
      margin-top: remify(16px);
    }
  • URL: /components/raw/contact-strip/_contact-strip.scss
  • Filesystem Path: src/views/02-molecules/contact-strip/_contact-strip.scss
  • Size: 1.6 KB

No notes defined.