ThemeKit Block Widgets

Block Hero

Rotate and scale image with offset box shadow on a subtle gradient background.

ThemeKit Block Logo Nav

The navigation has inline block links on browser widths above the breakpoint and switches to a mobile dropdown opened by a tab with a " hamburger" icon. As can be seen from the example the background can be a two color gradient with options for opacity and gradient angle.
Logo
The logo is optional and can be configured as a link to open an internal page. When the logo is present the navigation links are aligned right. When there is no logo, the links are aligned center.
Links
The links have settings for minimum width, horizontal and vertical spacing and background color with an opacity slider which can be zeroed to show just the main background.
Current Page
The navigation can indicate the current page with a different color from the other links and has the option to add an animated underline.
Mobile Icon
The icon is an SVG so that its color can be easily changed. It has a fixed position at the top right and has controls for color, background color and opacity, position X and Y, border radius and a padding
Mobile Dropdown
The mobile dropdown navigation has controls for width, background color and opacity and separtor width and color.

ThemeKit Block Heading

The widget creates an h1 through h4 centered heading with options for an SVG icon on the left and a CTA stylink at the right. The link can open internal or external pages and has a new window option.
When used with a scroll navigation widget the header can be configured as an anchor.

ThemeKit Hero Product

Displaying a product immediatly on page load along with contact and purchase info can increase sales.
The two column hero item has an image and a text block whose positions can be switched and the stacking order below the break point changed.
Image
The mage can be rotated clockwise or counter clockwise and the scale reduced to compensate. It can have an offset X or Y box shadow with controls for radius, spread, color and opacity.
Text
The text has a heading, paragraph and an optional CTA style link that can be configured to open internal or external pages and has a new window option.

ThemeKit Block Footer

The footer has a three column grid layout. On screen widths above the break point the info tab and info text are in columns one and two and the spam protected email and the smooth scroll to the top functions are stacked in column three.
Below the break point, all three icons are inline in row one and the text and copyright notice move to row two.
Popup Links
Clicking/tapping the info tab opens a popup navigation with the first link being optional phone number which switches to a phone icon on mobile phones.
Links can be internal and/or external and have a new window option.