{"id":41,"date":"2023-09-14T12:21:02","date_gmt":"2023-09-14T12:21:02","guid":{"rendered":"https:\/\/www.itu.int\/br-staging\/?page_id=41"},"modified":"2024-06-17T13:02:42","modified_gmt":"2024-06-17T09:02:42","slug":"block-test","status":"publish","type":"page","link":"https:\/\/www.itu.int\/br-staging\/","title":{"rendered":"Block preview"},"content":{"rendered":"\n    <section class=\"ituBanner bg countdown\">\n        <div class=\"bgContainer\">\n            <img decoding=\"async\" src=\"https:\/\/www.itu.int\/br-staging\/wp-content\/uploads\/sites\/33\/2023\/09\/giftshop-horiz.png\" alt=\"\" \/>\n            <div class=\"ituContainer\">\n                <div class=\"content\">\n                    <div class=\"main\">\n                        <script src=\"\"><\/script>\n                        <lottie-player src=\"\" background=\"transparent\" autoplay=\"\"><\/lottie-player>\n                                            <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n\n    <section class=\"ituBanner bg smallheight\">\n        <div class=\"bgContainer \">\n            <img src=https:\/\/www.itu.int\/br-staging\/wp-content\/uploads\/sites\/33\/2023\/09\/giftshop-horiz.png alt=\"Background decorative image\" \/>\n            <div class=\"ituContainer grid\">\n                <div class=\"content\" data-span=\"8\">\n                    <div class=\"main\">\n                        <h2 class=\"h1 white\">Banner main page<\/h2>\n                    <\/div>\n                    <div class=\"addInfo\"><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n\n<div class=\"ituContainer\">\n<h2 class=\"wp-block-heading\">Cards Icons<\/h2>\n<\/div>\n\n    <section>\n        <div class=\"ituContainer grid\">\n                                                            <div class=\"ituCard\" data-span=\"4\">\n                        <div class=\"content center\">\n                <div class=\"main\">\n                    <img decoding=\"async\" src=\"https:\/\/www.itu.int\/br-staging\/wp-content\/uploads\/sites\/33\/2023\/09\/Side-events.png\" class=\"icon\" alt=\"icon\" \/>\n                                            <p class=\"title\">Card text<\/p>\n                                                        <\/div>\n            <\/div>\n                    <\/div>\n    \n                                                            <div class=\"ituCard\" data-span=\"4\">\n                        <div class=\"content center\">\n                <div class=\"main\">\n                    <img decoding=\"async\" src=\"https:\/\/www.itu.int\/br-staging\/wp-content\/uploads\/sites\/33\/2023\/09\/Side-events.png\" class=\"icon\" alt=\"icon\" \/>\n                                            <p class=\"title\">Card text<\/p>\n                                                            <p>Card Content<br>Card Content<\/p>\n                                    <\/div>\n            <\/div>\n                    <\/div>\n    \n                                                            <div class=\"ituCard\" data-span=\"4\">\n                        <div class=\"content center\">\n                <div class=\"main\">\n                    <img decoding=\"async\" src=\"https:\/\/www.itu.int\/br-staging\/wp-content\/uploads\/sites\/33\/2023\/09\/Side-events.png\" class=\"icon\" alt=\"icon\" \/>\n                                            <p class=\"title\">Card text Card text<\/p>\n                                                            <p>Card Content Card Content<\/p>\n                                    <\/div>\n            <\/div>\n                    <\/div>\n    \n                                                            <div class=\"ituCard\" data-span=\"4\">\n                        <div class=\"content center\">\n                <div class=\"main\">\n                    <img decoding=\"async\" src=\"https:\/\/www.itu.int\/br-staging\/wp-content\/uploads\/sites\/33\/2023\/09\/Side-events.png\" class=\"icon\" alt=\"icon\" \/>\n                                            <p class=\"title\">Card text<br>Card text<\/p>\n                                                            <p>Card Content<br>Card Content<\/p>\n                                    <\/div>\n            <\/div>\n                    <\/div>\n    \n                    <\/div>\n    <\/section>\n\n\n<div class=\"ituContainer\">\n<h2 class=\"wp-block-heading\">Internal Link<\/h2>\n<\/div>\n\n    <section>\n        <div class=\"ituContainer grid\">\n                                                <a class=\"ituCard anim bg hor\" href=\"\" data-span=\"6\" target=\"\">\n        <img decoding=\"async\" class=\"square\" src=\"https:\/\/www.itu.int\/br-staging\/wp-content\/uploads\/sites\/33\/2023\/09\/ITU-official-logo-white.jpg\" alt=\"\" \/>\n        <div class=\"content\">\n            <div class=\"main\">\n                <p class=\"title\">Card title<\/p>\n\n            <\/div>\n            <div class=\"addInfo\">Card content<\/div>\n        <\/div>\n    <\/a>\n\n                                                <a class=\"ituCard anim bg hor\" href=\"\" data-span=\"6\" target=\"\">\n        <img decoding=\"async\" class=\"square\" src=\"https:\/\/www.itu.int\/br-staging\/wp-content\/uploads\/sites\/33\/2023\/09\/ITU-official-logo-white.jpg\" alt=\"\" \/>\n        <div class=\"content\">\n            <div class=\"main\">\n                <p class=\"title\">Card title<\/p>\n\n            <\/div>\n            <div class=\"addInfo\">Card content<\/div>\n        <\/div>\n    <\/a>\n\n                    <\/div>\n    <\/section>\n\n\n<div class=\"ituContainer\">\n<h2 class=\"wp-block-heading\">External Link <\/h2>\n<\/div>\n\n    <section>\n        <div class=\"ituContainer grid\">\n                                                <a class=\"ituCard anim bg hor\" href=\"https:\/\/...\" data-span=\"6\" target=\"\">\n        <img decoding=\"async\" class=\"square\" src=\"https:\/\/www.itu.int\/br-staging\/wp-content\/uploads\/sites\/33\/2023\/09\/ITU-official-logo-white.jpg\" alt=\"\" \/>\n        <div class=\"content\">\n            <div class=\"main\">\n                <p class=\"title\">Card title<\/p>\n                <p>Card content<\/p>\n            <\/div>\n        <\/div>\n    <\/a>\n                                                <a class=\"ituCard anim bg hor\" href=\"https:\/\/...\" data-span=\"6\" target=\"\">\n        <img decoding=\"async\" class=\"square\" src=\"https:\/\/www.itu.int\/br-staging\/wp-content\/uploads\/sites\/33\/2023\/09\/ITU-official-logo-white.jpg\" alt=\"\" \/>\n        <div class=\"content\">\n            <div class=\"main\">\n                <p class=\"title\">Card title<\/p>\n                <p>Card content<\/p>\n            <\/div>\n        <\/div>\n    <\/a>\n                    <\/div>\n    <\/section>\n\n\n<div class=\"ituContainer\">\n<h2 class=\"wp-block-heading\">Documents<\/h2>\n<\/div>\n\n    <section>\n            <div class=\"ituContainer\" >\n        <h2 className=\"h3\"><\/h2>\n            <\/div>\n\t\t\t\t\n\t                    <div class=\"ituContainer grid mb1\">\n                    <a class=\"ituCard anim\" data-span=\"6\" style=\"padding: 0.5rem 1rem;\" href=\"https:\/\/.pdf\" rel=\"noopener noreferrer\">\n        <div class=\"content\">\n            <div class=\"main ituIcnLnk docList\">\n                <i class=\"fal fa-file\"><\/i><span>pdf<\/span>exemple PDF            <\/div>\n        <\/div>\n    <\/a>\n            <\/div>\n                    <div class=\"ituContainer grid mb1\">\n                    <a class=\"ituCard anim\" data-span=\"6\" style=\"padding: 0.5rem 1rem;\" href=\"https:\/\/.doc\" rel=\"noopener noreferrer\">\n        <div class=\"content\">\n            <div class=\"main ituIcnLnk docList\">\n                <i class=\"fal fa-file\"><\/i><span>doc<\/span>exemple DOC            <\/div>\n        <\/div>\n    <\/a>\n            <\/div>\n            <\/section>\n\n\n<div class=\"ituContainer\">\n<h2 class=\"wp-block-heading\">Cards Timeline<\/h2>\n<\/div>\n\n    <section>\n        <div class=\"ituContainer grid\">\n            <ul class=\"ituTimeline\" data-span=\"8\">\n                                        <li>\n        <div class=\"ituCard alt\">\n            <div class=\"main\">\n                <div class=\"content\">\n                    Card text                <\/div>\n            <\/div>\n        <\/div>\n    <\/li>\n                                        <li>\n        <div class=\"ituCard alt\">\n            <div class=\"main\">\n                <div class=\"content\">\n                    Card text                <\/div>\n            <\/div>\n        <\/div>\n    <\/li>\n                            <\/ul>\n        <\/div>\n    <\/section>\n\n\n    <section>\n        <div class=\"ituContainer grid fullWidthCards\">\n                    <\/div>\n    <\/section>\n\n\n<div class=\"ituContainer\">\n<h2 class=\"wp-block-heading\">ITU Columns<\/h2>\n<\/div>\n\n    <div class=\"ituContainer grid\">\n                        <div data-span=\"6\">\n                    <div class=\"ituContainer\">\n<p class=\"wp-block-paragraph\">Colonne 1<\/p>\n<\/div>                    <div class=\"ituContainer\">\n<ul class=\"wp-block-list\"><div class=\"ituContainer\">\n<li><strong>liste<\/strong><\/li>\n<\/div>\n\n<div class=\"ituContainer\">\n<li>1 <a href=\"http:\/\/test\">lien<\/a> <\/li>\n<\/div>\n\n<div class=\"ituContainer\">\n<li>2<\/li>\n<\/div>\n\n<div class=\"ituContainer\">\n<li>3<\/li>\n<\/div><\/ul>\n<\/div>            <\/div>\n                        <div data-span=\"6\">\n                    <div class=\"ituContainer\">\n<p class=\"wp-block-paragraph\">Colonne 2<\/p>\n<\/div>                    <div class=\"ituContainer\">\n<ul class=\"wp-block-list\"><div class=\"ituContainer\">\n<li><strong>liste<\/strong><\/li>\n<\/div>\n\n<div class=\"ituContainer\">\n<li>1 <a href=\"http:\/\/test\">lien<\/a><\/li>\n<\/div>\n\n<div class=\"ituContainer\">\n<li>2<\/li>\n<\/div>\n\n<div class=\"ituContainer\">\n<li>3<\/li>\n<\/div><\/ul>\n<\/div>            <\/div>\n            <\/div>\n\n\n<div class=\"ituContainer\">\n<h2 class=\"wp-block-heading\">ITU Tabs<\/h2>\n<\/div>\n\n    <section>\n        <div class=\"ituContainer tabHeader grid nogap\">\n                            <div class=\"ituCard alt tabTitle\" data-span=\"6\" data-target=\"0\">\n                    Tab title                <\/div>\n                            <div class=\"ituCard tabTitle\" data-span=\"6\" data-target=\"1\">\n                    Tab title                <\/div>\n                    <\/div>\n        <div class=\"ituContainer\">\n            <div class=\"ituTabsContent\">\n                                    <div class=\"tabContent \" data-tab=\"0\">\n                        no list possible                     <\/div>\n                                    <div class=\"tabContent visually-hidden\" data-tab=\"1\">\n                        Tab content                    <\/div>\n                            <\/div>\n        <\/div>\n    <\/section>\n    <script>\n        document.addEventListener(\n            'DOMContentLoaded',\n            () => {\n                const tabs = document.querySelectorAll('.tabTitle');\n                const tabsContent = document.querySelectorAll('.tabContent');\n                tabs.forEach(tab => {\n                    tab.addEventListener('click', () => {\n                        tabs.forEach(tab => {\n                            tab.classList.remove('alt');\n                        });\n                        tab.classList.add('alt');\n                        tabsContent.forEach(tabContent => {\n                            tabContent.classList.add('visually-hidden');\n                        });\n                        const target = tab.getAttribute('data-target');\n                        const tabContent = document.querySelector(`[data-tab=\"${target}\"]`);\n                        tabContent.classList.remove('visually-hidden');\n                    });\n                });\n            })\n    <\/script>\n\n\n<div class=\"ituContainer\">\n<h2 class=\"wp-block-heading\">ITU Tabs<\/h2>\n<\/div>\n\n            <section id=\"qkBJnU\">\n            <div class=\"ituContainer\">\n                                <div class=\"sliderContainer\">\n                    <div class=\"slideGroup\">\n                                                                                <a class=\"ituCard anim\" data-span=\"4\" href=\"https:\/\/www.itu.int\/br-staging\/ssf-speakers-carousel\/\">\n                                <img decoding=\"async\" src=\"\" alt=\"Thumbnail for the article SSF Speakers Carousel\" \/>\n                                <div class=\"content\">\n                                    <div class=\"main\">\n                                        <p class=\"label\">Uncategorized<\/p>\n                                        <p class=\"title\">SSF Speakers Carousel<\/p>\n                                        <p><\/p>\n                                    <\/div>\n                                    <div class=\"addInfo\">\n                                        <p>September 19, 2025<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/a>\n                                                                                                                        <a class=\"ituCard anim\" data-span=\"4\" href=\"https:\/\/www.itu.int\/br-staging\/itus-headquarter\/\">\n                                <img decoding=\"async\" src=\"\" alt=\"Thumbnail for the article ITU&#8217;s Headquarter\" \/>\n                                <div class=\"content\">\n                                    <div class=\"main\">\n                                        <p class=\"label\">Uncategorized<\/p>\n                                        <p class=\"title\">ITU&#8217;s Headquarter<\/p>\n                                        <p><\/p>\n                                    <\/div>\n                                    <div class=\"addInfo\">\n                                        <p>June 23, 2025<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/a>\n                                                                                                                        <a class=\"ituCard anim\" data-span=\"4\" href=\"https:\/\/www.itu.int\/br-staging\/emmy-awards\/\">\n                                <img decoding=\"async\" src=\"\" alt=\"Thumbnail for the article Emmy Awards\" \/>\n                                <div class=\"content\">\n                                    <div class=\"main\">\n                                        <p class=\"label\">Uncategorized<\/p>\n                                        <p class=\"title\">Emmy Awards<\/p>\n                                        <p><\/p>\n                                    <\/div>\n                                    <div class=\"addInfo\">\n                                        <p>October 9, 2024<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/a>\n                                                <\/div>\n                    <div class=\"slideGroup\">\n                                                                                                                <a class=\"ituCard anim\" data-span=\"4\" href=\"https:\/\/www.itu.int\/br-staging\/floorplan\/\">\n                                <img decoding=\"async\" src=\"\" alt=\"Thumbnail for the article floorplan\" \/>\n                                <div class=\"content\">\n                                    <div class=\"main\">\n                                        <p class=\"label\">Uncategorized<\/p>\n                                        <p class=\"title\">floorplan<\/p>\n                                        <p><\/p>\n                                    <\/div>\n                                    <div class=\"addInfo\">\n                                        <p>October 31, 2023<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/a>\n                                                                                                                        <a class=\"ituCard anim\" data-span=\"4\" href=\"https:\/\/www.itu.int\/br-staging\/post-test-3\/\">\n                                <img decoding=\"async\" src=\"https:\/\/www.itu.int\/br-staging\/wp-content\/uploads\/sites\/33\/2023\/09\/ITU-official-logo-white.jpg\" alt=\"Thumbnail for the article post test 3\" \/>\n                                <div class=\"content\">\n                                    <div class=\"main\">\n                                        <p class=\"label\">Test<\/p>\n                                        <p class=\"title\">post test 3<\/p>\n                                        <p><\/p>\n                                    <\/div>\n                                    <div class=\"addInfo\">\n                                        <p>September 14, 2023<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/a>\n                                                                                                                        <a class=\"ituCard anim\" data-span=\"4\" href=\"https:\/\/www.itu.int\/br-staging\/post-test-2\/\">\n                                <img decoding=\"async\" src=\"https:\/\/www.itu.int\/br-staging\/wp-content\/uploads\/sites\/33\/2023\/09\/ITU-official-logo-white.jpg\" alt=\"Thumbnail for the article post test 2\" \/>\n                                <div class=\"content\">\n                                    <div class=\"main\">\n                                        <p class=\"label\">Test<\/p>\n                                        <p class=\"title\">post test 2<\/p>\n                                        <p><\/p>\n                                    <\/div>\n                                    <div class=\"addInfo\">\n                                        <p>September 14, 2023<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/a>\n                                                <\/div>\n                    <div class=\"slideGroup\">\n                                                                                                                <a class=\"ituCard anim\" data-span=\"4\" href=\"https:\/\/www.itu.int\/br-staging\/post-test-1\/\">\n                                <img decoding=\"async\" src=\"https:\/\/www.itu.int\/br-staging\/wp-content\/uploads\/sites\/33\/2023\/09\/ITU-official-logo-white.jpg\" alt=\"Thumbnail for the article post test 1\" \/>\n                                <div class=\"content\">\n                                    <div class=\"main\">\n                                        <p class=\"label\">Test<\/p>\n                                        <p class=\"title\">post test 1<\/p>\n                                        <p><\/p>\n                                    <\/div>\n                                    <div class=\"addInfo\">\n                                        <p>September 14, 2023<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/a>\n                                                                                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"ituContainer\">\n                <div class=\"sliderProgressBar\"><\/div>\n                <div class=\"silderLinkAndNav\">\n                    <div class=\"allItemsLink\">\n                                            <\/div>\n                    <div class=\"sliderNav \">\n                        <button class=\"prev disabled\"><\/button>\n                        <button class=\"next\"><\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n        <script>\n            window.addEventListener('DOMContentLoaded', (e) => {\n                const slider = document.querySelector('#qkBJnU .sliderContainer');\n                const cardwidth = document.querySelector('#qkBJnU .ituCard').offsetWidth + 32;\n                const cardcount = document.querySelectorAll('#qkBJnU .ituCard').length;\n                const slidegroup = document.querySelectorAll('#qkBJnU .slideGroup');\n                const progressbar = document.querySelector('#qkBJnU .sliderProgressBar');\n                const prev = document.querySelector('#qkBJnU .prev');\n                const next = document.querySelector('#qkBJnU .next');\n                const max = cardcount - 3;\n\n                let i = 0;\n\n                function setProgressBar() {\n                    console.log(((max + i) \/ cardcount) * 100 + \"%\");\n                    progressbar.style.width = ((max + i) \/ cardcount) * 100 + \"%\";\n                }\n                setProgressBar();\n                const animateSlideGroup = () => {\n                    slidegroup.forEach(element => {\n                        element.style.transform = `translateX(-${i * cardwidth}px)`;\n                    });\n                    setProgressBar();\n                }\n                next.addEventListener('click', event => {\n                    i++;\n                    prev.classList.contains('disabled') ? prev.classList.remove('disabled') : null;\n                    i === cardcount - max && next.classList.toggle('disabled');\n                    animateSlideGroup();\n                    console.log(i);\n                })\n                prev.addEventListener('click', event => {\n                    i--;\n                    next.classList.contains('disabled') ? next.classList.remove('disabled') : null;\n                    i === 0 && prev.classList.toggle('disabled');\n                    animateSlideGroup();\n                    console.log(i);\n                })\n            })\n        <\/script>\n    \n\n\n<div class=\"ituContainer\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Cards Icons Internal Link External Link Documents Cards Timeline ITU Columns ITU Tabs ITU Tabs<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"folder":[],"class_list":["post-41","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"gs-tiny":false,"xl":false,"xxl":false,"xxxl":false,"xxxxl":false,"xxxxxl":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"mgaillard","author_link":"https:\/\/www.itu.int\/br-staging\/author\/mgaillard\/"},"uagb_comment_info":0,"uagb_excerpt":"Cards Icons Internal Link External Link Documents Cards Timeline ITU Columns ITU Tabs ITU Tabs","_links":{"self":[{"href":"https:\/\/www.itu.int\/br-staging\/wp-json\/wp\/v2\/pages\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itu.int\/br-staging\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.itu.int\/br-staging\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.itu.int\/br-staging\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itu.int\/br-staging\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":0,"href":"https:\/\/www.itu.int\/br-staging\/wp-json\/wp\/v2\/pages\/41\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.itu.int\/br-staging\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/www.itu.int\/br-staging\/wp-json\/wp\/v2\/folder?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}