                 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 h-box and v-box, which lay out their children horizontally and vertically respectively."]
+               [: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

               :children [[left-column]
                          [right-column]]]
              [line]
              [flex-property]]])

;; core holds a reference to panel, so need one level of indirection to get figwheel updates
(defn panel

   :children [[title :level :level2 :label "Flexbox"]
              [paragraphs
               [:p
                "Re-com's layout model is a thin layer over " [:span.bold "CSS Flexbox"] "."]
               [:p "While Re-com's components work in their own right, to understand them fully and use them
               powerfully, you " [:span.bold "will"] " need to have a strong understanding of Flexbox. Do these tutorials very soon:"]
               [:ul
                [:li
                 [hyperlink-href
                  :label "CSS-Tricks guide to flexbox"
                  :href "https://css-tricks.com/snippets/css/a-guide-to-flexbox"
                  :target "_blank"]]
                [:li
                 [hyperlink-href
                  :label "The Ultimate Flexbox Cheat Sheet"
                  :href "http://www.sketchingwithcss.com/samplechapter/cheatsheet.html"
                  :target "_blank"]]]

               [:p "Flexbox works via the interplay of " [:span.bold "container"] " (parent) styles and " [:span.bold "item"] " (child)
               styles. In any interesting layout, intermediate DOM elements play the role of both container and item."]
               [:p "But, if block-level elements (divs?) are inserted, they
               can break the flex style interplay up and down the DOM hierarchy, and cause a variety of layout issues."]
               [:p [:span.bold "As a result, we have found Flexbox use to be quite viral."] " Once you start using it, you
               have to use it everywhere - right up and down the DOM tree."]
               [:p "So, we recommend you go 100% all-in on using h-box and v-box. If you do, everything should \"just work\"."]
               [:p [:span.bold "Never use a naked [:div]"] " or you may spend alot of time playing layout whack-a-mole (unless
                you adroitly apply the correct flexbox styles to that :div, which is ardulous and error prone.)"]

               ;[gap :size "10px"]
               [title :level :level2 :label "Non-Flex Leaf"]
               [:p "When we first put bootstrap buttons into re-com, they were streched.
               It turned out their block display didn't play well with flex containers like h-box."]
               [:p "So we created the " [:span.bold "[box ...]"] "  component which allows you to wrap
               non-flex leaf widgets for use in flex containers."]
               ]]])


(defn size-table
  []
  (let [col1 "50px"
        col2 "130px"
        col3 "500px"]
    [v-box
     :children [[title :level :level2 :label ":size"]
                [paragraphs
                 [:p "v-box and h-box have a parameter called :size. This mirrors the flex sytle. In the Flexbox world, there are two parties in any layout - " [:span.bold "containers"] " and their child " [:span.bold "items"] "."]
                 [:p "While the tutorials walk you through the menagerie of flexbox related styles, we've found that one style more than any other is
                 critical to getting what you want: the " [:span.bold "flex"] " style of the children."]
                 [:p "When we're having a bad day with layouts, 90% of the time it is because we didn't get the flex style of a child right."]]
                [v-box
                 :class "rc-div-table"
                 :align-self :start
