feature card

app/models/merged/image.rb

@@ -20,6 +20,7 @@ module Merged
     end
 
     def ratio
+      return 0 unless self.height
       self.width.to_f / self.height
     end
 

app/views/merged/form/form.haml

@@ -1,9 +0,0 @@
-.flex.flex-col.m-20
-  .flex.items-center.justify-center.flex-1
-  - @errors.each do |name , message|
-    .m-5.rounded.border-l-4.border-green-500.bg-red-50.p-4
-      %strong.font-medium.text-red-700= name.capitalize
-      .mt-2.text-sm.text-red-700= message
-
-- template = find_template(@section)
-= render( template , section: @section)

app/views/merged/view/cards/_card_feature.haml

@@ -1,8 +1,8 @@
 .max-w-md.sm:mx-auto.sm:text-center
-  .flex.items-center.justify-center.w-16.h-16.mb-4.rounded-full.bg-indigo-50.sm:mx-auto.sm:w-24.sm:h-24
-    %svg.w-12.h-12.text-deep-purple-accent-400.sm:w-16.sm:h-16{:stroke => "currentColor", :viewbox => "0 0 52 52"}
-      %polygon{:fill => "none", :points => "29 13 14 29 25 29 23 39 38 23 27 23", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "3"}
-  %h6.mb-3.text-xl.font-bold.leading-5 The deep ocean
-  %p.mb-3.text-sm.text-gray-900
-    A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear. We never had the chance to.
-  %a.inline-flex.items-center.font-semibold.transition-colors.duration-200.text-deep-purple-accent-400.hover:text-deep-purple-800{"aria-label" => "", :href => "/"} Learn more
+  .flex.items-center.justify-center.mb-4.rounded-full.mx-auto.w-40.h-40{options(card,:background )}
+    = image_for( card , "h-20 w-20")
+  %h6.mb-3.text-xl.font-bold.leading-5{options(card, :color)}= card.header
+  .mb-3.text-sm.text-gray-900{ prose_classes }
+    = markdown(card)
+  - if card.has_option?("button_link")
+    %a.inline-flex.items-center.font-semibold.transition-colors.duration-200.text-deep-purple-accent-400.hover:text-deep-purple-800{"aria-label" => "", :href => "/"} Learn more

config/merged/card_styles.yml

@@ -49,6 +49,20 @@
     - text_align
     - subheader
     - order
+- template: card_feature_normal
+  header: Card looking feature
+  text: For things where no image is available or apropriate.
+        Making lists a little more interesting to look at.
+        May use svg as image.
+  fields:
+    - header
+    - text
+  options:
+    - background
+    - color
+    - text_align
+    - button_link
+    - button_text
 - template: card_normal_round
   header: Standard card with rounded look
   text: Otherwise quite similar to standard. But there is gap under the image.