ThemeKit Grid

Grid Article

ThemeKit Grid Article Main
Main Image
Size 800 x 600px
ThemeKit Grid Article 2
Small Images
400 x 300px
ThemeKit Grid Article 3
All Images Have
Same Aspect Ratio

Grid Article

This is a two column and three row grid layout with a column ratio of 2:1 on screen widths above the breakpoint. This article element with the text is optional.
The main image is in column one and spans two rows. The satellite images are in column two and each occupy one row.
Images
Each image has the option for a caption and to be configured as an internal link. The link icon appears at the top right and the caption can appear on hover if required.
The images can be lazy loaded if they are not in the viewport at page load.
The images can have a border and are spaced out using the grid gap control. In this example the grid padding is set to the same value as the gap.
Article
The optional text area has a heading, text, styled spans and an optional CTA 9call to action) style internal/external link with a new window option.
Text Width
When text becomes wider than about 100px it becomes more difficult for the eye to jump from the end of a line to the begining of the next. To overcome this the text area can be centered with a maximum width setting.

Grid Links

The links have the option to show a chevron right icon and have controls for adjusting their horizontal and vertcial spacing.and border radius.
Hover Animation
The links can scale on hover and can also have a box shadow on hover with controls for shadow radius, spread and color.
Repeating Background Colors
The links can all have the same background color or, by checking a box, they can have a sequence of four different background colors which repeats as links are added using the CSS nth-of-type selector.

© EverWeb Widgets -

MENU