
AI Development Page
Click me
Current Available Data
Below is a two column flex box (style: "ow-twoCol") with each row forced to be equal height. This can be changed by adding the class ow-flex-top or ow-flex-center or ow-flex-bottom. Children have to be a "div" element.
You do need to add a margin to the bottom of one column panels.
Card title
Aside
This is a 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.
0 | 1 | 2 |
---|
The first three card use a style 'ow-titleBar' 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.
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. Ther 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 as shown below.
Left aligned
Centered
Right aligned
Three columns panel
h4 title
Colour: ow-theme-add4
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-add3
This container uses the animation: 'ow-animate-fadeIn'. Animations can be used on any element.
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
Four Column panels
h5 Title
h5 title
Theme: ow-theme-sub1
Theme: ow-theme-sub3
Theme: ow-theme-sub4
Theme: ow-theme-sub5
Five column panels
One
You can click this panel to show the modal popup.
Two
This card have no colour so use the page background colour.
Three
Four
Five
Six