# 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

button

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

Click me
Text in button bar aligns top
Or Me

### 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

Basic LED:

###### h6 title

Small basic LED:
Basic round LED:
Small round LED:
Brick LED:
Lozenge LED:
Oval LED:

## 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

### Six column panels

ow-theme-add2
ow-theme-add2
ow-theme-add2
ow-theme-add2
ow-theme-add2
This card has no colour so illustrates how the seagull works.

### Modal Title

This modal demonstrates using both flexboxes; for the initial 'body' container, and then columns from the w3Pro stylesheets to align the buttons.

Temperature:
°C
°F
Pressure:
hPa
inHg
mb
kPa
Cloud Base:
m
ft

Powered by Cumulus MX