ThemeKit Cards

Clip Cards

Clip Cards

The EverWeb ThemeKit Clip Cards widget adds a touch of style to the basic card layout.
The widget can create a row of two, three or four cards,
When three cards are inserted the last one is centered in row two below the breakpoint.
The cards have …

  • An image with alt text and a lazy load option
  • A text block with heading, optional span and info text.
  • Animated link icon at top right appears when the link function is selected

Clip

The variable clip angle at the top is created using the CSS clip-path property. A control is provided to adjust the position of the text up and into the clipped area.

Sliding Cards

  • Sliding Cards 1

    Slides

    Content

    The slides have a two column grid layout with the image in the left column and everything else in the right.

    More Cards
  • Sliding Cards 2

    Image

    Lazy

    The images have a lazy loading option and have controls to add a border for definition.

    Jumbotron
  • Sliding Cards 3

    Right Column

    Content

    The heading and text are default and the span and the CTA (call to action) style link are optional.

    Hero
  • Sliding Cards 4

    Mobile

    Breakpoint

    Below the breakpoint the right column moves to row [2] & the slides can be swiped.

    Images

Responsive Slideshow

Using a twocolumn grid allows the slidder to insert only one image file per slide. Content or full width sliders require three files per slide to function efficiently.
Make sure any slider used on a responsive page has the following …

  • Inserts the images in two or three sizes if content width
  • Lazy loading function
  • External minified supporting files

Autoplay

Autoplay is never a good idea since it takes conrol away from the visitor.
If autoplay is used on the computer version of a slider it must be removed for mobile devices.

Footer Bar

If a footer is used it should only be on the home or info page and replaced by a compact show/hide footer bar on all other pages.
The ck Card Footer Bar has …

  • An internal link with option to change the default SVG icon
  • An optional phone number/phone call function
  • Copyright function with auto year update
  • Spam protected email function
  • Smooth scroll to the top function

MENU