Media

ThemeKit Jumbotron

A jumbotrtron is used to draw attention to an important item or to a special offer.
On Sale $99

MENU

Jumbotron

A Jumbotron is a web page hero item that is used to call attention to a feature or a special offer. The ThemeKit Jumbotron can have either a two color gradient background or an image background.

Images
The images are inserted in three sizes for the various devices and can be lazy loaded if the item isn't in the viewport at page load.

Article
The article has a heading, the option to insert a styled span and one or two optional links. The first link can open internal/external pages and the second one is internal.

Adjust
The height is set by the height of the article plus the settings for top and bottom padding which have separate controls to use a percentage value.
In the demo above the top padding is set to 2% and the bottom padding to 30% .

Image Row

Image row

ThemeKit Unit Image Row 2

The widget creates a 2, 3 or 4 column grid.
When three items are inserted the last one is centered in row two below the breakpoint.
The items maintain the same height despite varying image aspect ratio and text content.
When present the links line up at the bottom.

Unit Widgets

Portrait Image

ThemeKit Unit Image Row 2

Images
The images can be lazy loaded if the item is not in the viewport on page load.

Items

Content

ThemeKit Unit Image Row 3

Each item has a heading and text and the images and links are optional.
Heading
The headings have the option of a gradient background and can animate when the item is in the viewport.
The animation delay can be switched a staggered delay by checking a box.
By default the animation is turned off on mobile phones but can be turned on if required.

Images

Image Row

B The image row breaks away from the normal by allowing images with different aspect ratios and an animated header.
Rows with 3, 4 or more items are not a particularly good idea since they tend to cramp the layout so that should have a column gap and vertical spacing from the items above and below.

Modal Navigation

C The modal navigation is a better option for getting visitors to click through to other pages sense it can be placed below the hero item with a centered action tab with a label if required.
This type of navigation is also useful for a section navigation for larger sites since a horizontal nav with drop downs is no longer regarded as effective.
Sticky
The action tab bar can be relatively positioned to scroll with the rest of the content. There is the option to apply the CSS3 position "sticky" to allow it to scroll up and then stick at the top - or a preset distance from the top.
Modal
The links are centered in the modal overlay and can be arranged in auto columns by specifying the nav tab's minimum width.