Expanding Cards

The Expanding Cards widget presents an all-new way to present images, and offers up a future classic slider option for any website. Each card contains an image that smoothly expands when highlighted and contracts when de-selected. Images include a title, description, and button, allowing you to link to key pages within your site. Cards can autoplay in a slideshow or be manually clicked. This widget adds a polished, interactive touch to any website.


Preview: https://demo.wocode.com/expanding-cards

SETUP

WIDGET PLACEMENT

  • Drop the widget onto your site and place it in a row where you would like the expanding cards to be seen.

WIDGET OPTIONS

  • Open the widget option panel.
  • Desktop Visible Cards: Use this dropdown to choose the number of cards to be displayed in the desktop layout.
  • Tablet Visible Cards: Use this dropdown to choose the number of cards to be displayed on the tablet layout.
  • Mobile Visible Cards: Use this dropdown to choose the number of cards to be displayed in the mobile layout.

  • Cards: This is where you will add your cards that will be visible the widget. Each card will have multiple configuration options:

    • Background Image: Sets the background image for the card.

    • Title: Sets the title for the card.

    • Card Description: Sets the description for the card.

    • Linked To: Links the card to a specific page, URL, file, etc.

    • Button Label: Set the label displayed on the button.


  • Transition Timing: This setting controls how the widget transitions between cards, offering five options:

    • Linear

    • Ease

    • Ease-In

    • Ease-Out

    • Ease-In-Out


  • Autoplay: When enabled, this expands and contracts cards automatically, similar to a slideshow. When enabled, two additional settings will become available:

    • Pause on Hover: Autoplay pauses when the mouse hovers over the widget.

    • Autoplay Delay (ms): Specifies the delay between each card expanding.



DESIGN SETTINGS

The Design section provides the ability to personalize the appearance of the Expanding Cards. The majority of these configurations pertain to text formatting and are self-explanatory. However, there are a few features we'd like to highlight.

  • Card Styling: This section allows you to customize the appearance of the cards:

    • Cards Gap (px): Adds a gap between each card.

    • Active Card Size: Adjusts the width of active cards based on the widget’s aspect ratio.

    • Card Background Color: When the Card Background Color option is enabled, an overlay is applied to each card, which can help make text more readable against the card image. Enabling this option activates four additional settings in the widget:

    • Overlay Gradient Color 1: Sets the first gradient color that appears on the top half of the gradient.

    • Overlay Gradient Color 2: Sets the first gradient color that appears on the bottom half of the gradient.

    • Overlay Gradient Direction (deg): Determines the direction in which the overlay gradient is displayed.

    • Gradient Color 2 Stop Position: Defines the position within the card where Gradient Color 2 stops. A value of 0 fills the entire image with the gradient, while a value of 100 stops the gradient at the midpoint.

    • Corner Radius: Apply a radius to the corners of each card.


  • Card Title Styling: Customize the appearance of the card titles with these options:

    • Cards Title On (Desktop, Tablet, Mobile): Toggle the card title visibility on or off for each layout.

    • Max Width (Desktop, Tablet, Mobile): Use these sliders to set the maximum width of the card title for each layout.


  • Card Description Styling: Customize the appearance of the card descriptions with these options:

    • Show Description On (Desktop, Tablet, Mobile): Toggle the card description visibility on or off for each layout.

    • Max Width (Desktop, Tablet, Mobile): Use these sliders to set the maximum width of the card description for each layout.


  • Card Button Styling: Customize the appearance of the buttons with these options:

    • Show Button On (Desktop, Tablet, Mobile): Toggle the card button visibility on or off for each layout.