ThemeKit UI

Arrays

ThemeKit UI

ThemeKit UI Info Array 1

On Load

Items

On page load the items show a heading, an action icon and an image with alt text and a lazy loading option.

Cards

Info Array

ThemeKit UI Info Array 2

Array

Layout

The array can have two, three or four items. It can be set to a two column two row grid by adding four items and setting the number of items to two.

Card Gallery

Action

ThemeKit UI Info Array 3

Active

Trigger

Clicking/rapping anywhere will activate the overlay.
Close by clicking tapping outside the text content area or by opening another item.

Card Media

Over;ay

ThemeKit UI Info Array 4

Content

Links

The heading and text are default with an optional styled span.
The optional links can be globally configured to open internal or external pages.

Info Cards

Info Array

The ThemeKit UI Info Array has an active overlay on click or tap. This example shows the two column, two row grid option created by adding four items but selecting the number of items as two.

Image Array

Layout

ThemeKit UI Image Array 1
Grid

The grid can have two, three or four items. When 3 are present the last one is centered in row 2 below the breakpoint.

Image 3 Grid

Items

ThemeKit UI Image Array 2
Content

Items have a heading, lazy load image, styled span, text & a link globally switchable to internal or external.

Images

Animation

ThemeKit UI Image Array 3
Heading

The heading can have a gradient background and optional staggered animation with controls for time and delay.

Image Grid

Icon Array

Grid

Items

The grid can have 2, 3 or 4 items.
When three are present the last one is centred in row 2 below the breakpoint.

Scroller

Content

Price/Date

The styled span is optional.
The links have a hover animation & can be globally switched from internal to external.

Gallery

Icons

SVGs

The SVG icons have controls for icon colours background, padding, border width, color and radius and a checkbox to make them round,

Jumbotron

Animation

Headings

Headings can have a gradient background and animate.
The animation time is the same for each heading but the delay is staggered

Image 3 Grid

Text Array

1Text Array

Layout

A grid layout with two, three or four columns.
When three columns are present the last one is centered in row two below the breakpoint.

Flip

2Content

Styled Span

Each item has an animated heading, optional styled span, text and a link.
Links can be switched globally between internal & external.

Lists

3Prefix

Number/Letter

The heading has a two column grid layout with the option for a letter or number prefix field with variable width.
It has controls for font size, color and background color.

Sticky Stuff

4Animation

In View

The heading text can animate in when the array enters the viewport.
The animation duration is variable and the delay is set at 500ms milliseconds.
The delay is staggered by the interval set by the value for delay.

Scrollbox

Icon - Image - Text

Layout

The ThemeKit UI Array widgets have a grid layout for 2, 3 0r 4items. A two column, two row grid can be created by setting the number of items to 2 and adding 4 items
Animation
The heading has an optional animtion with a control for animation duration. The animation delays are staggerd for a better visual experience.

Container Styles

The containers have controls for border width, ccolor and radius and for a bottom box shadow radius, spread and color.
The item spacing is adjusted using the column gap and row gap controls and the wrapper has controls for top, horizontal and bottom spacing.. The bottom spacing is increased to make room for the borttom box shadow.