diff --git a/addons/website/static/src/img/snippets_thumbs/s_dynamic_carousel.svg b/addons/website/static/src/img/snippets_thumbs/s_dynamic_carousel.svg
new file mode 100644
index 00000000000..d47d35d8769
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_dynamic_carousel.svg
@@ -0,0 +1,76 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <path id="path-1" d="M27 30v2h-5v-2h5zm14 0v2h-5v-2h5zm7 0v2h-5v-2h5zm-14 0v2h-5v-2h5z"/>
+    <filter id="filter-2" width="103.8%" height="200%" x="-1.9%" y="-25%" filterUnits="objectBoundingBox">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+      <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.292012675 0"/>
+    </filter>
+    <rect id="path-3" width="20.208" height="13.176" x="0" y="0"/>
+    <linearGradient id="linearGradient-5" x1="72.875%" x2="40.332%" y1="47.143%" y2="37.112%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-6" x1="88.517%" x2="50%" y1="47.295%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-7" width="20.208" height="13.176" x="0" y="0"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_dynamic_carousel">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(6 14)">
+        <g class="center_group" transform="translate(0 9)">
+          <g class="combined_shape">
+            <use fill="#000" filter="url(#filter-2)" xlink:href="#path-1"/>
+            <use fill="#FFF" fill-opacity=".78" xlink:href="#path-1"/>
+          </g>
+          <path fill="#FFF" stroke="#FFF" d="M3.5-.352v9.704L-.659 4.5 3.5-.352zm64-1L71.659 3.5 67.5 8.352v-9.704z" class="combined_shape"/>
+        </g>
+        <g class="group_2" transform="translate(38)">
+          <g class="image_1_border">
+            <rect width="21" height="14" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.396 .412)">
+              <mask id="mask-4" fill="#fff">
+                <use xlink:href="#path-3"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-3"/>
+              <ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-4)" rx="2.044" ry="2.049"/>
+              <ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-4)" rx="9.311" ry="5.147"/>
+              <ellipse cx="-12.622" cy="14" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-4)" rx="24.378" ry="7.412"/>
+            </g>
+            <path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
+          </g>
+          <path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
+        </g>
+        <g class="group_2" transform="translate(10)">
+          <g class="image_1_border">
+            <rect width="21" height="14" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.396 .412)">
+              <mask id="mask-8" fill="#fff">
+                <use xlink:href="#path-7"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-7"/>
+              <ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="2.044" ry="2.049"/>
+              <ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-5)" class="oval" mask="url(#mask-8)" rx="9.311" ry="5.147"/>
+              <ellipse cx="-12.622" cy="14" fill="url(#linearGradient-6)" class="oval" mask="url(#mask-8)" rx="24.378" ry="7.412"/>
+            </g>
+            <path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
+          </g>
+          <path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
+        </g>
+        <g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(43 18)">
+          <ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
+          <path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
+          <path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
+        </g>
+        <g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(15 18)">
+          <ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
+          <path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
+          <path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_thumbs/s_dynamic_snippet.svg b/addons/website/static/src/img/snippets_thumbs/s_dynamic_snippet.svg
new file mode 100644
index 00000000000..30321cbfcb7
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_dynamic_snippet.svg
@@ -0,0 +1,85 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82" height="60" viewBox="0 0 82 60">
+  <defs>
+    <rect id="path-1" width="20.208" height="13.176" x="0" y="0"/>
+    <linearGradient id="linearGradient-3" x1="72.875%" x2="40.332%" y1="47.143%" y2="37.112%">
+      <stop offset="0%" stop-color="#008374"/>
+      <stop offset="100%" stop-color="#006A59"/>
+    </linearGradient>
+    <linearGradient id="linearGradient-4" x1="88.517%" x2="50%" y1="47.295%" y2="50%">
+      <stop offset="0%" stop-color="#00AA89"/>
+      <stop offset="100%" stop-color="#009989"/>
+    </linearGradient>
+    <rect id="path-5" width="20.208" height="13.176" x="0" y="0"/>
+    <rect id="path-7" width="20.208" height="13.176" x="0" y="0"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" class="snippets_thumbs">
+    <g class="s_dynamic_snippet">
+      <rect width="82" height="60" class="bg"/>
+      <g class="group" transform="translate(5 14)">
+        <g class="group_2" transform="translate(52)">
+          <g class="image_1_border">
+            <rect width="21" height="14" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.396 .412)">
+              <mask id="mask-2" fill="#fff">
+                <use xlink:href="#path-1"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-1"/>
+              <ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-2)" rx="2.044" ry="2.049"/>
+              <ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-2)" rx="9.311" ry="5.147"/>
+              <ellipse cx="-12.622" cy="14" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-2)" rx="24.378" ry="7.412"/>
+            </g>
+            <path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
+          </g>
+          <path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
+        </g>
+        <g class="group_2">
+          <g class="image_1_border">
+            <rect width="21" height="14" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.396 .412)">
+              <mask id="mask-6" fill="#fff">
+                <use xlink:href="#path-5"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-5"/>
+              <ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-6)" rx="2.044" ry="2.049"/>
+              <ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-6)" rx="9.311" ry="5.147"/>
+              <ellipse cx="-12.622" cy="14" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-6)" rx="24.378" ry="7.412"/>
+            </g>
+            <path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
+          </g>
+          <path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
+        </g>
+        <g class="group_2" transform="translate(26)">
+          <g class="image_1_border">
+            <rect width="21" height="14" fill="#FFF" class="rectangle"/>
+            <g class="oval___oval_mask" transform="translate(.396 .412)">
+              <mask id="mask-8" fill="#fff">
+                <use xlink:href="#path-7"/>
+              </mask>
+              <use fill="#79D1F2" class="mask" xlink:href="#path-7"/>
+              <ellipse cx="16.164" cy="4.049" fill="#F3EC60" class="oval" mask="url(#mask-8)" rx="2.044" ry="2.049"/>
+              <ellipse cx="20.009" cy="14.618" fill="url(#linearGradient-3)" class="oval" mask="url(#mask-8)" rx="9.311" ry="5.147"/>
+              <ellipse cx="-12.622" cy="14" fill="url(#linearGradient-4)" class="oval" mask="url(#mask-8)" rx="24.378" ry="7.412"/>
+            </g>
+            <path fill="#FFF" d="M21 0v14H0V0h21zm-.396.412H.396v13.176h20.208V.412z" class="rectangle_2"/>
+          </g>
+          <path fill="#B9B9B9" d="M21 13v18H0V13h21zm-1 1H1v16h19V14z" class="combined_shape"/>
+        </g>
+        <g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(57 18)">
+          <ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
+          <path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
+          <path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
+        </g>
+        <g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(5 18)">
+          <ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
+          <path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
+          <path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
+        </g>
+        <g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width=".8" class="database" transform="translate(31 18)">
+          <ellipse cx="5.5" cy="1.5" class="oval" rx="5.5" ry="1.5"/>
+          <path d="M11 4c0 1.107-2.444 2-5.5 2S0 5.107 0 4" class="path"/>
+          <path d="M0 2v5.765C0 8.448 2.444 9 5.5 9S11 8.448 11 7.765V2" class="path"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>