diff --git a/addons/website/static/src/snippets/s_faq_collapse/000.scss b/addons/website/static/src/snippets/s_faq_collapse/000.scss
index af236dea178..2cf4ab127d0 100644
--- a/addons/website/static/src/snippets/s_faq_collapse/000.scss
+++ b/addons/website/static/src/snippets/s_faq_collapse/000.scss
@@ -1,35 +1,115 @@
-
 .s_faq_collapse {
     .accordion .card {
         .card-header {
             cursor: pointer;
             display: inline-block;
             width: 100%;
-            padding: .5em 0;
+            position: relative;
+            padding: .5em 1em;
+            padding-left: 2.25em;
             border-radius: 0;
             outline: none;
             &:before {
-                content:'\f056';
+                content: '\f056';
                 font-family: 'FontAwesome';
-                display: inline-block;
-                margin: 0 .5em 0 .75em;
                 color: $gray-600;
+                position: absolute;
+                margin-left: -1.5em;
             }
             &.collapsed:before {
-                content:'\f055';
-                font-family: 'FontAwesome';
+                content: '\f055';
             }
             &:hover,
             &:focus {
                 text-decoration: none;
             }
         }
+        .s_faq_collapse_right_icon {
+            padding-left: 1em;
+            &:before {
+                position: static;
+                float: right;
+                margin-left: 0;
+            }
+            & + div .card-body {
+                padding-left: 1em;
+            }
+        }
         .card-body {
-            padding: 1em 2.25em;
+            padding: 1em;
+            padding-left: 2.25em;
         }
     }
     .card-body p:last-child,
     .card-body ul:last-child {
         margin-bottom: 0;
     }
+    &.s_faq_collapse_light {
+        .accordion .card {
+            border-left: 0;
+            border-right: 0;
+            border-radius: 0;
+            .card-header {
+                background-color: transparent;
+                &:before {
+                    content:'\f068';
+                }
+                &.collapsed:before {
+                    content:'\f067';
+                }
+            }
+            .s_faq_collapse_right_icon {
+                padding-left: 0;
+            }
+            .card-header + div .card-body {
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
+    }
+    &.s_faq_collapse_big {
+        .accordion .card {
+            border: 0;
+            .card-header {
+                background-color: transparent;
+                font-size: $font-size-lg * 1.5;
+                &:before {
+                    content:'\f068';
+                }
+                &.collapsed:before {
+                    content:'\f067';
+                }
+            }
+            .s_faq_collapse_right_icon {
+                padding-left: 0;
+            }
+            .card-header + div .card-body {
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
+    }
+    &.s_faq_collapse_boxed {
+        .accordion .card {
+            border: 0;
+            margin: $btn-padding-y-lg 0;
+            &:first-child {
+                margin-top: 0;
+            }
+            &:last-child {
+                margin-bottom: 0;
+            }
+            .card-header {
+                border: 0;
+            }
+            .card-header.collapsed {
+                background-color: transparent;
+            }
+            .collapse.show, .collapsing {
+                .card-body {
+                    background-color: rgba(0, 0, 0, 0.03) !important;
+                }
+            }
+        }
+    }
 }
diff --git a/addons/website/views/snippets/s_faq_collapse.xml b/addons/website/views/snippets/s_faq_collapse.xml
index 649d4b02f42..1189252f60b 100644
--- a/addons/website/views/snippets/s_faq_collapse.xml
+++ b/addons/website/views/snippets/s_faq_collapse.xml
@@ -36,6 +36,25 @@
     </section>
 </template>
 
+<template id="s_faq_collapse_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-selector=".s_faq_collapse">
+            <we-select string="Card Style">
+                <we-button title="Default" data-select-class="">Default</we-button>
+                <we-button title="Light" data-select-class="s_faq_collapse_light">Light</we-button>
+                <we-button title="Boxed" data-select-class="s_faq_collapse_boxed">Boxed</we-button>
+                <we-button title="Big" data-select-class="s_faq_collapse_big">Big</we-button>
+            </we-select>
+            <we-button-group string="Collapse Icon" data-apply-to=".card-header">
+                <we-button title="Left" data-select-class=""
+                    data-img="/website/static/src/img/snippets_options/pos_left.svg"/>
+                <we-button title="Right" data-select-class="s_faq_collapse_right_icon"
+                    data-img="/website/static/src/img/snippets_options/pos_right.svg"/>
+            </we-button-group>
+        </div>
+    </xpath>
+</template>
+
 <record id="website.s_faq_collapse_000_scss" model="ir.asset">
     <field name="name">Faq collapse 000 SCSS</field>
     <field name="bundle">web.assets_frontend</field>