Array Hero
Vertical AdjustThe text block can be aligned top, center or bottom and has a fade in onload animation option.
CardsImages
ThemeKit Array
Layout
A grid layout row with two, three or four items.
When three items are present the last one is centered itself in row two below the break point.
The icons and links are optional.
Content
Each item is an HTML5 <article> and also has a grid layout with three rows for the header, text and the optional link.
Auto Height
The items all stretch to the same height despite having varying amounts of content.
Icons
The optional SVG icons can be coated left or, by checking a box, center themselves above the text.
The icons have controls for icon size, color, background, padding, border width color and radius and a checkbox to make the round.
Animation
The items have the option to animate up and in when they appear in the viewport.
Checking a box staggers the animation of the individual items.
Animation can be turned on for mobile phones if required.
Text Array
The ThemeKit Array Text widget has the option to add icons and/or links. The SVG icon can be floated left to allow the text to wrap around it to save space.
Checking a box moves the icon to the center of the container above the text if the icon needs to be large and more prominent.
SVG Icons
SVG icons should be used to replace PNG icons which should not be used on a responsive website. They are much more efficient and have better quality than Font Awesome icons.
To insert an SVG icon …
- Download the icon download folder using the link in the widget packs "Read Me First" document.
- Double-click the icon to open it in TextEdit.app in plain text mode or use a code editor
- Copy the code and paste it into the box in the widget settings
Animation
The items can animate in and up and, by checking a box, the animation can be staggered.
The items can overlap the item above if required as show above. Simply set the "Overlap Item Above" control to the required number of pixels.
Icon Array
Layout
The columns are created using the CSS Grid Layout Module.
Each column has an <article> element which can have a border and/or a bottom box shadow.
The article has an animated heading, text and an optional link.
Columns
The widget can have two, three or four columns.
When there are three columns the last one is centered in row 2 below the break point.
The columns stack vertically on mobile phones in portrait mode.
Icons
The icons are SVGs and are inserted by opening the SVG download folder, choosing one of the 100s of icons, double clicking the file to open it in TextEdit in plain text mode.
Copy the code and pasting it into the SVG code box in the widget settings.
Animation
The custom animation uses a single keyframe and the animation time and delay are adjustable in milliseconds.
Delay
Checking a box will add a staggered delay using the nth-of type selector.
The different delays are calculated automatically.
Icon Array
The ThemeKit Array Icon widget grabs attention with the item header which has an SVG icon and the heading. For a n enhanced effect the heading can animate out from behind the icon.
Checking a box staggers the animation by varying the delay times which is set up automatically using CSS calc.