rebly-sections 1.0.1 → 1.2.0

package/assets/data/component-library/grid-banner-type-3-b.liquid

@@ -0,0 +1,655 @@
+<div data-section-id="{{ section.id }}" data-section-type="grid-banner-type-3-b" class="grid-banner-type-3-b">   
+    <div class="grid-uniform featuredItems">  
+
+      <div class="grid__item wide--one-half large--one-half post-large--one-half medium--one-half small--grid__item">
+        <div class="grid__item">
+          <div class="middle-top"> 
+
+            <div class="ovrly31 overlay_1">
+              {% if section.settings.link_1 != blank %}<a class="banner_half_img" href="{{ section.settings.link_1 }}">{% endif%}
+              {% if section.settings.image_1 != blank %}
+              <img src="{{ section.settings.image_1 | img_url: '1920X' }}" alt="{{ section.settings.title_1 }}" />
+              <div class="ovrly"></div>
+              {% else %}
+              <img src="//via.placeholder.com/900x570">
+              {% endif%}           
+              {% if section.settings.link_1 != blank %}  </a>
+
+              {% endif%}
+              <div class="featured-content">       
+                {% if section.settings.title_1 != blank %}
+                <h5 style="color:{{ section.settings.title_1_clr }};">{{ section.settings.title_1 }}</h5>
+                {% endif %}
+                {% if section.settings.text_1 != blank %}
+                <h2 style="color:{{ section.settings.text_1_clr }};">{{ section.settings.text_1}}</h2>    
+                {% endif %}  
+                {% if section.settings.button_1 != blank %}
+                <a class="btn one" href="{{ section.settings.link_1 }}" style="color:{{ section.settings.button_1_txt}};border:1px solid {{ section.settings.button_1_bg}};">{{ section.settings.button_1}}</a>    
+                {% endif %}         
+              </div>   
+            </div>
+
+          </div> 
+
+
+        </div>
+        <div class="grid__item">
+          <div class="grid__item wide--one-half large--one-half post-large--one-half medium--one-half small--grid__item" style="padding-left:0;">
+            <div class="ovrly31 overlay_2">
+              {% if section.settings.link_2 != blank %}<a class="banner_half_img" href="{{ section.settings.link_2 }}">{% endif%}
+              {% if section.settings.image_2 != blank %}
+              <img src="{{ section.settings.image_2 | img_url: '1920X' }}" alt="{{ section.settings.title_2 }}" />
+              <div class="ovrly"></div>
+              {% else %}
+
+              <img src="//via.placeholder.com/570x431">
+              {% endif%}           
+              {% if section.settings.link_2 != blank %}  </a>
+
+              {% endif%}
+              <div class="featured-content">       
+                {% if section.settings.title_2 != blank %}
+                <h5 style="color:{{ section.settings.title_2_clr }};">{{ section.settings.title_2 }}</h5>
+                {% endif %}
+                {% if section.settings.text_2 != blank %}
+                <h2 style="color:{{ section.settings.text_2_clr }};">{{ section.settings.text_2}}</h2>    
+                {% endif %}  
+                {% if section.settings.button_2 != blank %}
+                <a class="btn two" href="{{ section.settings.link_2 }}" style="color:{{ section.settings.button_2_txt}};border:1px solid {{ section.settings.button_2_bg}};">{{ section.settings.button_2}}</a>    
+                {% endif %}         
+              </div> 
+            </div>
+          </div>
+          <div class="grid__item wide--one-half large--one-half post-large--one-half medium--one-half small--grid__item" style="padding-right:0;">
+
+            <div class="ovrly31 overlay_3">
+              {% if section.settings.link_3 != blank %}<a class="banner_half_img" href="{{ section.settings.link_3 }}">{% endif%}
+              {% if section.settings.image_3 != blank %}
+              <img src="{{ section.settings.image_3 | img_url: '1920X' }}" alt="{{ section.settings.title_3 }}" />
+              <div class="ovrly"></div>
+              {% else %}
+
+              <img src="//via.placeholder.com/570x431">
+              {% endif%}           
+              {% if section.settings.link_3 != blank %}  </a>
+
+              {% endif%}
+              <div class="featured-content">        
+                {% if section.settings.title_3 != blank %}
+                <h5 style="color:{{ section.settings.title_3_clr }};">{{ section.settings.title_3 }}</h5>
+                {% endif %}
+                {% if section.settings.text_3 != blank %}
+                <h2 style="color:{{ section.settings.text_3_clr }};">{{ section.settings.text_3}}</h2>    
+                {% endif %}  
+                {% if section.settings.button_3 != blank %}
+                <a class="btn three" href="{{ section.settings.link_3 }}" style="color:{{ section.settings.button_3_txt}};border:1px solid {{ section.settings.button_3_bg}};">{{ section.settings.button_3}}</a>    
+                {% endif %}         
+              </div>  
+            </div>
+          </div>
+        </div>
+      </div>
+<div class="grid__item wide--one-half large--one-half post-large--one-half medium--one-half small--grid__item">
+      <div class="grid__item wide--one-half large--one-half post-large--one-half medium--one-half small--grid__item">
+        <div class="ovrly31 overlay_6">
+          {% if section.settings.link_6 != blank %}<a class="banner_half_img" href="{{ section.settings.link_6 }}">{% endif%}
+          {% if section.settings.image_6 != blank %}
+          <img src="{{ section.settings.image_6 | img_url: '1920X' }}" alt="{{ section.settings.title_6 }}" />
+          <div class="ovrly"></div>
+          {% else %}
+          <img src="//via.placeholder.com/470x970">
+          {% endif%}           
+          {% if section.settings.link_6 != blank %}  </a>
+
+          {% endif%}
+          <div class="featured-content">       
+            {% if section.settings.title_6 != blank %}
+            <h5 style="color:{{ section.settings.title_6_clr }};">{{ section.settings.title_6 }}</h5>
+            {% endif %}
+            {% if section.settings.text_6 != blank %}
+            <h2 style="color:{{ section.settings.text_6_clr }};">{{ section.settings.text_6}}</h2>    
+            {% endif %}  
+            {% if section.settings.button_6 != blank %}
+            <a class="btn one" href="{{ section.settings.link_6 }}" style="color:{{ section.settings.button_6_txt}};border:1px solid {{ section.settings.button_6_bg}};">{{ section.settings.button_6}}</a>    
+            {% endif %}         
+          </div>   
+        </div>
+      </div>
+      <div class="grid__item wide--one-half large--one-half post-large--one-half medium--one-half small--grid__item">
+
+        <div class="middle-top">  
+          <div class="ovrly31 overlay_4">
+            {% if section.settings.link_4 != blank %}<a class="banner_half_img" href="{{ section.settings.link_4 }}">{% endif%}
+            {% if section.settings.image_4 != blank %}
+            <img src="{{ section.settings.image_4 | img_url: '1920X' }}" alt="{{ section.settings.title_4 }}" />
+            <div class="ovrly"></div>
+            {% else %}
+
+            <img src="//via.placeholder.com/570x475">
+            {% endif%}           
+            {% if section.settings.link_4 != blank %}  </a>
+
+            {% endif%}
+            <div class="featured-content">       
+              {% if section.settings.title_4 != blank %}
+              <h5 style="color:{{ section.settings.title_4_clr }};">{{ section.settings.title_4 }}</h5>
+              {% endif %}
+              {% if section.settings.text_4 != blank %}
+              <h2 style="color:{{ section.settings.text_4_clr }};">{{ section.settings.text_4 }}</h2>    
+              {% endif %}  
+              {% if section.settings.button_4 != blank %}
+              <a class="btn four" href="{{ section.settings.link_4 }}" style="color:{{ section.settings.button_4_txt}};border:1px solid {{ section.settings.button_4_bg}};">{{ section.settings.button_4}}</a>    
+              {% endif %}            
+            </div>      
+          </div>
+        </div>   
+        <div class="middle-bottom">
+          <div class="ovrly31 overlay_5">
+            {% if section.settings.link_5 != blank %}<a class="banner_half_img" href="{{ section.settings.link_5 }}">{% endif%}
+            {% if section.settings.image_5 != blank %}
+            <img src="{{ section.settings.image_5 | img_url: '1920X' }}" alt="{{ section.settings.title_5 }}" />
+            <div class="ovrly"></div>
+            {% else %}
+
+            <img src="//via.placeholder.com/570x475">
+            {% endif%}           
+            {% if section.settings.link_5 != blank %}  </a>
+
+            {% endif%}
+            <div class="featured-content">       
+              {% if section.settings.title_5 != blank %}
+              <h5 style="color:{{ section.settings.title_5_clr }};">{{ section.settings.title_5 }}</h5>
+              {% endif %}
+              {% if section.settings.text_5 != blank %}
+              <h2 style="color:{{ section.settings.text_5_clr }};">{{ section.settings.text_5 }}</h2>    
+              {% endif %}  
+              {% if section.settings.button_5 != blank %}
+              <a class="btn four" href="{{ section.settings.link_5 }}" style="color:{{ section.settings.button_5_txt}};border:1px solid {{ section.settings.button_5_bg}};">{{ section.settings.button_5}}</a>    
+              {% endif %}            
+            </div>      
+          </div>
+        </div>
+      </div>
+      </div>
+
+
+
+      <style>
+        .grid-banner-type-3-b .featured-content .btn.four:hover { color:{{ section.settings.hover_button_4_txt}} !important;border-color:{{ section.settings.hover_button_4_bg}} !important; background:{{ section.settings.hover_button_4_bg}} !important; }
+        .grid-banner-type-3-b .featured-content .btn.three:hover { color:{{ section.settings.hover_button_3_txt}} !important;border-color:{{ section.settings.hover_button_3_bg}} !important; background:{{ section.settings.hover_button_3_bg}} !important; }
+        .grid-banner-type-3-b .featured-content .btn.two:hover { color:{{ section.settings.hover_button_2_txt}} !important;border-color:{{ section.settings.hover_button_2_bg}} !important; background:{{ section.settings.hover_button_2_bg}} !important; }
+        .grid-banner-type-3-b .featured-content .btn.one:hover { color:{{ section.settings.hover_button_1_txt}} !important;border-color:{{ section.settings.hover_button_1_bg}} !important; background:{{ section.settings.hover_button_1_bg}} !important; }
+        {% if section.settings.overlay1 %}  .grid-banner-type-3-b .ovrly31.overlay_1 .ovrly { background:{{ section.settings.overlay_1 | color_modify: 'alpha', 0.7 }};  }{% endif %}  
+        {% if section.settings.overlay2 %}  .grid-banner-type-3-b .ovrly31.overlay_2 .ovrly { background:{{ section.settings.overlay_2 | color_modify: 'alpha', 0.7 }};  }{% endif %}  
+        {% if section.settings.overlay3 %} .grid-banner-type-3-b .ovrly31.overlay_3 .ovrly { background:{{ section.settings.overlay_3 | color_modify: 'alpha', 0.7 }};  }{% endif %}  
+        {% if section.settings.overlay4 %} .grid-banner-type-3-b .ovrly31.overlay_4 .ovrly { background:{{ section.settings.overlay_4 | color_modify: 'alpha', 0.7 }};  }{% endif %}  
+        {% if section.settings.overlay5 %} .grid-banner-type-3-b .ovrly31.overlay_5 .ovrly { background:{{ section.settings.overlay_5 | color_modify: 'alpha', 0.7 }};  }{% endif %}  
+         {% if section.settings.overlay6 %} .grid-banner-type-3-b .ovrly31.overlay_6 .ovrly { background:{{ section.settings.overlay_6 | color_modify: 'alpha', 0.7 }};  }{% endif %}  
+      </style>
+    </div>    
+</div>
+<div class="dt-sc-hr-invisible-large"></div>
+
+{% schema %}
+{
+"name": "Featured Collections",
+"class": "index-section",
+"settings": [
+
+{
+"type": "image_picker",
+"id": "image_2",
+"label": "Image",
+"info": "Size: 570x430"
+},
+
+{
+"type": "text",
+"id": "title_2",
+"label": "Heading"
+},
+{
+"type": "color",
+"id": "title_2_clr",
+"label": "Heading color",
+"default": "#000"
+},
+{
+"type": "textarea",
+"id": "text_2",
+"label": "Description"
+},
+{
+"type": "color",
+"id": "text_2_clr",
+"label": "Description color",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "button_2",
+"label": "Button text"
+},
+{
+"type": "color",
+"id": "button_2_bg",
+"label": "Button bg color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "button_2_txt",
+"label": "Button text color",
+"default": "#fff"
+},
+{
+"type": "color",
+"id": "hover_button_2_bg",
+"label": "Button hover bg",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "hover_button_2_txt",
+"label": "Button hover text",
+"default": "#fff"
+},
+{
+"type": "checkbox",
+"id": "overlay2",
+"label": "Overlay"
+
+},
+{
+"type": "color",
+"id": "overlay_2",
+"label": "Overlay",
+"default": "#fff"
+},
+{
+"type": "url",
+"id": "link_2",
+"label": "Link URL"
+},
+{
+"type": "image_picker",
+"id": "image_1",
+"label": "Image",
+"info": "Size: 570x985"
+},
+{
+"type": "text",
+"id": "title_1",
+"label": "Heading"
+},
+{
+"type": "color",
+"id": "title_1_clr",
+"label": "Heading color",
+"default": "#000"
+},
+{
+"type": "textarea",
+"id": "text_1",
+"label": "Description"
+},
+{
+"type": "color",
+"id": "text_1_clr",
+"label": "Description color",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "button_1",
+"label": "Button text"
+},
+{
+"type": "color",
+"id": "button_1_bg",
+"label": "Button bg color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "button_1_txt",
+"label": "Button text color",
+"default": "#fff"
+},
+{
+"type": "color",
+"id": "hover_button_1_bg",
+"label": "Button hover bg",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "hover_button_1_txt",
+"label": "Button hover text",
+"default": "#fff"
+},
+{
+"type": "checkbox",
+"id": "overlay1",
+"label": "Overlay"
+
+},
+{
+"type": "color",
+"id": "overlay_1",
+"label": "Overlay",
+"default": "#fff"
+},
+{
+"type": "url",
+"id": "link_1",
+"label": "Link URL"
+},
+{
+"type": "image_picker",
+"id": "image_3",
+"label": "Image",
+"info": "Size: 570x430"
+},
+
+{
+"type": "text",
+"id": "title_3",
+"label": "Heading"
+},
+{
+"type": "color",
+"id": "title_3_clr",
+"label": "Heading color",
+"default": "#000"
+},
+{
+"type": "textarea",
+"id": "text_3",
+"label": "Description"
+},
+{
+"type": "color",
+"id": "text_3_clr",
+"label": "Description color",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "button_3",
+"label": "Button text"
+},
+{
+"type": "color",
+"id": "button_3_bg",
+"label": "Button bg color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "button_3_txt",
+"label": "Button text color",
+"default": "#fff"
+},
+{
+"type": "color",
+"id": "hover_button_3_bg",
+"label": "Button hover bg",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "hover_button_3_txt",
+"label": "Button hover text",
+"default": "#fff"
+},
+{
+"type": "checkbox",
+"id": "overlay3",
+"label": "Overlay"
+
+},
+{
+"type": "color",
+"id": "overlay_3",
+"label": "Overlay",
+"default": "#fff"
+},
+{
+"type": "url",
+"id": "link_3",
+"label": "Link URL"
+},
+{
+"type": "image_picker",
+"id": "image_4",
+"label": "Image",
+"info": "Size: 410x310"
+},
+{
+"type": "text",
+"id": "title_4",
+"label": "Heading"
+},
+{
+"type": "color",
+"id": "title_4_clr",
+"label": "Heading color",
+"default": "#000"
+},
+{
+"type": "textarea",
+"id": "text_4",
+"label": "Description"
+},
+{
+"type": "color",
+"id": "text_4_clr",
+"label": "Description color",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "button_4",
+"label": "Button text"
+},
+{
+"type": "color",
+"id": "button_4_bg",
+"label": "Button bg color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "button_4_txt",
+"label": "Button text color",
+"default": "#fff"
+},
+{
+"type": "color",
+"id": "hover_button_4_bg",
+"label": "Button hover bg",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "hover_button_4_txt",
+"label": "Button hover text",
+"default": "#fff"
+},
+{
+"type": "checkbox",
+"id": "overlay4",
+"label": "Overlay"
+
+},
+{
+"type": "color",
+"id": "overlay_4",
+"label": "Overlay",
+"default": "#fff"
+},
+{
+"type": "url",
+"id": "link_4",
+"label": "Link URL"
+},
+{
+"type": "image_picker",
+"id": "image_5",
+"label": "Image",
+"info": "Size: 570x430"
+},
+{
+"type": "text",
+"id": "title_5",
+"label": "Heading"
+},
+{
+"type": "color",
+"id": "title_5_clr",
+"label": "Heading color",
+"default": "#000"
+},
+{
+"type": "textarea",
+"id": "text_5",
+"label": "Description"
+},
+{
+"type": "color",
+"id": "text_5_clr",
+"label": "Description color",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "button_5",
+"label": "Button text"
+},
+{
+"type": "color",
+"id": "button_5_bg",
+"label": "Button bg color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "button_5_txt",
+"label": "Button text color",
+"default": "#fff"
+},
+{
+"type": "color",
+"id": "hover_button_5_bg",
+"label": "Button hover bg",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "hover_button_5_txt",
+"label": "Button hover text",
+"default": "#fff"
+},
+{
+"type": "checkbox",
+"id": "overlay5",
+"label": "Overlay"
+
+},
+{
+"type": "color",
+"id": "overlay_5",
+"label": "Overlay",
+"default": "#fff"
+},
+{
+"type": "url",
+"id": "link_5",
+"label": "Link URL"
+},
+{
+"type": "image_picker",
+"id": "image_6",
+"label": "Image",
+"info": "Size: 570x985"
+},
+{
+"type": "text",
+"id": "title_6",
+"label": "Heading"
+},
+{
+"type": "color",
+"id": "title_6_clr",
+"label": "Heading color",
+"default": "#000"
+},
+{
+"type": "textarea",
+"id": "text_6",
+"label": "Description"
+},
+{
+"type": "color",
+"id": "text_6_clr",
+"label": "Description color",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "button_6",
+"label": "Button text"
+},
+{
+"type": "color",
+"id": "button_6_bg",
+"label": "Button bg color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "button_6_txt",
+"label": "Button text color",
+"default": "#fff"
+},
+{
+"type": "color",
+"id": "hover_button_6_bg",
+"label": "Button hover bg",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "hover_button_6_txt",
+"label": "Button hover text",
+"default": "#fff"
+},
+{
+"type": "checkbox",
+"id": "overlay6",
+"label": "Overlay"
+},
+{
+"type": "color",
+"id": "overlay_6",
+"label": "Overlay",
+"default": "#fff"
+},
+{
+"type": "url",
+"id": "link_6",
+"label": "Link URL"
+}
+],
+"presets": [
+{
+"name": "Featured Collections",
+"category": "Image"
+}
+]
+}
+{% endschema %}
+
+
+