ThemeKit Hero Stage

ThemeKit Hero

Hero Stage

Content

This text area has a heading, optional styled span, info text and one or more internal/external links.

Action

Hero Stage

The ThemeKit 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 <article> element 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 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 anywhere function. to close it.

Menu