card styles and previews

app/views/merged/styles/index.haml

@@ -1,7 +1,10 @@
+.px-4.py-8.mx-auto.text-center
+  %h1.text-4xl.font-bold
+    Section styles
 .grid.grid-cols-3.gap-4.m-8
-  -@styles.each do |style|
+  -@sections.each do |style|
     %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
-      =image_tag(style.preview , class: "h-56 w-full object-contain lg:h-72")
+      =image_tag(style.section_preview , class: "h-56 w-full object-contain lg:h-72")
       %p.mt-2.text-sm.text-gray-500
         =style.template
     %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
@@ -23,3 +26,25 @@
             Section may include cards. See card styles below
           -else
             Section may not include cards
+
+.px-4.py-8.mx-auto.text-center
+  %h1.text-4xl.font-bold
+    Card styles
+.grid.grid-cols-3.gap-4.m-8
+  -@cards.each do |style|
+    %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+      =image_tag(style.card_preview , class: "h-56 w-full object-contain lg:h-72")
+      %p.mt-2.text-sm.text-gray-500
+        =style.template
+    %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+      .p-6
+        %h3.text-lg.font-medium.text-gray-900
+          =style.header
+        %p.mt-2.text-sm.leading-relaxed.text-gray-500.line-clamp-3
+          = style.text
+    %article.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm
+      .p-6
+        %h3.text-lg.font-medium.text-gray-900
+          Option
+        %p.mt-2.text-sm.leading-relaxed.text-gray-500.line-clamp-3
+          Following options: none (wip)