ThemeKit Block Header

Block Hero Split

Rotate and scale image with offset box shadow on a two tone, clip-path background with adjustable angle.

Sticky Nav

A sticky navigation is one that can be placed anywhere in the stack of items on the page and will scroll up and stick at a preset distance from the top so that it always remains in view.
The ThemeKit Block Sticky nav at the top of this page can align the links left, center or right and has the optional to insert a logo link in the first column.
This type of navigation used to require Javascript but the effect can now be created using the CSS position "sticky".

Hero Split

The Block Hero Split has a two column grid layout with an image in one column and a text block with optional link in the other. The position of the items can be switched by checking a box.
Angle
The angle can be adjusted using a slider and can be variable left or right or set vertical.
Image
The image can have a border and/or an offset box shadow. It can be rotated at position or negative angle.There is a slider to reduce the scale to prevent the image from breaking out of the container.

ThemeKit Block Links

Linsk inside text are pretty much useless nowadays since more visitors are using mobile devices and text links are not user friendly.
These block links can be used below text to link to any source mentioned in the text.
Layout
The links are inserted in a CSS grid layout using "minmax" along with the "auto-fit" keyword. This allows the number of items per row to automatically adjust to the browser/device screen width by setting a minimum width without using media queries.
The wrapper has controls for setting a two color gradient with adjustable angle and controls for horizontal and vertical spacing and for setting the grid column gap and the row gap.
Links
Included in the links controls are those for for settting the backgroun color and hover color. The background color has the hover animation.
Animation
Each link can have a different animation. Thes are created using a small external style sheet and the animation types are left | right | down | up | horizontal | vertical
The animation time is set in milliseconds.

ThemeKit Fade In

On this page the Block Fade In widget is inserted above the footer widget with a height of 20px and a gradient backgound to match that of the other items on the page.
Setting the animation time tof 1200ms allows the page content to load smoothly and gives larger images time to download.