{"id":819,"date":"2025-12-18T18:33:32","date_gmt":"2025-12-18T18:33:32","guid":{"rendered":"https:\/\/dstest.twentyfour.dev\/products\/"},"modified":"2025-12-21T09:29:01","modified_gmt":"2025-12-21T09:29:01","slug":"products","status":"publish","type":"page","link":"https:\/\/dstest.twentyfour.dev\/en\/products\/","title":{"rendered":"Products"},"content":{"rendered":"<section class=\"main-hero-section relative text-title h-full overflow-hidden max-h-[calc(100vh-235px)] max-lg:min-h-[500px] lg:min-h-[600px]\">\n\t<div class=\"cta-image-wrapper h-full relative max-h-[calc(100vh-235px)] max-lg:min-h-[500px] lg:min-h-[600px]\">\n\t\t\t\t\t\t\t\t\t    <div class=\"video-autoplay-wrapper size-full \">\n        <video class=\"video-autoplay lazy size-full max-lg:h-[500px] max-lg:aspect-video object-cover max-h-[calc(100vh-235px)]\" loop muted playsinline>\n            <source data-src=\"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/video.mp4\" type=\"video\/mp4\" \/>\n        <\/video>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t<div class=\"absolute bottom-4 lg:bottom-15 w-full\">\n\t\t<div class=\"container max-lg:px-4 mx-auto\">\n\t\t\t<div class=\"bg-white\/90 rounded-md flex flex-col gap-6 w-full max-w-130 p-4 md:p-10 justify-between\">\n\t\t\t\t\t\t\t\t\t<h1 class=\"headline text-xl lg:text-28 leading-[120%] font-light !pb-6\">Steel profiles for roofs and facades. Durable, high-quality solutions<\/h1>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"text-base font-light\">This is hero section text<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\t\t\n<\/section>\n\t\n\t<div class=\"breadcrumbs-section my-5 max-xl:px-4 relative\">\n    <div class=\"container mx-auto\">\n            <nav aria-label=\"Breadcrumbs\">\n        <ol class=\"whitespace-nowrap overflow-hidden text-ellipsis pb-1\">\n            <li class=\"inline\">\n                <a href=\"https:\/\/dstest.twentyfour.dev\/en\/\" class=\"ms-[2px] focus:outline outline-focus\">\n                    <svg class=\"inline relative -top-[2px]\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M7.99992 4.62668L11.3333 7.62668V12.8333H9.99992V8.83334H5.99992V12.8333H4.66659V7.62668L7.99992 4.62668ZM7.99992 2.83334L1.33325 8.83334H3.33325V14.1667H7.33325V10.1667H8.66659V14.1667H12.6666V8.83334H14.6666L7.99992 2.83334Z\" fill=\"#525252\"\/>\n                    <\/svg>\n                <\/a>\n            <\/li>\n                                        <li class=\"inline before:content-['|'] before:text-bg-border-3 before:text-[11px] before:px-2 before-px-1-5-mobile before:relative before:-top-[2px]\">\n                    <p class=\"inline text-subtle text-sm leading-[150%]\">Products<\/p>\n                <\/li>\n                    <\/ol>\n    <\/nav>\n    <\/div>\n    <div class=\"bg-[linear-gradient(270deg,_#FFF_-3.57%,_rgba(255,255,255,0)_100%)] absolute right-0 -top-5 w-15 h-[calc(100%+40px)] md:hidden\"><\/div>\n<\/div><div class=\"product-overview-section my-0 lg:mb-1 xl:mt-15 max-xl:px-4\">\n    <div class=\"container mx-auto min-h-100 flex flex-col lg:flex-row gap-0 lg:gap-8 xl:gap-10\">\n        <aside class=\"lg:w-1\/3 w-full lg:sticky top-50 self-start lg:z-0\">\n                                <div class=\"filters-container w-full fixed z-12 lg:relative left-0 bg-white py-15 lg:py-0 rounded-t-2xl lg:rounded-none transition-[bottom] animation\">\n        <button class=\"close-btn lg:hidden absolute top-4 right-4\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\" fill=\"#737373\"\/>\n            <\/svg>\n        <\/button>\n        <p class=\"lg:hidden text-title text-xs font-light px-5\">Filtrer produkter<\/p>\n        <div class=\"accordion-section lg:h-auto px-5 lg:px-0 pt-4.5 lg:pt-0 max-lg:max-h-80 max-lg:overflow-y-auto\">\n            <div class=\"relative pb-5 mb-5 border-b border-b-bg-border-3\">\n                <button class=\"size-[22px] absolute top-3 xl:top-6 left-3 xl:left-5 rounded-xs focus:outline focus:outline-primary\">\n                    <svg width=\"22\" height=\"23\" viewBox=\"0 0 22 23\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M14.442 13.5671H13.7178L13.4611 13.3196C14.3595 12.2746 14.9003 10.9179 14.9003 9.44208C14.9003 6.15125 12.2328 3.48375 8.94198 3.48375C5.65114 3.48375 2.98364 6.15125 2.98364 9.44208C2.98364 12.7329 5.65114 15.4004 8.94198 15.4004C10.4178 15.4004 11.7745 14.8596 12.8195 13.9613L13.067 14.2179V14.9421L17.6503 19.5163L19.0161 18.1504L14.442 13.5671ZM8.94198 13.5671C6.65948 13.5671 4.81698 11.7246 4.81698 9.44208C4.81698 7.15958 6.65948 5.31708 8.94198 5.31708C11.2245 5.31708 13.067 7.15958 13.067 9.44208C13.067 11.7246 11.2245 13.5671 8.94198 13.5671Z\" fill=\"#878787\"\/>\n                    <\/svg>\n                <\/button>\n                <input type=\"search\" class=\"filter-search w-full p-3 xl:p-5 ps-10 xl:ps-12 text-subtle text-sm lg:text-base xl:text-lg leading-[150%] font-light border border-bg-border-3 hover:border-primary rounded-md focus:outline outline-focus\" placeholder=\"S\u00f8g\" name=\"filter-search\" \/>\n            <\/div>\n            <div class=\"flex flex-col items-center mb-10 lg:mb-5 xl:mb-10\">\n                <div class=\"accordion-items w-full flex flex-col gap-5\">\n                                            <div class=\"accordion-item group flex flex-col bg-white border border-bg-border-3 hover:border-primary focus-within:outline focus-within:outline-focus focus-within:border-none cursor-pointer\">\n                            <button type=\"button\"\n                                aria-expanded=\"false\"\n                                class=\"accordion-trigger section-header flex justify-between items-stretch gap-2 p-3 xl:p-5 outline-none cursor-pointer\"\n                                aria-controls=\"sect974122200\"\n                                id=\"accordion974122200id\">\n                                <h3 class=\"text-title text-sm lg:text-base xl:text-lg leading-[150%] font-light\">\n                                    Overfladebel\u00e6gning                                <\/h3>\n                                <div class=\"flex items-center\">\n                                    <div class=\"accordion-icon w-4.5 xl:w-6 h-4.5 xl:h-6 rotate-0 transition-transform outline-none bg-[url(..\/img\/icon-plus.svg)] bg-cover\"><\/div>\n                                <\/div>\n                            <\/button>\n                            <div id=\"sect974122200\" \n                                role=\"region\"\n                                aria-labelledby=\"accordion974122200id\"\n                                class=\"section-body relative overflow-hidden transition-[max-height] max-h-0 animation\">\n                                                                    <div class=\"section-body-text flex flex-wrap gap-3 p-3 xl:p-5 xl:ps-[23px] lg:pb-[23px] hidden\">\n                                                                                    <div>\n                                                <input type=\"checkbox\" \n                                                    id=\"category-72\"\n                                                    name=\"category-72\"\n                                                    class=\"category sr-only peer\" \n                                                    data-taxonomy='surface-coating'\n                                                    data-taxonomy-id='72'>\n                                                <label for=\"category-72\" class=\"inline-flex text-xs text-title leading-[150%] font-light p-2 bg-bg-border border border-bg-border hover:border-primary peer-checked:border-checked-gray peer-focus:outline peer-focus:outline-focus rounded-[5px] cursor-pointer\">COR-TEN\u00ae<\/label>\n                                            <\/div>\n                                                                                    <div>\n                                                <input type=\"checkbox\" \n                                                    id=\"category-73\"\n                                                    name=\"category-73\"\n                                                    class=\"category sr-only peer\" \n                                                    data-taxonomy='surface-coating'\n                                                    data-taxonomy-id='73'>\n                                                <label for=\"category-73\" class=\"inline-flex text-xs text-title leading-[150%] font-light p-2 bg-bg-border border border-bg-border hover:border-primary peer-checked:border-checked-gray peer-focus:outline peer-focus:outline-focus rounded-[5px] cursor-pointer\">Polyester<\/label>\n                                            <\/div>\n                                                                            <\/div>\n                                                            <\/div>\n                        <\/div>\n                                            <div class=\"accordion-item group flex flex-col bg-white border border-bg-border-3 hover:border-primary focus-within:outline focus-within:outline-focus focus-within:border-none cursor-pointer\">\n                            <button type=\"button\"\n                                aria-expanded=\"false\"\n                                class=\"accordion-trigger section-header flex justify-between items-stretch gap-2 p-3 xl:p-5 outline-none cursor-pointer\"\n                                aria-controls=\"sect2177056011\"\n                                id=\"accordion2177056011id\">\n                                <h3 class=\"text-title text-sm lg:text-base xl:text-lg leading-[150%] font-light\">\n                                    Farve                                <\/h3>\n                                <div class=\"flex items-center\">\n                                    <div class=\"accordion-icon w-4.5 xl:w-6 h-4.5 xl:h-6 rotate-0 transition-transform outline-none bg-[url(..\/img\/icon-plus.svg)] bg-cover\"><\/div>\n                                <\/div>\n                            <\/button>\n                            <div id=\"sect2177056011\" \n                                role=\"region\"\n                                aria-labelledby=\"accordion2177056011id\"\n                                class=\"section-body relative overflow-hidden transition-[max-height] max-h-0 animation\">\n                                                                    <div class=\"section-body-text flex flex-wrap gap-3 p-3 xl:p-5 xl:ps-[23px] lg:pb-[23px] hidden\">\n                                                                                    <div>\n                                                <input type=\"checkbox\" \n                                                    id=\"category-65\"\n                                                    name=\"category-65\"\n                                                    class=\"category sr-only peer\" \n                                                    data-taxonomy='color'\n                                                    data-taxonomy-id='65'>\n                                                <label for=\"category-65\" class=\"inline-flex text-xs text-title leading-[150%] font-light p-2 bg-bg-border border border-bg-border hover:border-primary peer-checked:border-checked-gray peer-focus:outline peer-focus:outline-focus rounded-[5px] cursor-pointer\">Anthracite<\/label>\n                                            <\/div>\n                                                                                    <div>\n                                                <input type=\"checkbox\" \n                                                    id=\"category-70\"\n                                                    name=\"category-70\"\n                                                    class=\"category sr-only peer\" \n                                                    data-taxonomy='color'\n                                                    data-taxonomy-id='70'>\n                                                <label for=\"category-70\" class=\"inline-flex text-xs text-title leading-[150%] font-light p-2 bg-bg-border border border-bg-border hover:border-primary peer-checked:border-checked-gray peer-focus:outline peer-focus:outline-focus rounded-[5px] cursor-pointer\">Brick red<\/label>\n                                            <\/div>\n                                                                                    <div>\n                                                <input type=\"checkbox\" \n                                                    id=\"category-76\"\n                                                    name=\"category-76\"\n                                                    class=\"category sr-only peer\" \n                                                    data-taxonomy='color'\n                                                    data-taxonomy-id='76'>\n                                                <label for=\"category-76\" class=\"inline-flex text-xs text-title leading-[150%] font-light p-2 bg-bg-border border border-bg-border hover:border-primary peer-checked:border-checked-gray peer-focus:outline peer-focus:outline-focus rounded-[5px] cursor-pointer\">Limestone<\/label>\n                                            <\/div>\n                                                                                    <div>\n                                                <input type=\"checkbox\" \n                                                    id=\"category-67\"\n                                                    name=\"category-67\"\n                                                    class=\"category sr-only peer\" \n                                                    data-taxonomy='color'\n                                                    data-taxonomy-id='67'>\n                                                <label for=\"category-67\" class=\"inline-flex text-xs text-title leading-[150%] font-light p-2 bg-bg-border border border-bg-border hover:border-primary peer-checked:border-checked-gray peer-focus:outline peer-focus:outline-focus rounded-[5px] cursor-pointer\">Moss green<\/label>\n                                            <\/div>\n                                                                                    <div>\n                                                <input type=\"checkbox\" \n                                                    id=\"category-68\"\n                                                    name=\"category-68\"\n                                                    class=\"category sr-only peer\" \n                                                    data-taxonomy='color'\n                                                    data-taxonomy-id='68'>\n                                                <label for=\"category-68\" class=\"inline-flex text-xs text-title leading-[150%] font-light p-2 bg-bg-border border border-bg-border hover:border-primary peer-checked:border-checked-gray peer-focus:outline peer-focus:outline-focus rounded-[5px] cursor-pointer\">Red<\/label>\n                                            <\/div>\n                                                                                    <div>\n                                                <input type=\"checkbox\" \n                                                    id=\"category-69\"\n                                                    name=\"category-69\"\n                                                    class=\"category sr-only peer\" \n                                                    data-taxonomy='color'\n                                                    data-taxonomy-id='69'>\n                                                <label for=\"category-69\" class=\"inline-flex text-xs text-title leading-[150%] font-light p-2 bg-bg-border border border-bg-border hover:border-primary peer-checked:border-checked-gray peer-focus:outline peer-focus:outline-focus rounded-[5px] cursor-pointer\">Reddish brown<\/label>\n                                            <\/div>\n                                                                                    <div>\n                                                <input type=\"checkbox\" \n                                                    id=\"category-66\"\n                                                    name=\"category-66\"\n                                                    class=\"category sr-only peer\" \n                                                    data-taxonomy='color'\n                                                    data-taxonomy-id='66'>\n                                                <label for=\"category-66\" class=\"inline-flex text-xs text-title leading-[150%] font-light p-2 bg-bg-border border border-bg-border hover:border-primary peer-checked:border-checked-gray peer-focus:outline peer-focus:outline-focus rounded-[5px] cursor-pointer\">White<\/label>\n                                            <\/div>\n                                                                            <\/div>\n                                                            <\/div>\n                        <\/div>\n                                            <div class=\"accordion-item group flex flex-col bg-white border border-bg-border-3 hover:border-primary focus-within:outline focus-within:outline-focus focus-within:border-none cursor-pointer\">\n                            <button type=\"button\"\n                                aria-expanded=\"false\"\n                                class=\"accordion-trigger section-header flex justify-between items-stretch gap-2 p-3 xl:p-5 outline-none cursor-pointer\"\n                                aria-controls=\"sect3801409691\"\n                                id=\"accordion3801409691id\">\n                                <h3 class=\"text-title text-sm lg:text-base xl:text-lg leading-[150%] font-light\">\n                                    Garanti                                <\/h3>\n                                <div class=\"flex items-center\">\n                                    <div class=\"accordion-icon w-4.5 xl:w-6 h-4.5 xl:h-6 rotate-0 transition-transform outline-none bg-[url(..\/img\/icon-plus.svg)] bg-cover\"><\/div>\n                                <\/div>\n                            <\/button>\n                            <div id=\"sect3801409691\" \n                                role=\"region\"\n                                aria-labelledby=\"accordion3801409691id\"\n                                class=\"section-body relative overflow-hidden transition-[max-height] max-h-0 animation\">\n                                                                    <div class=\"section-body-text flex flex-wrap gap-3 p-3 xl:p-5 xl:ps-[23px] lg:pb-[23px] hidden\">\n                                                                                    <div>\n                                                <input type=\"checkbox\" \n                                                    id=\"category-71\"\n                                                    name=\"category-71\"\n                                                    class=\"category sr-only peer\" \n                                                    data-taxonomy='warranty'\n                                                    data-taxonomy-id='71'>\n                                                <label for=\"category-71\" class=\"inline-flex text-xs text-title leading-[150%] font-light p-2 bg-bg-border border border-bg-border hover:border-primary peer-checked:border-checked-gray peer-focus:outline peer-focus:outline-focus rounded-[5px] cursor-pointer\">20 years<\/label>\n                                            <\/div>\n                                                                            <\/div>\n                                                            <\/div>\n                        <\/div>\n                                    <\/div>\n            <\/div>\n        <\/div>\n            <!-- For mobile -->\n    <div class=\"flex lg:hidden flex-row gap-6 items-center text-base pt-5 px-5 border-t border-bg-border-3\">\n        <button class=\"add-filters w-full py-4.5 px-6.5 rounded-md bg-primary text-white border border border-primary enabled:hover:bg-primary-hover enabled:hover:text-white enabled:focus:outline enabled:focus:outline-focus enabled:focus:bg-primary-hover enabled:focus:text-white disabled:opacity-50 cursor-pointer\">\n            Tilf\u00f8j filtre        <\/button>\n        <button type=\"reset\" class=\"reset-filters w-full py-4.5 px-6.5 rounded-md text-black border border border-primary enabled:hover:bg-primary enabled:hover:text-white enabled:focus:outline enabled:focus:outline-focus enabled:focus:bg-primary enabled:focus:text-white disabled:opacity-50 cursor-pointer\">\n            Ryd filtre        <\/button>\n    <\/div>\n    <!-- For desktop -->\n    <div class=\"hidden lg:flex flex-row gap-2 items-center text-base\">\n        <p class=\"text-title after:content-['|'] after:text-primary after:ms-2\"><span class=\"filter-count\">0<\/span> Aktive filtre<\/p>\n        <button type=\"reset\" class=\"reset-filters group py-[10px] ps-4 pe-3 rounded-[99px] bg-bg-border-2 enabled:hover:bg-primary enabled:hover:text-white enabled:focus:outline enabled:focus:outline-focus enabled:focus:bg-bg-border-2 enabled:focus:text-title flex flex-row gap-[6px] items-center disabled:opacity-50 cursor-pointer\">\n            Ryd filtre            <div class=\"w-[14px] h-[14px]\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path class=\"enabled:group-hover:fill-white\" d=\"M11.0827 3.73913L10.2602 2.91663L6.99935 6.17746L3.73852 2.91663L2.91602 3.73913L6.17685 6.99996L2.91602 10.2608L3.73852 11.0833L6.99935 7.82246L10.2602 11.0833L11.0827 10.2608L7.82185 6.99996L11.0827 3.73913Z\" fill=\"#0A0A0A\"\/>\n                <\/svg>\n            <\/div>\n        <\/button>\n    <\/div>\n    <\/div>\n                    <\/aside>\n\n        <div class=\"lg:w-2\/3 w-full\">\n                <div class=\"flex lg:hidden justify-between items-center pb-6\">\n        <button class=\"open-filter group py-[10px] ps-4 pe-3 rounded-[99px] bg-bg-border-2 enabled:hover:bg-primary enabled:hover:text-white enabled:focus:outline enabled:focus:outline-focus enabled:focus:bg-bg-border-2 enabled:focus:text-title flex flex-row gap-[6px] items-center disabled:opacity-50 cursor-pointer\">\n            Filtrer &#038; s\u00f8g            <div class=\"w-[14px] h-[14px]\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                    <path class=\"group-hover:fill-white\" d=\"M5.83333 10.5H8.16667V9.33333H5.83333V10.5ZM1.75 3.5V4.66667H12.25V3.5H1.75ZM3.5 7.58333H10.5V6.41667H3.5V7.58333Z\" fill=\"#0A0A0A\"\/>\n                <\/svg>\n            <\/div>\n        <\/button>\n        <p class=\"text-title text-xs lg:text-base\"><span class=\"filter-count\">0<\/span> Aktive filtre<\/p>\n    <\/div>\n            <div class=\"product-list grid grid-cols-2 gap-4 lg:gap-8 xl:gap-10\">\n                                    <article class=\"product-grid-item relative\">\n                        <a href=\"https:\/\/dstest.twentyfour.dev\/en\/product\/trapezplade-25-275r-3\/\" class=\"group block outline-none\">\n\t\t\t\t\t\t\t<div class=\"image-wrapper overflow-hidden mb-2 aspect-[3\/2] lg:mb-4 xl:mb-8 relative max-lg:-z-1\">\n                                \t\t\t\t\t\t\t\t    <img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"450\" src=\"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/top-media-_1_.png\" class=\"w-full h-full object-cover scale-100 group-hover:scale-[1.05] group-focus:scale-[1.05] transition-[scale] animation\" alt=\"\" srcset=\"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/top-media-_1_.png 724w, https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/top-media-_1_-300x211.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/>                                                                                            <\/div>\n                                                            <p class=\"text-title lg:text-subtle text-sm leading-[150%] font-light mb-1 lg:mb-4\">Trapezplader<\/p>\n                                                        <h3 class=\"text-title text-base lg:text-xl xl:text-2xl leading-[150%] lg:leading-[120%] font-light mb-2 lg:mb-4 me-13 xl:me-16\">Trapezplade 25-275R testing<\/h3>\n                            <div class=\"lg:flex lg:justify-between\">\n                                                                    <p class=\"hidden lg:block text-title text-base leading-[150%] xl:leading-[170%] font-light text-balance me-13 xl:me-16\">The DS TP 35 steel trapezoidal sheet has wide waves that give it a harmonious and professional look. Vertical, horizontal and diagonal mounting is possible on this steel trapezoidal sheet.<\/p>\n                                                                <div class=\"size-7 xl:size-10 py-[1px] lg:self-end\">\n                                    <div class=\"size-5 xl:size-8 bg-[url(..\/img\/icon-arrow-outward-orange.svg)] bg-cover mt-[6px] me-[6px] mb-0 ms-0 group-hover:mt-0 group-hover:me-0 group-hover:mb-[6px] group-hover:ms-[6px] transition-[margin] animation\"><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n                    <\/article>\n                                    <article class=\"product-grid-item relative\">\n                        <a href=\"https:\/\/dstest.twentyfour.dev\/en\/product\/trapezplade-25-275r-2\/\" class=\"group block outline-none\">\n\t\t\t\t\t\t\t<div class=\"image-wrapper overflow-hidden mb-2 aspect-[3\/2] lg:mb-4 xl:mb-8 relative max-lg:-z-1\">\n                                \t\t\t\t\t\t\t\t    <img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"450\" src=\"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/top-media.png\" class=\"w-full h-full object-cover scale-100 group-hover:scale-[1.05] group-focus:scale-[1.05] transition-[scale] animation\" alt=\"\" srcset=\"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/top-media.png 724w, https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/top-media-300x211.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/>                                                                                                    <div class=\"video-wrapper w-full h-full absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity animation max-md:hidden\">\n                                            <div class=\"video-autoplay-wrapper size-full absolute\">\n        <video class=\"video-autoplay lazy size-full max-lg:h-[500px] max-lg:aspect-video object-cover max-h-[calc(100vh-235px)]\" loop muted playsinline>\n            <source data-src=\"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/video.mp4\" type=\"video\/mp4\" \/>\n        <\/video>\n    <\/div>\n                                    <\/div>\n                                                            <\/div>\n                                                        <h3 class=\"text-title text-base lg:text-xl xl:text-2xl leading-[150%] lg:leading-[120%] font-light mb-2 lg:mb-4 me-13 xl:me-16\">Trapezplade 25-275R 2<\/h3>\n                            <div class=\"lg:flex lg:justify-between\">\n                                                                    <p class=\"hidden lg:block text-title text-base leading-[150%] xl:leading-[170%] font-light text-balance me-13 xl:me-16\">The DS TP 35 steel trapezoidal sheet has wide waves that give it a harmonious and professional look. Vertical, horizontal and diagonal mounting is possible on this steel trapezoidal sheet.<\/p>\n                                                                <div class=\"size-7 xl:size-10 py-[1px] lg:self-end\">\n                                    <div class=\"size-5 xl:size-8 bg-[url(..\/img\/icon-arrow-outward-orange.svg)] bg-cover mt-[6px] me-[6px] mb-0 ms-0 group-hover:mt-0 group-hover:me-0 group-hover:mb-[6px] group-hover:ms-[6px] transition-[margin] animation\"><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n                    <\/article>\n                                    <article class=\"product-grid-item relative\">\n                        <a href=\"https:\/\/dstest.twentyfour.dev\/en\/product\/trapezplade-25-275r\/\" class=\"group block outline-none\">\n\t\t\t\t\t\t\t<div class=\"image-wrapper overflow-hidden mb-2 aspect-[3\/2] lg:mb-4 xl:mb-8 relative max-lg:-z-1\">\n                                \t\t\t\t\t\t\t\t    <img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"560\" src=\"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/product-image111.png\" class=\"w-full h-full object-cover scale-100 group-hover:scale-[1.05] group-focus:scale-[1.05] transition-[scale] animation\" alt=\"\" \/>                                                                                                    <div class=\"video-wrapper w-full h-full absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity animation max-md:hidden\">\n                                            <div class=\"video-autoplay-wrapper size-full absolute\">\n        <video class=\"video-autoplay lazy size-full max-lg:h-[500px] max-lg:aspect-video object-cover max-h-[calc(100vh-235px)]\" loop muted playsinline>\n            <source data-src=\"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/video.mp4\" type=\"video\/mp4\" \/>\n        <\/video>\n    <\/div>\n                                    <\/div>\n                                                            <\/div>\n                                                        <h3 class=\"text-title text-base lg:text-xl xl:text-2xl leading-[150%] lg:leading-[120%] font-light mb-2 lg:mb-4 me-13 xl:me-16\">Trapezplade 25-275R<\/h3>\n                            <div class=\"lg:flex lg:justify-between\">\n                                                                    <p class=\"hidden lg:block text-title text-base leading-[150%] xl:leading-[170%] font-light text-balance me-13 xl:me-16\">The DS TP 35 steel trapezoidal sheet has wide waves that give it a harmonious and professional look. Vertical, horizontal and diagonal mounting is possible on this steel trapezoidal sheet. <\/p>\n                                                                <div class=\"size-7 xl:size-10 py-[1px] lg:self-end\">\n                                    <div class=\"size-5 xl:size-8 bg-[url(..\/img\/icon-arrow-outward-orange.svg)] bg-cover mt-[6px] me-[6px] mb-0 ms-0 group-hover:mt-0 group-hover:me-0 group-hover:mb-[6px] group-hover:ms-[6px] transition-[margin] animation\"><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n                    <\/article>\n                            <\/div>\n            <div class=\"w-full text-base xl:text-lg text-center mt-4 md:mt-6 xl:mt-15\">\t<button type=\"button\" data-next-page=\"2\" class=\"load-more cursor-pointer py-4.5 lg:py-5 px-6.5 lg:px-7 items-center text-base xl:text-lg text-center text-black hover:text-white focus:text-black bg-white hover:bg-primary focus:bg-white border border-primary rounded-md focus:outline outline-focus \">Indl\u00e6s flere<\/button>\n<\/div>\n        <\/div>\n    <\/div>\n    <script type=\"text\/template\" class=\"product-template\">\n        <article class=\"product-grid-item relative\">\n            <a href=\"%__productUrl__%\" class=\"group block outline-none\">\n                <div class=\"image-wrapper overflow-hidden mb-2 lg:mb-4 xl:mb-8 relative max-lg:-z-1\">\n                    %__image__%\n                    %__video__%\n                <\/div>\n                <p class=\"text-title lg:text-subtle text-sm leading-[150%] font-light mb-1 lg:mb-4\">%__productType__%<\/p>\n                <h3 class=\"text-title text-base lg:text-xl xl:text-2xl leading-[150%] lg:leading-[120%] font-light mb-2 lg:mb-4 me-13 xl:me-16\">%__title__%<\/h3>\n                <p class=\"hidden lg:block text-title text-base leading-[150%] xl:leading-[170%] font-light text-balance me-13 xl:me-16\">%__excerpt__%<\/p>\n                <div class=\"size-7 lg:size-10 py-[1px]\">\n                    <div class=\"size-5 lg:size-8 bg-[url(..\/img\/icon-arrow-outward-orange.svg)] bg-cover mt-[6px] me-[6px] mb-0 ms-0 group-hover:mt-0 group-hover:me-0 group-hover:mb-[6px] group-hover:ms-[6px] transition-[margin] animation\"><\/div>\n                <\/div>\n            <\/a>\n        <\/article>\n    <\/script>\n<\/div>\n    <div class=\"overlay-filter z-11 top-0 left-0 right-0 bottom-0\"><\/div>\n<section class=\"cta-section relative my-15 xl:my-30\">\n\t<div class=\"image-wrapper size-full absolute\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1707\" height=\"2560\" src=\"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/2cd5b887a525bb8f03dc9f77cb7a27a04658cede-_1_-scaled.jpg\" class=\"size-full object-center object-cover\" alt=\"\" srcset=\"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/2cd5b887a525bb8f03dc9f77cb7a27a04658cede-_1_-scaled.jpg 1707w, https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/2cd5b887a525bb8f03dc9f77cb7a27a04658cede-_1_-200x300.jpg 200w, https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/2cd5b887a525bb8f03dc9f77cb7a27a04658cede-_1_-683x1024.jpg 683w, https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/2cd5b887a525bb8f03dc9f77cb7a27a04658cede-_1_-768x1152.jpg 768w, https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/2cd5b887a525bb8f03dc9f77cb7a27a04658cede-_1_-1024x1536.jpg 1024w, https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/2cd5b887a525bb8f03dc9f77cb7a27a04658cede-_1_-1366x2048.jpg 1366w\" sizes=\"auto, (max-width: 1707px) 100vw, 1707px\" \/>\t\t\t<div class=\"overlay-image absolute top-0 left-0 right-0 bottom-0\"><\/div>\n\t\t\t<\/div>\n\t<div class=\"grid grid-cols-1 lg:grid-cols-2 container mx-auto gap-0 relative\">\n\t\t<div class=\"relative content-end max-md:order-last\">\n\t\t\t\t\t\t\t<div class=\"form-image-wrapper max-lg:p-4 max-lg:pb-0\">\n\t\t\t\t\t<div class=\"relative\">\n\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"733\" height=\"400\" src=\"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/image-9-_1_.png\" class=\"relative w-full z-1\" alt=\"\" srcset=\"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/image-9-_1_.png 733w, https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/image-9-_1_-300x164.png 300w\" sizes=\"auto, (max-width: 733px) 100vw, 733px\" \/>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<div class=\"p-4 lg:p-7.5 xl:p-15 flex flex-col gap-8 md:gap-10 z-1\">\n\t\t\t\t\t\t\t<h2 class=\"headline text-body-invert text-xl xl:text-28 leading-[120%] font-light max-md:!pb-5\">Talk to a consultant<\/h2>\n\t\t\t\t\t\t\t\t\t\t<div class=\"wysiwyg small-text-desktop text-body-invert text-base leading-[150%] font-light\"><ul>\n<li>Need help choosing a roof\/facade?<\/li>\n<li>Need help choosing a product?<\/li>\n<li>Need help with dimensions, price, installation, accessories or delivery times&#8230;?<\/li>\n<\/ul>\n<p>Our consultants are ready to advise you!<\/p>\n<\/div>\n\t\t\t\t\t\t\t\t\t\t<div class=\"cta-wrapper\">\n\t\t\t\t\t\t<a href=\"https:\/\/dstest.twentyfour.dev\/en\/\" target=\"_blank\" class=\"flex-row transition-[gap] gap-3 hover:gap-5 py-4.5 px-6.5 items-center text-base text-center border border-primary rounded-md focus:outline outline-focus inline-flex bg-primary text-white hover:bg-primary-hover focus:bg-primary-hover\">\n\t\tFind your consultant here\t\t\t<\/a>\n\t\t\t\t<\/div>\n        \t\t\t\t\t\t<\/div>\n\t<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-819","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Products - Development<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Products - Development\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dstest.twentyfour.dev\/en\/products\/\" \/>\n<meta property=\"og:site_name\" content=\"Development\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-21T09:29:01+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dstest.twentyfour.dev\/en\/products\/\",\"url\":\"https:\/\/dstest.twentyfour.dev\/en\/products\/\",\"name\":\"Products - Development\",\"isPartOf\":{\"@id\":\"https:\/\/dstest.twentyfour.dev\/en\/#website\"},\"datePublished\":\"2025-12-18T18:33:32+00:00\",\"dateModified\":\"2025-12-21T09:29:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/dstest.twentyfour.dev\/en\/products\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dstest.twentyfour.dev\/en\/products\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dstest.twentyfour.dev\/en\/products\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/dstest.twentyfour.dev\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Products\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dstest.twentyfour.dev\/en\/#website\",\"url\":\"https:\/\/dstest.twentyfour.dev\/en\/\",\"name\":\"Development\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/dstest.twentyfour.dev\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/dstest.twentyfour.dev\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/dstest.twentyfour.dev\/en\/#organization\",\"name\":\"Development\",\"url\":\"https:\/\/dstest.twentyfour.dev\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/dstest.twentyfour.dev\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/logo-ds-sta_lprofil.svg\",\"contentUrl\":\"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/logo-ds-sta_lprofil.svg\",\"width\":320,\"height\":59,\"caption\":\"Development\"},\"image\":{\"@id\":\"https:\/\/dstest.twentyfour.dev\/en\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Products - Development","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Products - Development","og_url":"https:\/\/dstest.twentyfour.dev\/en\/products\/","og_site_name":"Development","article_modified_time":"2025-12-21T09:29:01+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dstest.twentyfour.dev\/en\/products\/","url":"https:\/\/dstest.twentyfour.dev\/en\/products\/","name":"Products - Development","isPartOf":{"@id":"https:\/\/dstest.twentyfour.dev\/en\/#website"},"datePublished":"2025-12-18T18:33:32+00:00","dateModified":"2025-12-21T09:29:01+00:00","breadcrumb":{"@id":"https:\/\/dstest.twentyfour.dev\/en\/products\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dstest.twentyfour.dev\/en\/products\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dstest.twentyfour.dev\/en\/products\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dstest.twentyfour.dev\/en\/"},{"@type":"ListItem","position":2,"name":"Products"}]},{"@type":"WebSite","@id":"https:\/\/dstest.twentyfour.dev\/en\/#website","url":"https:\/\/dstest.twentyfour.dev\/en\/","name":"Development","description":"","publisher":{"@id":"https:\/\/dstest.twentyfour.dev\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dstest.twentyfour.dev\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/dstest.twentyfour.dev\/en\/#organization","name":"Development","url":"https:\/\/dstest.twentyfour.dev\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dstest.twentyfour.dev\/en\/#\/schema\/logo\/image\/","url":"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/logo-ds-sta_lprofil.svg","contentUrl":"https:\/\/dstest.twentyfour.dev\/wp-content\/uploads\/2025\/12\/logo-ds-sta_lprofil.svg","width":320,"height":59,"caption":"Development"},"image":{"@id":"https:\/\/dstest.twentyfour.dev\/en\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/dstest.twentyfour.dev\/en\/wp-json\/wp\/v2\/pages\/819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dstest.twentyfour.dev\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dstest.twentyfour.dev\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dstest.twentyfour.dev\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dstest.twentyfour.dev\/en\/wp-json\/wp\/v2\/comments?post=819"}],"version-history":[{"count":1,"href":"https:\/\/dstest.twentyfour.dev\/en\/wp-json\/wp\/v2\/pages\/819\/revisions"}],"predecessor-version":[{"id":820,"href":"https:\/\/dstest.twentyfour.dev\/en\/wp-json\/wp\/v2\/pages\/819\/revisions\/820"}],"wp:attachment":[{"href":"https:\/\/dstest.twentyfour.dev\/en\/wp-json\/wp\/v2\/media?parent=819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}