Header Building blocks

The header on this page is composed of three widgets stacked vertically - ThemeKit Logo Header Nav, ThemeKit Header Slider and the ThemeKit Shape Triangle which is set to the right.
All three widgets have their background gradient colors set the same so that they appear as one item when viewed in the browser.
Slider Info
The slideshow inserts the images in two sizes so that mobile users can download a much smaller file. There are two sets of control functions - for computers and larger tablets and for smaller mobile devices. This means that the slideshow can be autplayed on computers with a fade transition and swiped on touch devices with a slide transition.
The captions, pager and navigation arrows are all optional and can be styled to suit the page design. On the demo, the captions are aligned left to leave room for the pages which is set to disappear on device screen widths below the break point along with the arrows and the caption is then aligned in the center.
The container has three controls for padding - top, left/right and bottom since these need to be adjusted when using an offset box shadow and/or a bottom shape.