diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index e0b443c6448..dc785fc6b7b 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -34,6 +34,7 @@
         'views/snippets/s_banner.xml',
         'views/snippets/s_text_block.xml',
         'views/snippets/s_features.xml',
+        'views/snippets/s_three_columns.xml',
         'views/website_views.xml',
         'views/website_visitor_views.xml',
         'views/res_config_settings_views.xml',
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 7f55fb60d85..f4a5429833b 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -448,14 +448,6 @@ table.table_desc tr td {
     }
 }
 
-// Three columns
-
-.s_three_columns {
-    .align-items-stretch .card {
-        height: 100%;
-    }
-}
-
 
 // Comparisons
 .s_comparisons {
diff --git a/addons/website/static/src/snippets/s_three_columns/000.scss b/addons/website/static/src/snippets/s_three_columns/000.scss
new file mode 100644
index 00000000000..d0df614aede
--- /dev/null
+++ b/addons/website/static/src/snippets/s_three_columns/000.scss
@@ -0,0 +1,5 @@
+.s_three_columns {
+    .align-items-stretch .card {
+        height: 100%;
+    }
+}
diff --git a/addons/website/views/snippets/s_three_columns.xml b/addons/website/views/snippets/s_three_columns.xml
new file mode 100644
index 00000000000..5757e223eeb
--- /dev/null
+++ b/addons/website/views/snippets/s_three_columns.xml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_three_columns" name="Columns">
+    <section class="s_three_columns bg-200 pt32 pb32">
+        <div class="container">
+            <div class="row d-flex align-items-stretch">
+                <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
+                    <div class="card bg-white">
+                        <img class="card-img-top" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
+                        <div class="card-body">
+                            <h3 class="card-title">Feature One</h3>
+                            <p class="card-text">Adapt these three columns to fit your design need. To duplicate, delete or move columns, select the column and use the top icons to perform your action.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
+                    <div class="card bg-white">
+                        <img class="card-img-top" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
+                        <div class="card-body">
+                            <h3 class="card-title">Feature Two</h3>
+                            <p class="card-text">To add a fourth column, reduce the size of these three columns using the right icon of each block. Then, duplicate one of the columns to create a new one as a copy.</p>
+                        </div>
+                        <div class="card-footer">
+                            <i class="fa fa-info-circle mr-1"/> <small>Additional information</small>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
+                    <div class="card bg-white">
+                        <img class="card-img-top" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
+                        <div class="card-body">
+                            <h3 class="card-title">Feature Three</h3>
+                            <p class="card-text">Delete the above image or replace it with a picture that illustrates your message. Click on the picture to change its <em>rounded corner</em> style.</p>
+                            <div class="s_btn text-left pb0 pt16" data-name="Button">
+                                <a href="#" class="btn btn-primary btn-sm">Learn more</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="assets_snippet_s_three_columns_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_three_columns/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/temp b/addons/website/views/snippets/snippets.xml
similarity index 96%
rename from temp
rename to addons/website/views/snippets/snippets.xml
index 875c1933b47..e9dda640e4d 100644
--- a/temp
+++ b/addons/website/views/snippets/snippets.xml
@@ -1,48 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="s_three_columns" name="Columns">
-    <section class="s_three_columns bg-200 pt32 pb32">
-        <div class="container">
-            <div class="row d-flex align-items-stretch">
-                <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card bg-white">
-                        <img class="card-img-top" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
-                        <div class="card-body">
-                            <h3 class="card-title">Feature One</h3>
-                            <p class="card-text">Adapt these three columns to fit your design need. To duplicate, delete or move columns, select the column and use the top icons to perform your action.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card bg-white">
-                        <img class="card-img-top" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
-                        <div class="card-body">
-                            <h3 class="card-title">Feature Two</h3>
-                            <p class="card-text">To add a fourth column, reduce the size of these three columns using the right icon of each block. Then, duplicate one of the columns to create a new one as a copy.</p>
-                        </div>
-                        <div class="card-footer">
-                            <i class="fa fa-info-circle mr-1"/> <small>Additional information</small>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card bg-white">
-                        <img class="card-img-top" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
-                        <div class="card-body">
-                            <h3 class="card-title">Feature Three</h3>
-                            <p class="card-text">Delete the above image or replace it with a picture that illustrates your message. Click on the picture to change its <em>rounded corner</em> style.</p>
-                            <div class="s_btn text-left pb0 pt16" data-name="Button">
-                                <a href="#" class="btn btn-primary btn-sm">Learn more</a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-</template>
-
 <template id="s_picture" name="Picture">
     <section class="s_picture bg-200 pt48 pb24">
         <div class="container">