Card Element

The Card element is a flexible container that groups visuals and textual content into a cohesive, structured unit for showcasing features, products, or blog posts.

Live Preview

Card Preview

Specifications

Cards provide a variety of high-level layout options for visual storytelling:

  • Visual Asset: Embed an Image directly within the card structure via the visual prop.
  • Positioning: Place the visual at the Top, Bottom, Left, or Right.
  • Layout Modes: Choose between Stack (natural flow), Split (equal horizontal), or Overlay (image background).
  • Visual Fade: Optionally enable a soft Edge Fade to blend the image into the card content area.
  • Full Space: Toggle Visual Full Space to remove padding between the image and card edges.
  • Content Blocks: Nest any Card Content children to define the textual areas.

AI Guidance

How to prompt for Cards:

  • Add a service card with an image on the left and text on the right.
  • Create a blog card with a top image and a 'Read More' button.
  • Insert an overlay card where the text is centered over a background image.