ThemeKit UI

Image 1 - 3 Grid

ThemeKit UI 3 Image Grid

tkui Image 3 Grid
Image Inserted
In Two Sizes

Info

Using one component to insert a header, images, text content and a list uses a lot less code and will download faster than when using separate items. The common styles are inserted via a minified external stylesheet for maximum efficiency.
Layout
This type of three image grid is very popular and used to reequire a lot of code to get it right. Using the CSS3 Grid Layout Module makes it easier and uses a lot less code. In this example the header is inserted with the heading aligned left and the image caption is inserted as two lines.
Images
A single image is shown with the caption and link icon shown on page load. The images are lazy loaded and inserted in two sizes …

  • Large Image: 960 x 480px - file size 70KB
  • Mobile Image:: 720 x 360px - file size 50KB

Container

The container has an opacity slider on the backgrounf color control. It has controls for border width, color and radius and for bottom box shadow radius, spread and color.

Three Image Combo

ThemeKit UI 3 Image Grid

tkui Image 3 Grid
Main - 720 × 540px
File Size 56KB
Sidebar Top
400 x 300px
Sidebar Bottom
No Link

Image Info

This example shows the optional header with the text aligned center.
The grid has a main image and two sidebar images. Any or all of the images can be configured as internal links.
The images can be lazy loaded and the caption can run to two or more lines. The caption and lin icon can appear on hover on computers.
The images used in the demo are

  • Large Image: 960 x 720px - file size 77KB
  • Sidebar Image:: 400 x 300px - file size 20KB

Optional Article Element

The article has a text area with a heading, text, an optional list, an optional second heading and another otpional text block.
Article Width
The article has a max width setting so that the text lines can be kept shorter for better readability whn the container has a larger max width.