ThemeKit UI Article
SliderAction tabs and fade transition on computers - swipe and slide transition on mobile devices.
Responsive SliderArticle + Slider
Article Slider
Using a slider in a two column grid layout only requires the image to be inserted in one size. Below the breakpoint the text block positions itself below the slideshow.
Text Area
There is a heading, an optional span for price etc, text and and an optional internal/external CTA (call to action) style link.
When the bottom box shadow is present the bottom border can be removed for a moore professional appearance.
Accordion
Accordion Info
Content Panel
The optional image is lazy loaded and is centered with a max width setting - in this case 800px. The text area has a heading, text with styled spans and an optional link
Animation
All panels can be open for editing on the EverWeb design canvas and the first panel can be open on page load. Panels can stay open once opened or auto close.
The animation time can be adjusted and is set in milliseconds.
Images
Video
MP4 Video
The HTML5 video player is lazy loading and has an HD file for computers and an SD file for smaller mobile devices.
The video is centered with a maximum width setting to suit the width of the HD video file.
YouTube
YouTube Video
The video is lazy loaded and has controls for changing to non default (16:9) aspect ratio by entering the file's width and height.
Last Panel
Accordion Info
There are checkboxes to control the behaviour of the accordion
[1] All panels open - used for editing in EverWeb
[2] First panel open on page load
[3] Auto close open panle on open another
[4] Animation time control set in milliseconds
Accordion
Hidden Content
Having content items that are not in view on page load is the best way to provide a good user experience for visitors using smalll mobile devices.
The ThemeKit UI Accordion is design specifically to insert below and article widget to provide more info.
It can also be used standalone with the first panel open on page load.
Action Tabs
The panel's visible header - rather than just the icon - is the action tab to open/close the accordion. It has an animated icon for show/hide and the tab text can be aligned left or center.