column number option for 2_col, also bg

app/helpers/merged/merged_helper.rb

@@ -23,8 +23,9 @@ module Merged
 
     def order_option(section)
       return {} unless section.has_option?("order")
-      puts "Order #{section.option('order')}"
+      option = section.option('order')
-      return {} if section.option("order") == "right"
+      puts "Order #{option}"
+      return {} if option == "right"
       {class: "order-last"}
     end
 
@@ -42,6 +43,21 @@ module Merged
       {class: background}
     end
 
+    def column_option(section)
+      option = section.option('columns')
+      option = 2 if option.blank?
+      puts "Columns #{option}"
+      case option
+      when "3"
+        columns = "grid-cols-1 md:grid-cols-3"
+      when "4"
+        columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+      else # two
+        columns = "grid-cols-1 md:grid-cols-2"
+      end
+      {class: columns}
+
+    end
     def button(text , url , color)
       link_to(url) do
         content_tag(:button , class: color + " " + button_classes ) do

app/views/merged/view/_section_2_col.haml

@@ -1,4 +1,4 @@
-.flex.flex-col.bg-cyan-100.mx-5
+.flex.flex-col.mx-5{ background_option(section)}
   .flex.items-center.justify-center.flex-1
     .max-w-prose.px-4.py-8.mx-auto.text-center
       %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
@@ -6,6 +6,6 @@
       %p.mt-4.text-gray-500
         = section.text
   - template = "merged/view/cards/" + section.card_template
-  .grid.grid-cols-1.md:grid-cols-2
+  .grid{ column_option(section)}
     - section.cards.each do |element|
       = render( template , element: element)

config/styles.yaml

@@ -8,6 +8,11 @@ sections:
   fields:
     - header
     - text
+  options:
+    - background
+    - columns
+    - button_link
+    - button_text
 - template: section_full_up
   header: Centered Header with text
   text: Full width header with centered headline and optional text
@@ -53,6 +58,11 @@ options:
       during scrolling
     values: on off
     default: off
+  - name: columns
+    desciption:
+      Number of columns in a layout that supports cards
+    values: 2 3 4
+    default: 3
   - name: background
     desciption:
       Slight background color