ThemeKit AUI

Card Grid

ThemeKit AUI Card Grid 1

Mackie CR5

$195

Let your creativity flourish with studio-quality sound and superior convenience.

Compact Monitor

Behring Truth

$199

Advanced waveguide technology provides superior acoustic dispersion.

Studio Monitor

Akai RPM500

$180

RPM500 offers pure and accurate frequency response from 50Hz to 30kHz

Single Monitor

Numark N-Wave 360

$85

Powerful sound quality with bass boost switch.

DJ Monitor

Polk Primus HTS

$299

Front-firing long-throw 10" Polypropylene Dynamic Balance and Klippel optimised driver.

Subwooffer

SVS PB4000

$2399

Triple front-ported cabinet design with three tuning modes for great sound.

Maxi Subwoofer

Card Grid

This grid can be used for a visual navigation to website sections, product groups or news items etc.
Grid Layout
The grid is centered with a maximum width setting and has controls for column gap and row gap. The number of items per row can be set for each device type - computer, tablet landscape, tablet portrait and phone potrait.
Action
When viewed on computers the overlay slides down to the top of the caption on hover. On mobile devices the overlay will show on tap and be dismissed when the visitor interacts with another card.
Overlay Content
The overlay has a heading, a span for price/date etc, text and an optional internal link.

Editing

The overlay content can be seen on the EverWeb design canvas for editing. Checking a box hides it prior to publishing.

Interactive Heading

More Widgets

Heading

The ThemeKit AUI Heading widget creates an h1 though h3 heading with the option to add an SVG icon at the left and a CTA style link at the right.
The SVG can be configured as a link if required and both it and the CTA link have a background hover animation.
HTML5
All the EverWeb Widgets widgets and ThemeKit widgets and themes use HTML5 containers.
These containers are semantic in that they let the searc engines know how to index the content.
Each HTML5 element is consider as a mini page in its own right and can have a header, content and footer.
The first heading in an HTML5 container is always an h1 so there is no need for h4 throufh h6 which are required for HTML4 and XHTML which became redundant in 2014 when HTML 5 was finally issued as a W3C Recommendation in 2014.


  • h1 is used for the heading in the header - usually the website name.
  • h2 is used for the main content heading - usually the page name.
  • h3 is used for to denote a change in subject or the start od a section.

Grid Layout

The container has a three column grid layout with all the items inline on browser/device screen widths above the breakpoint. Below the break the heading moves to row two.

© EverWeb Widgets -

Menu