                         [box :size \"100%\" :child \"Content\"]]
             [box :child \"Footer\"]]]"]
                [gap :size "15px"]
-               [:p "the result looks like this..."]
-               ;[gap :size "10px"]
+               [:p "results in:"]
 
                [v-box
                 :gap      "1px"

            [re-demo.utils :refer [panel-title component-title paragraphs]]))


(defn left-column
  []
  [v-box
   :children [[title :level :level2 :label "Components"]
              [paragraphs
               [:p "Re-com comes with a flexible set of layout components. In general, these
                components are not themselves visible."]
               [:p "Instead, their purpose is to arrange other components."]
               [title :level :level2 :label "Two Boxes"]
               [:p "The two key components are " [:span.bold "h-box"] " and " [:span.bold "v-box"] ", which lay out
               their children horizontally and vertically respectively."]
               [:p "They are mutually composable, and can be arbitrarily nested to create complex arrangements."]
               [:p "Here's example code showing them nesting..."]]
               [:pre
                {:style {:width "460px"}}
"[v-box

                             :class "rc-div-table-row"
                             :children [[label :width col1 :label "g s b"]
                                        [label :width col2 :label "grow shrink basis"]
                                        [:span {:style {:width col3}} "If none of the common values above meet your needs, this gives you precise control."]]]]]]]))


(defn the-key-style
