ThemeKit Columns

Menu

News Sidebar

ThemeKit Column Sidebar News

Sidebar News

A sidebar can be used to display and provide links to product options, product build and similar products.
Main
The image has alt text, optional lazy loading and is inserted in two sizes for computer and mobile devices.
Both the iinternal nfo link and the "Add To Cart" function are optional and can be styled separately.
Sidebar
The sidebar has a sticky header width a scroll down icon. It has a fixed width and any overflow will scroll into view. Below the breakpoint the sidebar items appear below the main section.
NOTE
This example uses the fixed sidebar height with overflow scroll below the breakpoint option.

Auto Column List

The widget arranges a long list of items into auto columns to improve the visual effect of the layout.

  • Lists <ul> with short list items <li> don't look too good at wide browser widths
  • The list is set in a container with display:block
  • The properties used here are column-count and column-gap
  • Column-count is the number of columns
  • Column-gap is the space between the columns
  • Column-rule can be used to show a vertical separator
  • The list can use any of the standard list-style types
  • Items are evenly distributed in the columns
  • The variable break point is set to change the layout on tablets in portrait mode
  • On mobile phones in portrait mode the list is in a single column

* All specifications subject to change without notice *

© EverWeb Widgets -