icon-with-text.liquid

{{ 'tzn-section-icon-with-text.css' | asset_url | stylesheet_tag }}

<div class="  {{ section.settings.custom_class }} icon-with-text icon-text-{{ section.id }}" >
  <div class="page-width">
    <div class="icon-with-text-wrapper">
      {% if section.settings.heading != blank %}
      <div class="section-heading">
        <h3>{{ section.settings.heading }}</h3>
      </div>
      {% endif %}
      <div class="swiper icon-with-text-slider">
          <div class="swiper-wrapper">
            {% for block in section.blocks %}
              <div class="icon-with-text-item swiper-slide">
                <div class="icon">
                  {% if block.settings.html_icon !=blank %}
                    {{ block.settings.html_icon }}
                  {% else %}
                    {% if block.settings.image_icon != blank %}
                      <img src="{{ block.settings.image_icon | img_url: 'master' }}" alt="{{ block.settings.image_icon.alt }}" width="" height="">
                    {% endif %}  
                  {% endif %}
                </div>
                <div class="icon-text">{{ block.settings.text }}</div>
              </div>
            {% endfor %}
          </div>
      </div>
      <!-- buttons -->
      <div class="swiper-buttons">
        <div class="swiper-button swiper-button-prev icon-with-text-button-prev"> 
            
        </div>
       <div class="swiper-button swiper-button-next icon-with-text-button-next">
         
       </div>
      </div>
      <!-- buttons -->            
    </div>
  </div>
</div>
{% if section.settings.bg-color != blank %}                  
<style>
  .icon-text-{{ section.id }} {
    background-color: {{ section.settings.bg-color }};
  }
</style>
{% endif %}                  
{% schema %}
  {
    "name": "Icon with text",
    "tag": "section",
    "class": "section section-icon-with-text",
    "settings": [
       {
      "type": "text",
      "id": "custom_class",
      "label": "Custom Class",
      "info": "Add a custom CSS class to the banner."
      },
      
      {
        "type":"color",
        "id":"bg-color",
        "label":"Background color"
      },
      {
        "type": "inline_richtext",
        "id": "heading",
        "label": "Heading"
      }
    ],
     "blocks": [
        {
        "type": "block",
        "name": "Block",
        "settings": [
          {
            "type": "html",
            "id": "html_icon",
            "label": "GIF icon"
          },
          {
            "type": "image_picker",
            "id": "image_icon",
            "label": "Upload icon image"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Icon with text"
      }
    ]
  }
{% endschema %}

.icon-with-text {
    padding: 3.3rem 0;
}
.icon-with-text-slider .icon {
    line-height: 0;
    max-width: 2.438rem;
    margin: 0 auto;
    margin-bottom: .625rem;
}
.icon-with-text .icon-text{
    text-align: center;
}
.icon-with-text .icon-text p strong {
    font-weight: normal;
    font-family: var(--heading-font-bold);
    letter-spacing: 0;
    font-size: 1.06rem;
}
.icon-with-text .icon-text p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.06rem;
    letter-spacing: 0;
    font-family: var(--text-font-medium);
}
.icon-with-text  .swiper-buttons {
    display: none;
}
@media screen and (max-width: 849px){
  .icon-with-text .icon-text p,
  .icon-with-text .icon-text p strong {
    font-size: 15px;
  }
  .icon-with-text {
    padding-bottom: 30px;
  }
}