ThemeKit UI Hero
Stage & CurtainsOptional header and logo link with an article containing a heading, an optional span, text and optional links.
ThemeKit UI
Hero Stage
The ThemeKit UI Hero Stage widget on load shows an image which is split into two to create curtains and an animated action tab with a tooltip on hover or click.
Header
The optional header sits above both the curtains and the stage. It has an option for a logo/internal link at the left leaving space for a navigation menu's action tab at the right.
Text Area
The text block is inserted in an HTML4 <article> elent and has a heading, an optional styled span, text and optional links.
The links can open internal or external pages and can have a border using the controls for border width and radius.
Images
The curtain images are inserted as background images and the stage images in an HTML5 <picture> element.
The images are …
- Inserted in three sizes for computer, tablet portrait and phone portrait
- Stage image has alt text
- Stage images have a lazy load option
Action
The action tab has controls for icon color and background and for the tooltip text font size and border radius.
On mobile touch devices the tooltip opens on tap and has a tap off the tab function it. to close
Image Scrollbox
Product Name
£435.00Scroll image column using CSS position "sticky" on the header and the images.
The span and the link in this text area are optional.
Sticky Scroll
The ThemeKit UI Image Scrollbox widget creates a two column grid with a text area in one column and scrolling images in the other. It is a efficient way to display and item with info and several images since it doesn't require Javascript.