diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index ab0fa13769f..afda9ebd727 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -38,6 +38,7 @@
         'views/snippets/s_picture.xml',
         'views/snippets/s_carousel.xml',
         'views/snippets/s_alert.xml',
+        'views/snippets/s_card.xml',
         'views/website_views.xml',
         'views/website_visitor_views.xml',
         'views/res_config_settings_views.xml',
diff --git a/temp_scss b/addons/website/static/src/scss/website.scss
similarity index 99%
rename from temp_scss
rename to addons/website/static/src/scss/website.scss
index 423049beec8..e60874e325b 100644
--- a/temp_scss
+++ b/addons/website/static/src/scss/website.scss
@@ -944,20 +944,6 @@ table.table_desc tr td {
 }
 
 
-// Card
-.s_card {
-    margin: $grid-gutter-width/2 0;
-    .card-body {
-        // color: initial;
-        p, ul, ol {
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
-    }
-}
-
-
 // Share
 .s_share {
     > * {
diff --git a/addons/website/static/src/snippets/s_card/000.scss b/addons/website/static/src/snippets/s_card/000.scss
new file mode 100644
index 00000000000..436d9a709f1
--- /dev/null
+++ b/addons/website/static/src/snippets/s_card/000.scss
@@ -0,0 +1,12 @@
+
+.s_card {
+    margin: $grid-gutter-width/2 0;
+    .card-body {
+        // color: initial;
+        p, ul, ol {
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
diff --git a/addons/website/views/snippets/s_card.xml b/addons/website/views/snippets/s_card.xml
new file mode 100644
index 00000000000..b809d8a2ad7
--- /dev/null
+++ b/addons/website/views/snippets/s_card.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_card" name="Card">
+    <div class="s_card card bg-white w-100">
+        <h4 class="card-header">Feature Title</h4>
+        <div class="card-body">
+            <p class="card-text">A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.</p>
+        </div>
+        <div class="card-footer">
+            <i class="fa fa-1x fa-clock-o mr8"/><small>2 days ago</small>
+        </div>
+    </div>
+</template>
+
+<template id="assets_snippet_s_card_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_card/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/temp_xml b/addons/website/views/snippets/snippets.xml
similarity index 99%
rename from temp_xml
rename to addons/website/views/snippets/snippets.xml
index 195d41475b1..38d69ecf30b 100644
--- a/temp_xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1,18 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="s_card" name="Card">
-    <div class="s_card card bg-white w-100">
-        <h4 class="card-header">Feature Title</h4>
-        <div class="card-body">
-            <p class="card-text">A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.</p>
-        </div>
-        <div class="card-footer">
-            <i class="fa fa-1x fa-clock-o mr8"/><small>2 days ago</small>
-        </div>
-    </div>
-</template>
-
 <template id="s_share" name="Share">
     <div t-attf-class="s_share #{_classes}">
         <h4 t-if="not _no_title" class="s_share_title">Share</h4>