ThemeKit Slide
JumbotronOptional three color gradient heading, span and text.
Action tabs to open slide panel(s) and an optional internal/external link.
Optional three color gradient heading, span and text.
Action tabs to open slide panel(s) and an optional internal/external link.
The ThemeKit Slide Jumbotron widget has an HTML5 <artivle> element over a full with, fixed height image.
The article has a heading, optional span, text, optional slide action tab(s) and an optional internal/external link.
The heading can match the rest of the text or have a three color gradient and use a different Google hosted font with a generic fallback font.
Images
The image is inserted in three sizes with alt for the search engines and a lazy loading option.
The images used in the demo were sized and optiomised before importing into EverWeb …
One or more action tabs can be added to slide in panels. They have an animated chevron icon and share the link's styles.
The action tabs have a checkbox to turn them on, a field for the tab text and a field to enter the tab ID number which obviously must be the same as the slide panel's ID.
The grid can have any amount of items since any overflow will scroll into view. The number of items per row can be set for the various viewing devices.
Grid Items
The items have a lazy loading image with alt text and a caption. The link icon can be positioned at the top left or right of the image.
The items have the option to have a scale on hover animation when view on computers and can have a border and/or a bottom box shadow.
Grid
The gridhas controls for the overlay color and its opacity and for adjusting both the grid column gap and the grid row gap.