The article is the basic unit in responsive website design and should be used to replace separate images and text boxes.
The image has a lazy loading option and the optional link can open internal or external pages.
Layout
The two column grid layout has adjustable relative column widths and the text can be above or below the image below the breakpoint.
The ThemeKit Expo iBox Article shows an image with a zoom icon and the text is set to overlap the image.
The optional info and buy links are displayed.
The grid layout has an image with a zoom icon and an <article> with heading, text and an optional link.
Lightbox
The image is the action tab to open the large image in an overlay with a caption and options for a border, bottom box shadow and adjustable overlay background color and opacity.
Images
The zoom image file is inserted in two sizes and has a lazy load function to prevent it from slowing the page download and TTI (time to interactive) times on mobile devices.
Links
There is an optional internal/external info link which shows an info icon by default which can be replaced with any of the 100s available in the ThemeKit Expo download folder.
The optional Add to Cart link has the option for a bag, basket or cart icon and accepts the link to the item on an eCommerce website.
The ThemeKit Expo Header widget creates an h1 heading and has the option to have a text or an image logo.
The logo in either form is configured as an optional link which normally opens the home page.
Fonts
The heading can use a Google hosted font with a web safe fallback . Since the logo has a text opton this too can be a different Google hosted font.
Show/Hide
The header will be hidden on scroll down and reappears on scroll up or when the bottom of the page is reached.
The header can be set to clear the item below it or to overlap it at the top by checking a box.
Over a decade ago headings were usually required to be h1 through h6. Using HTML5 only requires h1 through h3.
EverWeb ThemeKit uses HTML5 for item containers. Search engines regard each HTML5 container as a "mini page" so the first heading in the container is always an h1.
Website navigation should always be vertical since a horizontal menu at the top has proved to be inefficient at getting visitors to click through to other pages of the site.
The side menu slides out from the right hand edge of the viewport and fills its height. It can have any number of links.
Overflow Scroll
When the number of links excedes the browser or device window height any overflow will scroll into view.
Action Tab
The action tab has an animated icon and a text label. Its position relative to the top and right is adjustable and its position is fixed so that it always remains in view.
