{"id":2560,"date":"2014-02-08T21:03:57","date_gmt":"2014-02-08T21:03:57","guid":{"rendered":"http:\/\/localhost:8888\/test\/?page_id=2560"},"modified":"2014-02-08T21:03:57","modified_gmt":"2014-02-08T21:03:57","slug":"shortcode-ux-banner-grid","status":"publish","type":"page","link":"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/","title":{"rendered":"Shortcode &#8211; UX Banner grid"},"content":{"rendered":"<h3 class=\"section-title clearfix  \"> <span>Banner Grid<\/span> <\/h3><!-- end section_title -->\n    <div id=\"banner_grid_839855661\">\n    <div class=\"row\">\n      <div class=\"large-12 columns\">\n        <div class=\"row collapse ux_banner-grid ux_banner-grid-new\">\n             \n\n<div class=\"small-12    large-6  columns   \"  ><div class=\"column-inner\"  >\n   <div id=\"banner_226079719\" class=\"ux_banner light     \"  style=\"height:600px; background-color:#333\" data-height=\"600px\" role=\"banner\">\n      <a href=\"#\" >                            <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner left bottom text-left \"  style=\"width:40%;\">\n            <div class=\"inner-wrap animated fadeIn\" style=\" \">\n              <h3 class=\"alt-font\">Women Tank Tops<\/h3>\n<div class=\"tx-div medium\"><\/div>\n<h1 class=\"animated fadeInLeft uppercase\">HOT Summer Singlet<\/h1>\n<h3 class=\"animated fadeInRight\">Now 19$<\/h3>\n<div class=\"tx-div medium\"><\/div>\n<a href=\"http:\/\/\" class=\"button  alt-button primary\" >Shop now<\/a>\n            <\/div>\n          <\/div>  \n        <\/div>\n       <\/a>              <\/div><!-- end .ux_banner -->\n\n<\/div><\/div>\n\n<div class=\"small-12    large-3  columns   \"  ><div class=\"column-inner\"  >\n   <div id=\"banner_635438382\" class=\"ux_banner dark    hover_fade \"  style=\"height:600px; background-color:#333\" data-height=\"600px\" role=\"banner\">\n      <a href=\"#\" >                            <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:60%;\">\n            <div class=\"inner-wrap animated fadeIn\" style=\" \">\n              <h2 class=\"alt-font\">Summer<\/h2>\n<div class=\"tx-div medium\"><\/div>\n<h1 class=\"animated fadeInRight\">SALE STARTS TODAY<\/h1>\n<div class=\"tx-div medium\"><\/div>\n            <\/div>\n          <\/div>  \n        <\/div>\n       <\/a>              <\/div><!-- end .ux_banner -->\n\n<\/div><\/div>\n\n<div class=\"small-12    large-3  columns   \"  ><div class=\"column-inner\"  >\n   <div id=\"banner_1563392818\" class=\"ux_banner dark    hover_fade \"  style=\"height:292px; background-color:#333\" data-height=\"292px\" role=\"banner\">\n      <a href=\"#\" >                            <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:60%;\">\n            <div class=\"inner-wrap animated fadeIn\" style=\" \">\n              <h1 class=\"animated fadeInLeft uppercase\">NEW JEANS IN STOCK<\/h1>\n<div class=\"tx-div medium\"><\/div>\n            <\/div>\n          <\/div>  \n        <\/div>\n       <\/a>              <\/div><!-- end .ux_banner -->\n\n<\/div><\/div>\n\n<div class=\"small-12    large-3  columns   \"  ><div class=\"column-inner\"  >\n   <div id=\"banner_2090728410\" class=\"ux_banner dark    hover_fade \"  style=\"height:292px; background-color:#333\" data-height=\"292px\" role=\"banner\">\n      <a href=\"#\" >                            <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:60%;\">\n            <div class=\"inner-wrap animated fadeIn\" style=\" \">\n              <h1 class=\"animated fadeInLeft uppercase\">SHOP MEN SALE<\/h1>\n<div class=\"tx-div medium\"><\/div>\n            <\/div>\n          <\/div>  \n        <\/div>\n       <\/a>              <\/div><!-- end .ux_banner -->\n\n<\/div><\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n    <script>\n  jQuery(document).ready(function ($) {\n      var $container = $(\"#banner_grid_839855661 .ux_banner-grid\");\n      $container.packery({\n        itemSelector: \".columns\",\n        gutter: 0\n      });\n   });\n  <\/script>\n  <\/div><!-- #banner-grid -->\n  \n  \n<pre>\n&#091;ux_banner_grid]\n\n&#091;col span=\"6\"]\n&#091;ux_banner height=\"600px\" bg=\"\"] &#091;\/ux_banner]\n&#091;\/col]\n\n&#091;col span=\"3\" ]\n&#091;ux_banner height=\"600px\" bg=\"\"] &#091;\/ux_banner]\n&#091;\/col]\n\n&#091;col span=\"3\" ]\n&#091;ux_banner height=\"292px\" bg=\"\"] &#091;\/ux_banner]\n&#091;\/col]\n\n&#091;col span=\"3\"]\n&#091;ux_banner height=\"292px\" bg=\"\"] &#091;\/ux_banner]\n&#091;\/col]\n\n&#091;\/ux_banner_grid]<\/pre>\n<p><h3 class=\"section-title clearfix  \"> <span>3-column Banner Row<\/span> <\/h3><!-- end section_title --><br \/>\n\t<div  class=\"row container \">\n\n<div class=\"small-12    large-4  columns   \"  ><div class=\"column-inner\"  >\n   <div id=\"banner_1108204233\" class=\"ux_banner dark    hover_zoom \"  style=\"height:160px; background-color:#333\" data-height=\"160px\" role=\"banner\">\n      <a href=\"http:\/\/localhost:8888\/test\/blog\/\" >                            <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:60%;\">\n            <div class=\"inner-wrap animated fadeIn\" style=\" \">\n              <h2 class=\"uppercase\">Weekly Giveaway<\/h2>\n<div class=\"tx-div small\"><\/div>\n            <\/div>\n          <\/div>  \n        <\/div>\n       <\/a>              <\/div><!-- end .ux_banner -->\n\n<\/div><\/div>\n\n<div class=\"small-12    large-4  columns   \"  ><div class=\"column-inner\"  >\n   <div id=\"banner_1926375097\" class=\"ux_banner dark    hover_zoom \"  style=\"height:160px; background-color:#333\" data-height=\"160px\" role=\"banner\">\n      <a href=\"http:\/\/localhost:8888\/test\/blog\/\" >                            <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:60%;\">\n            <div class=\"inner-wrap animated fadeIn\" style=\" \">\n              <h2 class=\"uppercase\">Join our  competition<\/h2>\n<div class=\"tx-div small\"><\/div>\n            <\/div>\n          <\/div>  \n        <\/div>\n       <\/a>              <\/div><!-- end .ux_banner -->\n\n<\/div><\/div>\n\n<div class=\"small-12    large-4  columns   \"  ><div class=\"column-inner\"  >\n   <div id=\"banner_1447707045\" class=\"ux_banner dark    hover_zoom \"  style=\"height:160px; background-color:#333\" data-height=\"160px\" role=\"banner\">\n      <a href=\"http:\/\/localhost:8888\/test\/pages\/about-us\/\" >                            <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:60%;\">\n            <div class=\"inner-wrap animated fadeIn\" style=\" \">\n              <h2 class=\"uppercase\">ABOUT US<\/h2>\n<div class=\"tx-div small\"><\/div>\n            <\/div>\n          <\/div>  \n        <\/div>\n       <\/a>              <\/div><!-- end .ux_banner -->\n\n<\/div><\/div>\n\n<\/div>\n  <\/p>\n<pre>\n&#091;row]\n\n&#091;col span=1\/3]\n&#091;ux_banner link=\"http:\/\/localhost:8888\/test\/blog\/\" bg=\"http:\/\/imageurl\" hover=\"zoom\" height=\"160px\"]\n&lt;h2 class=\"uppercase\">Weekly Giveaway&lt;\/h2>\n___\n&#091;\/ux_banner]\n&#091;\/col]\n\n&#091;col  span=1\/3]\n&#091;ux_banner link=\"http:\/\/localhost:8888\/test\/blog\/\" bg=\"http:\/\/imageurl\" hover=\"zoom\" height=\"160px\"]\n&lt;h2 class=\"uppercase\">Join our  competition&lt;\/h2>\n___\n&#091;\/ux_banner]\n&#091;\/col]\n\n&#091;col span=1\/3]\n&#091;ux_banner link=\"http:\/\/localhost:8888\/test\/pages\/about-us\/\" bg=\"http:\/\/imageurl\" hover=\"zoom\" height=\"160px\"]\n&lt;h2 class=\"uppercase\">ABOUT US &lt;\/h2>\n___\n&#091;\/ux_banner]\n&#091;\/col]\n\n&#091;\/row]<\/pre>\n<h3 class=\"section-title clearfix  \"> <span>Banner Grid Style with slider<\/span> <\/h3><!-- end section_title -->\n    <div id=\"banner_grid_203325603\">\n    <div class=\"row\">\n      <div class=\"large-12 columns\">\n        <div class=\"row collapse ux_banner-grid ux_banner-grid-new\">\n             \n\n<div class=\"small-12    large-9  columns   \"  ><div class=\"column-inner\"  >\n \n<div class=\"ux-slider-wrapper relative\">\n    <div class=\"ux-slider iosSlider  slider-style-normal  slider-nav-dark slider-nav-inside slider-nav-circle js-flickity\" \n        data-flickity-options='{ \n            \"cellAlign\": \"center\",\n            \"imagesLoaded\": true,\n            \"lazyLoad\": 1,\n            \"freeScroll\": false,\n            \"wrapAround\": true,\n            \"autoPlay\": 6000,\n            \"prevNextButtons\": true,\n            \"contain\" : true,\n            \"percentPosition\": true,\n            \"pageDots\": true,\n            \"selectedAttraction\" : 0.1,\n            \"friction\": 0.6,\n            \"rightToLeft\": false        }'\n        style=\"\"\n        >\n        \r\n\r\n   <div id=\"banner_1011726714\" class=\"ux_banner dark     \"  style=\"height:600px; background-color:#333\" data-height=\"600px\" role=\"banner\">\n                                  <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/12\/THANN-Philosophy-1400-x-600-pixel.jpg'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/12\/THANN-Philosophy-1400-x-600-pixel.jpg\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/12\/THANN_Philosophy_640_x_400_pixel.jpg'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/12\/THANN_Philosophy_640_x_400_pixel.jpg\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:80%;\">\n            <div class=\"inner-wrap animated flipInX\" style=\" \">\n                          <\/div>\n          <\/div>  \n        <\/div>\n                     <style>\n              @media only screen and (max-width: 767px) { #banner_1011726714{ height:400px!important} }               <\/style>\n              <\/div><!-- end .ux_banner -->\n\r\n   <div id=\"banner_1498452795\" class=\"ux_banner dark     \"  style=\"height:600px; background-color:#333\" data-height=\"600px\" role=\"banner\">\n                                  <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/11\/NEW-Online-Store-Signature-EDT_1400-x-600-px.jpg'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/11\/NEW-Online-Store-Signature-EDT_1400-x-600-px.jpg\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/11\/NEW_Online_Store_-_Signature_EDT_640_x_400_px.jpg'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/11\/NEW_Online_Store_-_Signature_EDT_640_x_400_px.jpg\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:80%;\">\n            <div class=\"inner-wrap animated flipInX\" style=\" \">\n                          <\/div>\n          <\/div>  \n        <\/div>\n                     <style>\n              @media only screen and (max-width: 767px) { #banner_1498452795{ height:400px!important} }               <\/style>\n              <\/div><!-- end .ux_banner -->\n\r\n\r\n     <\/div>\n    <div class=\"ux-loading dark\"><\/div>\n<\/div><!-- .ux-slider-wrapper -->\n\n\n<\/div><\/div>\n\n<div class=\"small-12    large-3  columns   \"  ><div class=\"column-inner\"  >\n   <div id=\"banner_1023449126\" class=\"ux_banner dark    hover_fade \"  style=\"height:292px; background-color:#333\" data-height=\"292px\" role=\"banner\">\n      <a href=\"#\" >                            <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:60%;\">\n            <div class=\"inner-wrap animated fadeIn\" style=\" \">\n              <h1 class=\"animated fadeInLeft uppercase\">NEW JEANS IN STOCK<\/h1>\n<div class=\"tx-div medium\"><\/div>\n            <\/div>\n          <\/div>  \n        <\/div>\n       <\/a>              <\/div><!-- end .ux_banner -->\n\n<\/div><\/div>\n\n<div class=\"small-12    large-3  columns   \"  ><div class=\"column-inner\"  >\n   <div id=\"banner_315065786\" class=\"ux_banner dark    hover_fade \"  style=\"height:292px; background-color:#333\" data-height=\"292px\" role=\"banner\">\n      <a href=\"#\" >                            <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:60%;\">\n            <div class=\"inner-wrap animated fadeIn\" style=\" \">\n              <h1 class=\"animated fadeInLeft uppercase\">SHOP MEN SALE<\/h1>\n<div class=\"tx-div medium\"><\/div>\n            <\/div>\n          <\/div>  \n        <\/div>\n       <\/a>              <\/div><!-- end .ux_banner -->\n\n<\/div><\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n    <script>\n  jQuery(document).ready(function ($) {\n      var $container = $(\"#banner_grid_203325603 .ux_banner-grid\");\n      $container.packery({\n        itemSelector: \".columns\",\n        gutter: 0\n      });\n   });\n  <\/script>\n  <\/div><!-- #banner-grid -->\n  \n  \n<pre>\n&#091;ux_banner_grid]\n\n&#091;col span=\"9\"]\n\n&#091;ux_slider]\n&#091;ux_banner bg=\"imageurl\" height=\"600px\" link=\"\" animation=\"flipInX\" text_align=\"center\" text_pos=\"center\" text_color=\"light\" text_width=\"80%\" ]\nSlide content\n&#091;\/ux_banner]\n\n&#091;ux_banner bg=\"imageurl\" height=\"600px\" link=\"\" animation=\"flipInX\" text_align=\"center\" text_pos=\"center\" text_color=\"light\" text_width=\"80%\" ]\nSlide content\n&#091;\/ux_banner]\n\n&#091;\/ux_slider]\n&#091;\/col]\n\n&#091;col span=\"3\" ]\n&#091;ux_banner height=\"292px\" link=\"#\" bg=\"http:\/\/imageurl\" hover=\"fade\"]\n&lt;h1 class=\"animated fadeInLeft uppercase\">NEW JEANS IN STOCK&lt;\/h1>\n____\n&#091;\/ux_banner]\n&#091;\/col]\n\n&#091;col span=\"3\"]\n&#091;ux_banner height=\"292px\" link=\"#\" bg=\"http:\/\/imageurl\" hover=\"fade\"]\n&lt;h1 class=\"animated fadeInLeft uppercase\">SHOP MEN SALE&lt;\/h1>\n____\n&#091;\/ux_banner]\n&#091;\/col]\n\n&#091;\/ux_banner_grid]\n<\/pre>\n<h3 class=\"section-title clearfix  \"> <span>Banner Grid Style with slider<\/span> <\/h3><!-- end section_title -->\n    <div id=\"banner_grid_88647769\">\n    <div class=\"row\">\n      <div class=\"large-12 columns\">\n        <div class=\"row collapse ux_banner-grid ux_banner-grid-new\">\n             \n\n<div class=\"small-12    large-6  columns   \"  ><div class=\"column-inner\"  >\n \n<div class=\"ux-slider-wrapper relative\">\n    <div class=\"ux-slider iosSlider  slider-style-normal  slider-nav-dark slider-nav-inside slider-nav-circle js-flickity\" \n        data-flickity-options='{ \n            \"cellAlign\": \"center\",\n            \"imagesLoaded\": true,\n            \"lazyLoad\": 1,\n            \"freeScroll\": false,\n            \"wrapAround\": true,\n            \"autoPlay\": 6000,\n            \"prevNextButtons\": true,\n            \"contain\" : true,\n            \"percentPosition\": true,\n            \"pageDots\": true,\n            \"selectedAttraction\" : 0.1,\n            \"friction\": 0.6,\n            \"rightToLeft\": false        }'\n        style=\"\"\n        >\n        \r\n\r\n   <div id=\"banner_837928067\" class=\"ux_banner dark     \"  style=\"height:600px; background-color:#333\" data-height=\"600px\" role=\"banner\">\n                                  <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/12\/THANN-Philosophy-1400-x-600-pixel.jpg'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/12\/THANN-Philosophy-1400-x-600-pixel.jpg\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/12\/THANN_Philosophy_640_x_400_pixel.jpg'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/12\/THANN_Philosophy_640_x_400_pixel.jpg\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:80%;\">\n            <div class=\"inner-wrap animated flipInX\" style=\" \">\n                          <\/div>\n          <\/div>  \n        <\/div>\n                     <style>\n              @media only screen and (max-width: 767px) { #banner_837928067{ height:400px!important} }               <\/style>\n              <\/div><!-- end .ux_banner -->\n\r\n   <div id=\"banner_259369239\" class=\"ux_banner dark     \"  style=\"height:600px; background-color:#333\" data-height=\"600px\" role=\"banner\">\n                                  <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/11\/NEW-Online-Store-Signature-EDT_1400-x-600-px.jpg'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/11\/NEW-Online-Store-Signature-EDT_1400-x-600-px.jpg\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/11\/NEW_Online_Store_-_Signature_EDT_640_x_400_px.jpg'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/11\/NEW_Online_Store_-_Signature_EDT_640_x_400_px.jpg\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:80%;\">\n            <div class=\"inner-wrap animated flipInX\" style=\" \">\n                          <\/div>\n          <\/div>  \n        <\/div>\n                     <style>\n              @media only screen and (max-width: 767px) { #banner_259369239{ height:400px!important} }               <\/style>\n              <\/div><!-- end .ux_banner -->\n\r\n\r\n     <\/div>\n    <div class=\"ux-loading dark\"><\/div>\n<\/div><!-- .ux-slider-wrapper -->\n\n\n<\/div><\/div>\n\n<div class=\"small-12    large-3  columns   \"  ><div class=\"column-inner\"  >\n   <div id=\"banner_131218792\" class=\"ux_banner dark    hover_fade \"  style=\"height:600px; background-color:#333\" data-height=\"600px\" role=\"banner\">\n      <a href=\"#\" >                            <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:60%;\">\n            <div class=\"inner-wrap animated fadeIn\" style=\" \">\n              <h1 class=\"animated fadeInLeft uppercase\">SPRING IS SOON HERE<\/h1>\n<div class=\"tx-div medium\"><\/div>\n            <\/div>\n          <\/div>  \n        <\/div>\n       <\/a>              <\/div><!-- end .ux_banner -->\n\n<\/div><\/div>\n\n<div class=\"small-12    large-3  columns   \"  ><div class=\"column-inner\"  >\n   <div id=\"banner_497974082\" class=\"ux_banner dark    hover_fade \"  style=\"height:292px; background-color:#333\" data-height=\"292px\" role=\"banner\">\n      <a href=\"#\" >                            <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:60%;\">\n            <div class=\"inner-wrap animated fadeIn\" style=\" \">\n              <h1 class=\"animated fadeInLeft uppercase\">NEW JEANS IN STOCK<\/h1>\n<div class=\"tx-div medium\"><\/div>\n            <\/div>\n          <\/div>  \n        <\/div>\n       <\/a>              <\/div><!-- end .ux_banner -->\n\n<\/div><\/div>\n\n<div class=\"small-12    large-3  columns   \"  ><div class=\"column-inner\"  >\n   <div id=\"banner_351185177\" class=\"ux_banner dark    hover_fade \"  style=\"height:292px; background-color:#333\" data-height=\"292px\" role=\"banner\">\n      <a href=\"#\" >                            <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url('https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif'); background-color:#333\"><img decoding=\"async\" src=\"https:\/\/www.thann.co.th\/wp-content\/uploads\/2013\/08\/dummy.gif\"  alt=\"\" style=\"visibility:hidden;\" \/><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:60%;\">\n            <div class=\"inner-wrap animated fadeIn\" style=\" \">\n              <h1 class=\"animated fadeInLeft uppercase\">SHOP MEN SALE<\/h1>\n<div class=\"tx-div medium\"><\/div>\n            <\/div>\n          <\/div>  \n        <\/div>\n       <\/a>              <\/div><!-- end .ux_banner -->\n\n<\/div><\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n    <script>\n  jQuery(document).ready(function ($) {\n      var $container = $(\"#banner_grid_88647769 .ux_banner-grid\");\n      $container.packery({\n        itemSelector: \".columns\",\n        gutter: 0\n      });\n   });\n  <\/script>\n  <\/div><!-- #banner-grid -->\n  \n  \n<pre>\n&#091;ux_banner_grid]\n\n&#091;col span=\"6\"]\n\n&#091;ux_slider]\n&#091;ux_banner bg=\"imageurl\" height=\"600px\" link=\"\" animation=\"flipInX\" text_align=\"center\" text_pos=\"center\" text_color=\"light\" text_width=\"80%\" ]\nSlide content\n&#091;\/ux_banner]\n\n&#091;ux_banner bg=\"imageurl\" height=\"600px\" link=\"\" animation=\"flipInX\" text_align=\"center\" text_pos=\"center\" text_color=\"light\" text_width=\"80%\" ]\nSlide content\n&#091;\/ux_banner]\n\n&#091;\/ux_slider]\n&#091;\/col]\n\n&#091;col span=\"3\" ]\n&#091;ux_banner height=\"600px\" link=\"#\" bg=\"http:\/\/imageurl\" hover=\"fade\"]\n&lt;h1 class=\"animated fadeInLeft uppercase\">NEW JEANS IN STOCK&lt;\/h1>\n____\n&#091;\/ux_banner]\n&#091;\/col]\n\n&#091;col span=\"3\" ]\n&#091;ux_banner height=\"292px\" link=\"#\" bg=\"http:\/\/imageurl\" hover=\"fade\"]\n&lt;h1 class=\"animated fadeInLeft uppercase\">NEW JEANS IN STOCK&lt;\/h1>\n____\n&#091;\/ux_banner]\n&#091;\/col]\n\n&#091;col span=\"3\"]\n&#091;ux_banner height=\"292px\" link=\"#\" bg=\"http:\/\/imageurl\" hover=\"fade\"]\n&lt;h1 class=\"animated fadeInLeft uppercase\">SHOP MEN SALE&lt;\/h1>\n____\n&#091;\/ux_banner]\n&#091;\/col]\n\n&#091;\/ux_banner_grid]\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>&#091;ux_banner_grid] &#091;col span=&#8221;6&#8243;] &#091;ux_banner height=&#8221;600px&#8221; bg=&#8221;&#8221;] &#091;\/ux_banner] &#091;\/col] &#091;col span=&#8221;3&#8243; ] &#091;ux_banner height=&#8221;600px&#8221; bg=&#8221;&#8221;] &#091;\/ux_banner] &#091;\/col] &#091;col span=&#8221;3&#8243; ] &#091;ux_banner height=&#8221;292px&#8221; bg=&#8221;&#8221;] &#091;\/ux_banner] &#091;\/col] &#091;col span=&#8221;3&#8243;] &#091;ux_banner height=&#8221;292px&#8221; bg=&#8221;&#8221;] &#091;\/ux_banner] &#091;\/col] &#091;\/ux_banner_grid] &#091;row] &#091;col span=1\/3] &#091;ux_banner link=&#8221;http:\/\/localhost:8888\/test\/blog\/&#8221; bg=&#8221;http:\/\/imageurl&#8221; hover=&#8221;zoom&#8221; height=&#8221;160px&#8221;] &lt;h2 class=&#8221;uppercase&#8221;>Weekly Giveaway&lt;\/h2> ___ &#091;\/ux_banner] &#091;\/col] &#091;col span=1\/3] &#091;ux_banner link=&#8221;http:\/\/localhost:8888\/test\/blog\/&#8221; bg=&#8221;http:\/\/imageurl&#8221; hover=&#8221;zoom&#8221; height=&#8221;160px&#8221;] &lt;h2 class=&#8221;uppercase&#8221;>Join [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":288,"menu_order":0,"comment_status":"open","ping_status":"open","template":"page-blank-title-center.php","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"acf":[],"aioseo_notices":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Shortcode - UX Banner grid - Thann<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Shortcode - UX Banner grid - Thann\" \/>\n<meta property=\"og:description\" content=\"&#091;ux_banner_grid] &#091;col span=&quot;6&quot;] &#091;ux_banner height=&quot;600px&quot; bg=&quot;&quot;] &#091;\/ux_banner] &#091;\/col] &#091;col span=&quot;3&quot; ] &#091;ux_banner height=&quot;600px&quot; bg=&quot;&quot;] &#091;\/ux_banner] &#091;\/col] &#091;col span=&quot;3&quot; ] &#091;ux_banner height=&quot;292px&quot; bg=&quot;&quot;] &#091;\/ux_banner] &#091;\/col] &#091;col span=&quot;3&quot;] &#091;ux_banner height=&quot;292px&quot; bg=&quot;&quot;] &#091;\/ux_banner] &#091;\/col] &#091;\/ux_banner_grid] &#091;row] &#091;col span=1\/3] &#091;ux_banner link=&quot;http:\/\/localhost:8888\/test\/blog\/&quot; bg=&quot;http:\/\/imageurl&quot; hover=&quot;zoom&quot; height=&quot;160px&quot;] &lt;h2 class=&quot;uppercase&quot;&gt;Weekly Giveaway&lt;\/h2&gt; ___ &#091;\/ux_banner] &#091;\/col] &#091;col span=1\/3] &#091;ux_banner link=&quot;http:\/\/localhost:8888\/test\/blog\/&quot; bg=&quot;http:\/\/imageurl&quot; hover=&quot;zoom&quot; height=&quot;160px&quot;] &lt;h2 class=&quot;uppercase&quot;&gt;Join [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"Thann\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/\",\"url\":\"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/\",\"name\":\"Shortcode - UX Banner grid - Thann\",\"isPartOf\":{\"@id\":\"https:\/\/www.thann.co.th\/en\/#website\"},\"datePublished\":\"2014-02-08T21:03:57+00:00\",\"dateModified\":\"2014-02-08T21:03:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.thann.co.th\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Shortcodes\",\"item\":\"https:\/\/www.thann.co.th\/en\/shortcodes\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Shortcode &#8211; UX Banner grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.thann.co.th\/en\/#website\",\"url\":\"https:\/\/www.thann.co.th\/en\/\",\"name\":\"Thann\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.thann.co.th\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Shortcode - UX Banner grid - Thann","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/","og_locale":"en_US","og_type":"article","og_title":"Shortcode - UX Banner grid - Thann","og_description":"&#091;ux_banner_grid] &#091;col span=\"6\"] &#091;ux_banner height=\"600px\" bg=\"\"] &#091;\/ux_banner] &#091;\/col] &#091;col span=\"3\" ] &#091;ux_banner height=\"600px\" bg=\"\"] &#091;\/ux_banner] &#091;\/col] &#091;col span=\"3\" ] &#091;ux_banner height=\"292px\" bg=\"\"] &#091;\/ux_banner] &#091;\/col] &#091;col span=\"3\"] &#091;ux_banner height=\"292px\" bg=\"\"] &#091;\/ux_banner] &#091;\/col] &#091;\/ux_banner_grid] &#091;row] &#091;col span=1\/3] &#091;ux_banner link=\"http:\/\/localhost:8888\/test\/blog\/\" bg=\"http:\/\/imageurl\" hover=\"zoom\" height=\"160px\"] &lt;h2 class=\"uppercase\">Weekly Giveaway&lt;\/h2> ___ &#091;\/ux_banner] &#091;\/col] &#091;col span=1\/3] &#091;ux_banner link=\"http:\/\/localhost:8888\/test\/blog\/\" bg=\"http:\/\/imageurl\" hover=\"zoom\" height=\"160px\"] &lt;h2 class=\"uppercase\">Join [&hellip;]","og_url":"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/","og_site_name":"Thann","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/","url":"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/","name":"Shortcode - UX Banner grid - Thann","isPartOf":{"@id":"https:\/\/www.thann.co.th\/en\/#website"},"datePublished":"2014-02-08T21:03:57+00:00","dateModified":"2014-02-08T21:03:57+00:00","breadcrumb":{"@id":"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-banner-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thann.co.th\/en\/"},{"@type":"ListItem","position":2,"name":"Shortcodes","item":"https:\/\/www.thann.co.th\/en\/shortcodes\/"},{"@type":"ListItem","position":3,"name":"Shortcode &#8211; UX Banner grid"}]},{"@type":"WebSite","@id":"https:\/\/www.thann.co.th\/en\/#website","url":"https:\/\/www.thann.co.th\/en\/","name":"Thann","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thann.co.th\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/pages\/2560"}],"collection":[{"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/comments?post=2560"}],"version-history":[{"count":0,"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/pages\/2560\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/pages\/288"}],"wp:attachment":[{"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/media?parent=2560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}