
AI Development Page
Click me
Current Available Data
Below is a two column flex box (style: "ow-twoCol") containing 4 cards. Each row is forced to be equal height unless you by add the class ow-flex-top or ow-flex-center or ow-flex-bottom to the div containing the xxxCol class. Children have to be "div" elements.
You do need to add a margin to the bottom of one column panels.
Card title
Aside
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.
The first three card use a style 'ow-titleBar' which allows more than one element to appear on the line. They spread evenly across the available space and are set to align items on their baseline. Hence the button in the next card overlaps the bottom edge.
Card Gradients
Paragraph
This card is coloured using a gradient (class='ow-Gradient1'). This uses three adjacent theme colours dark to light whether or not you use a normal or dark theme. There is also an 'ow-Gradient2' class which is usually a step lighter. Text is the either light or dark depending on the gradient colour but You may want to manually add the required theme colour for any text placed in the card.
The gradient uses screen height units, so the dark section at the top will be smaller on shorter screens.
Title Bars
Title bars can be used anywhere on the page. As stated, by default content is aligned on the baseline. You can modify this by adding the classes mentioned in panel 1 above. You should always use either an ow-titleBar or an ow-btnBar on gradient panels.
Title Bars don't wrap so if there is too much in them it will disappear off the right edge of the bar. This can be modified by adding the style flex-flow: row wrap to the div.
Panel Sizes & Alignment
Panels can be set to one of 6 sizes: 1 to 6 columns. These will display the indicated number of columns on a large screen but automatically resize down to a minimum on smaller devices. If an odd number of cards or containers are used, these will center at the same size as the other panels in the row as can be seen below.
Basic Containers
Containers have no box shadow but they do have the same padding as cards. They can be coloured using a theme or gradient and can contain title bars and button bars (ow-btnBar) as shown below.
Left aligned
Centered
Right aligned
Three columns panel
h4 title
Colour: ow-theme-add5 (Same as page)
This container also uses an animation: 'ow-animate-drop' which is also used for the menus. Animations should only be used sparingly.
h4 title
Colour: ow-theme-add4
This container uses the animation: 'ow-animate-fadeIn'. Animations can be used on any element.
h4 title
Colour: ow-theme-add3
h4 title
Colour: ow-theme-add2
h4 title
Colour: ow-theme-add1
h4 title
Colour: ow-theme
h4 title
Colour: ow-theme-sub1
h4 title
Colour: ow-theme-sub2
h4 title
Colour: ow-theme-sub3
h4 title
Colour: ow-theme-sub4
h4 title
Colour: ow-theme-sub5
Four Column panels
h5 Title
h6 title
Five column panels
One
You can click this panel to show the modal popup.
Two
These cards have no colour so use the page background colour.
Three
Four
Five