Content
Text AreaClipped text area with heading, styled span and text.
ThemeKit Array
Clip Cards
Cards
Rows of boxes ten to make a web page layout cramped and unoriginal. Adding different features helps to make the design more unique.
The ThemeKit Array Cards widget creates a responsive row of two, three or four cards withh an image, heading an optional styled span and text.
Links
When the items are configured as hyperlinks the icon appears at the top right of the image. Links can be a mix of internal/external.
Clip
To add show style to the text area its can have a clip angle at the top. The percentage of the polygon clip can be adjusted and the heading moved up into the clipped area using the "Vertical Adjust" control.
Container Styles
The items can be styled width a border and/or a box shadow and the grid column and row gaps can be adjusted.
Flip Cards
Flip Array
The ThemeKit Array Flip has an image and an info icon on the front face and a heading, optional span, text and an option link on the backface.
Flip
The items caan be flipped on the X or the Y-axis. The action is created using pure CSS. Since there is no Javascript required this makes it more suitable than other methods for responsive pages.
Perspective
To increase the visitor experience the cards have perspective on flip. Perspective is set in vw {viewport width) units. The lower the value the more the effect. A setting of zero will remove it.
Setup
Since EverWeb cannot render CSS transorms only the backface is in view on the EverWeb design canvas for editing. To prevent it from appearing upside down a checkbox is checked prior to publishing.
More ThemeKit
Link Array
The ThemeKit Array Links widget has images with a link icon and a caption that slide up into view when the action tab is clicked or tapped.
The links are enclosed in an auto grid with controls for grid max width and the link min width.
The basic enter animation is slide up but this can be changed to a swing animation by checking a box.
Links
The links can open internal and external pages. The link icon has controls for icon color and its background color and opacity. The icon appears on hover on computers.