Media

ThemeKit Unit Hero 1
Image [1]
ThemeKit Unit Hero 2
Image [2]
ThemeKit Unit Hero 3
Image [3]
ThemeKit Unit Hero 4
Image [4]

Unit Hero

From one to six animated images - round or square - with adjustable animation time and delay.

InFO
ThemeKit Unit Article

Article

The article is the basic building block for a responsive web page. It needs to have some character to create a unique visitor experience.
Layout
The two column grid layout has controls for relative column size and to switch the items from one column to the other.

INFO
ThemeKit Unit Article

Anmation

Animation applied to items should be unique and smooth the minimum of movement to avoid effecting those with motion sensitivuty
Mobile
In genaral animation should be turned off for mobile phone users since it confuses rather than impresses visitors.

INFO

DROP BOX

ThemeKit Unit Drop Box

Drop Box Content

The box has an option for an image, a heading, text, an optional list, more text and a link. The header is the trigger and has a heading and an action icon.
Action Icon
The icon can have a border which can be made round by checking a box.

  • The image can be inserted in two sizes for computer and mobile devices
  • The images have a lazy loading option
  • The list can have up to 48 items
  • The most used list style types are included
  • Ajustable list inset and item spacing

The item can be open for editing and several can be stacked to work in unison.

More Info

Drop Cap Marker

1 A drop cap is used to draw attention to the first letter of the first paragraph by using a selector to target the first letter of the first paragraph.
In this case it is used to add a large letter or number to draw attention to the content or to create sequential blocks of text to separate them and make them easy to find.

Drop Caps
The drop cap is created by adding a class name to the first <p></p> in the text block.
The first letter or number has controls for the font size, weight, style, line height, padding, spacing, color, background color, padding and for a border.

More
Subsequent paragraphs can be added as required using a styled span for sub headings if required.
If the marker option is not selected the widget can be used as a text container with one or more paragraphs.

Link [1]

Marker List

The Marker List widget has a main heading, text, optional list, optional second heading and text block and one or two optional internal links.

  • 1The list item has a ::before pseudo selector for adding the custom marker using the CSS code version of any HTML character or symbol
  • 2The marker is inserted in column one and the text in column two
  • 3Using a grid allows the custom marker to be in the "outside" position just like a default list
  • 4When the list item text runs to two or more lines the marker can be positioned vertically at the top or center as required
  • 5This example shows how the marker can be removed and replaced by a letter(s) or a number

Markers

The markers can be the CSS equivalent of any HTML entity or symbol. The widget has a link to open a website with 100s of items.
Choose the required symbol, double click it to show the CSS code. Copy the code and paste it into the widget setiings.

Link [1]Link [2]