

Public website (h1)
Page updated:
An 'ow-oneCol' layout (h2)
Tagline
This is an 'ow-card'. It adds padding and a box shadow but no colour (it uses the colour of the page). Colour can be added using 'class="ow-theme-aaaX"', where 'aaa' is replaced with 'add' or 'sub' followed by a number 1 - 5. For no shadow use 'ow-container'.
The title is size 'h2', h1 being reserved for the main page title. The first six cards on this page use a style 'ow-titleBar' or 'ow-btnBar' which allows more than one element to appear on the line. They will spread evenly across the available space and are set to align items on their baseline.
Two column layout (h3)
Tagline
This panel is also an 'ow-card' but with a colour - 'ow-theme-add4' and uses an ow-titleBar. The title bar removes all padding and margins from elements so that baseline alignment works correctly.
Title bars also do not wrap their contents so if too many elements are used (or they contain too much), they will overflow the right edge - they will not scroll. This can be over-ridden with styles.
Title
Tagline
This card uses an 'ow-btnBar' which automatically formats buttons as shown. They will always expand unless you set a max width or give it a style 'flex-grow:0;'. Button bars do wrap.
The above button bar has been set to vertically align items centrally - the default is to stretch. Again this can be over-ridden with classes: 'ow-flex-top', 'ow-flex-center', 'ow-flex-bottom' or 'ow-flex-baseline'.
Three Column Layout
Three column layout
Card content
Title
Card content
Title
Heading styles
This is h4
This is h5
This is h6
Four Column Layout
ow-gradientSub
TT
ow-gradientTheme
Three gradient classes are available
Be aware that setting a panel to be wider than its siblings may cause problems on small screen.
To see how this has been achieved, look at the html code line 171. & 186
Five Column Layout
ow-theme-add5
Click me