ThemeKit AUI

Content Module

AUI Content Module

The ThemeKit AUI Content Module is very versatile. It can act as a trigger and drop box to reduce the quantity of on load content or be open on page load.
Action Tab
The full width optional header is the action teb and has the optional to add an SVG icon, the heading an the animated show/hide icon.
Image
The image is optional and can be centered with a max width setting. It is inerted in two sizes and has a lazy load option.
Text
The first text section has a heading and text with styled spans for sub headings. This is follwed by a list, another heading and text and an optional link which can be configured to open an internal or an external page.
The text, list and second text have the open to have a separator to provide a visual break. The separator has controls for percentage width, height, color and style - dashed, dotted, double and solid.

The list has eight style types
It can have up to 24 items
Controls for list item line height & spacing
Adjustable list item inset

Container

The container is centered with a max width setting in a wrapper whic can have a silid or two color gradient background.
Therre are controls for border width, color and radius and for adding a bottom box shadow. Whne the box shadow is present the bottom spaing should be increased to about 30px.
The item below shows the ThemeKit AUI Content Module closed on page load and demonstrating the auto columns feature to break up long text lines and make it easier to read.

Text Columns & List

The content area can be set up with text auto columns with a heading, paragrapp, optional list and a second paragraph followed by an optional link.
Image
The image is optional and is inserted in two sizes with a checkbox for engaging lazy loading.
Lazy Load
Images for responsive pages must be sized approppriately and optimised before importing into EverWeb and should have the lazy loading function turned on if they are not in view at page load.
Separators
The optional separators are create using the HTML <hr> with some additional styling for line percentage width, height, color and style - dashed, dotted, double or solid.
The height needs to be about 6px or more for a double line.

Resize and optimise images before importing into EverWeb
Insert a smaller image file for mobile devices
Use lazy loading for all images and video files that are not in view on page load

Auto Columns

Text on responsive web pages can spread out as wide as 1200px when inserted in a content width container, At this width it is difficult for the eye to transition from the end of one line to the start of the next. This is why newspapers and magazines use columns for text.
Using CSS auto columns can be created that reduce in number as the browser/device screen with is reduced.
In this example the media queries are set for two columns on computers and tablets and one for mobile phones.
Columns have a control for setting the column gap and for providing a vertical separator if required.