The Jumbotron is used to draw attention to an important item or a special offer or promotion.
The content items are in a grid with two variable relative width columns.
The image is static to be in view on load and the description can overlay the item below and animate up and in after a suitable delay
A Jumbotron is used to draw attention to an important item or a special offer. The version above is used to instead of a hero item and shows the background gradient version with the optional front image and an info article.
Both the article and the image have border and box shadow style controls. Their positions can be switched and the text can appear above or below the image on device screen widths less than the breakpoint setting.
Animation
The article has an optional slide up animation. The animation can occur once or every time the Junbo enters the viewport.
Animation should be on mobile phones but there it a checkbox to add this if required.
Follow the link below to see the Jumbo with an image background and animation …
Contact info must be visible immediately on page load. The ThemeKit Basic Toolbar has a grid layout with an otpion fro a gradient background and to overlay the bottom of a hero item inserted above it.
It has an info link which can have any of the 100s of SVG icons in the download folder and a spam protected email function/
The optional phone number switches to a phone call function on mobile phones.
The basic content item for a responsive website is a two column grid layout with an image with alt text and an HTML5 <article> containing a heading, text and a CTA (call to action) style link.
Content
The relative column widths are adjustable and the text can be above or below the image below the breakpoint.
The text block shows the optional border with bottom border removed and a bottom box shadow.
Adding a bottom box shadow helps to lift the item off the canvas.
The shadow has a positive shadow radius and a negative shadow spread equal to about half the value for radius.
Professianl website designers know the value of using plenty of "white" space between and around items. Allowing the itemes to "breaathe" allows the viditor to find and focus on items.
Avoid tightly packed rows and use an h3 heading or a spacer/line between items.
The ThemeKit Basic Spacer/Line widget has controls for height and a solid or gradient background.
The line has controls for height, percentage width color and style - dashed, dotted, double and solid.
Menu
