Stacking Cards, Card Carousel, Glass Cards and Text on Glass settings

Four Showcase widgets built from cards. Stacking Cards, Card Carousel and Glass Cards fill from the shared Manage Cards window (add cards by hand or From a collection), explained in Widget Design panel basics. Text on Glass has its own Edit Text window. Every one ends with Spacing (margin) and Animations & Effects (Entrance and Scroll; see Animations and effects).

Cards from a collection link to their item's dynamic page unless you map a link field.

Stacking Cards

Big cards that stick near the top of the screen as the visitor scrolls, each new card sliding over the last.

How to add it

1. Click Add, open Showcase and drag Stacking Cards onto the page. It starts with three sample cards.
2. Click Manage Cards, then Add Card.
3. For each card, fill in Subhead (for example "CLIENT NAME"), Title and Description, add an image with Focal point, and optionally a button and Link this card.
4. Click Done.

Layout

• Layout choice: Image left, Image right, Alternating or Text over image. Default Image left.
• Image width (not for Text over image): 25–75%. Default 55%.
• Card height: up to 900 px; 0 lets the card fit its content. Default 480 on Desktop, 0 on Mobile. Per screen size.
• Max width: 600–1600 px. Default 1200.

On Mobile, image-beside-text cards stack the image above the text.

Stacking Effect

• Effect: Simple stack, Shrink covered card or Offset deck. Default Simple stack.
• Shrink covered cards by (Shrink): 2–30%. Default 10%.
• Offset between cards (Offset deck): 4–60 px. Default 20.
• Stick this far from the top: 0–300 px. Default 80 (60 Tablet, 40 Mobile). Per screen size.
• Scroll distance between cards: 0–400 px. Default 48 (32 Mobile). Per screen size.

Cards stick while their section scrolls. If the header is fixed, set the top distance a little taller than the header.

Card

• Card background (not for Text over image): default white.
• Corner radius: 0–48 px. Default 16.
• Shadow: default on.
• Text over image only: Image shade color (default black), Image shade (0–100%, default 45%), Glass panel behind the text (default off) with Light glass or Dark glass, and Text position (a 3×3 grid, default bottom left).

Subhead, Title, Description and Button

• Subhead: text style controls, size up to 28.
• Title: H2, H3, H4 or Text (default H3), plus text style controls up to 80.
• Description: text style controls up to 32.
• Button: Primary or Secondary.

Card Carousel

A row of cards visitors swipe or click through with arrows and dots.

How to add it

1. Open Add > Showcase and drag Card Carousel onto the page. It starts with four sample cards.
2. Click Manage Cards.
3. At the top, under Carousel: type the carousel's title and use Show to show or hide it; pick the layout (Text below, Text over or Testimonial); turn Arrows and Dots on or off.
4. Add cards. Normal cards have Title, Description, image, button and link. Testimonial cards have Name, Role / company (for example "Homeowner, Austin"), Star rating (0–5), Quote and a small round photo.
5. Click Done.

Layout

• Layout: Text below, Text over or Testimonial. Default Text below.
• Cards per view: 1–6. Default 3 on Desktop, 2 on Tablet, 1 on Mobile.
• Show a peek of the next card: shows part of the next card so visitors know to swipe. Default on.
• Gap between cards: up to 64 px. Default 24 (16 Mobile). Per screen size.

Card

• Card background (not for Text over): default white.
• Corner radius: 0–40 px. Default 12.
• Shadow: default on.
• Text over only: Card height (200–800 px, default 440; 400 Mobile; per screen size), Overlay color (default black), Overlay opacity (0–100%, default 50%).
• Testimonial only: Photo size (24–120 px, default 48, per screen size).
• Text below only: Image height (80–500 px, default 220; 200 Mobile; per screen size).
• Active dot color: default your theme's primary color.

Carousel Title

Only when the title is shown. Text style controls.

Star Rating

Testimonial only.

• Show stars (each card's rating, 0–5): default on. A card rated 0 shows no stars.
• Star color: default gold.
• Star size: 10–48 px. Default 18. Per screen size.

Card Title / Name, Role, Card Description / Quote, Button

• Card Title (called Name for Testimonial): text style controls.
• Role (Testimonial only): text style controls up to 32.
• Card Description (called Quote for Testimonial): text style controls up to 32.
• Button: Primary or Secondary.

Glass Cards

A grid of frosted-glass cards. They look best over a photo or a colored section background.

How to add it

1. Open Add > Showcase and drag Glass Cards onto the page. It starts with three sample cards.
2. Click Manage Cards, add cards with Title, Description, image, button and link, then Done.

Layout

• Cards per row: 1–6. Default 3 on Desktop, 2 on Tablet, 1 on Mobile.
• Gap between cards: up to 80 px. Default 24 (20 Tablet, 16 Mobile). Per screen size.

Glass

• Glass: Light or Dark. Default Light.
• Tint: 0–90%. Default 20%.
• Blur: 0–40 px. Default 10.
• Corner radius: 0–48 px. Default 16.
• Card padding: 0–64 px. Default 24.
• Glass edge border: a thin bright edge. Default on.
• Lift on hover: default on.

Image

• Image height: 80–500 px. Default 200. Per screen size.
• Zoom image on hover: default on.

Title, Description and Button

• Title: H2, H3, H4 or Text (default H3), plus text style controls.
• Description: text style controls up to 32.
• Button: Primary or Secondary.

Text on Glass

One heading, text and button on a frosted panel, over a background photo or over the section behind it.

How to add it

1. Open Add > Showcase and drag Text on Glass onto the page.
2. Click Edit Text. Fill in Title and Text.
3. Show a button: set Button text and its link. Default off.
4. Optional: Background image (optional — otherwise the glass shows the section behind it), with Background alt text (leave it empty if the picture is decoration). Remove takes it off.
5. Click Save.

Glass

• Dark glass (white text) or Light glass (dark text). Default Dark glass.
• Tint opacity: 0–100%. Default 40%.
• Blur: 0–40 px. Default 10.
• Corners: 0–60 px. Default 20.
• Edge highlight: default on.
• Shadow: default on.

Size & Position

• Max width (0 = full): up to 1400 px. Default 560 (0 on Mobile). Per screen size.
• Min height: up to 800 px. Default 150. Per screen size.
• Padding: up to 120 px. Default 32. Per screen size.
• Panel position: Left, Center or Right. Default Center. Per screen size.
• With a background image: Background height (150–1200 px, default 480; 360 Mobile; per screen size) and Background focus (Top, Center or Bottom, default Center).

Title, Text and Button

• Title: H1, H2, H3, H4 or Text (default H2), plus text style controls up to 80.
• Text: text style controls up to 36.
• Button: Primary or Secondary.

Examples

• A roofer's process: Stacking Cards, Alternating, Shrink covered card, one card per step from inspection to cleanup.
• A dentist's reviews: Card Carousel, Testimonial, 3 per view, stars on, with each patient's name and town.
• A spa's services over a photo section: Glass Cards, Light glass, 3 per row, Lift on hover.
• A law firm's hero: Text on Glass with a city photo as the background, Dark glass, H1 title and a "Book a consultation" button.

Limits and what it can't do

• None of these widgets has Connect to Data. Stacking Cards, Card Carousel and Glass Cards can use From a collection; Text on Glass can't take its text from a collection at all.
• Switching Card Carousel to Testimonial changes which fields each card uses (Name, Role / company, Star rating, Quote). Switch back and the normal fields are used again.
• Star ratings are whole numbers 0–5 typed per card. They aren't pulled from Google; for live Google reviews use the Google Reviews widget.
• Stacking only works while the widget's own section is on screen. Put Stacking Cards in a section with room below it.
• Glass needs something behind it to blur. On a plain white section it looks like a faint card.
• Clients with only Widget content can change cards and text, but not the Design panel.

Who can use it

Anyone in your agency with the Mount Olympus tool. Client people need Editor to add, move, design or delete these widgets, or Widget content to change their cards and text. When Zeus fills a template, it replaces these widgets' photos with the client's (see Fill a template with Zeus).

Troubleshooting

• The cards don't stick: the section around them must be taller than one card; add more cards or raise Scroll distance between cards. With a fixed header, raise Stick this far from the top so cards don't hide under it.
• Image width is missing: it's hidden for Text over image.
• I can't find Star Rating or Role: pick the Testimonial layout in Manage Cards or the Design panel's Layout section.
• Some testimonials have no stars: their Star rating (0–5) is 0 or empty.
• The Carousel Title section is missing: turn Show on next to the carousel title in Manage Cards.
• The glass looks flat or invisible: put the widget over a photo or colored background, or raise Tint and Blur.
• Text on Glass text is hard to read: use Dark glass (white text) over light photos, or raise Tint opacity.