🚀 NEW COMPONENT: InfoCardSlidePro — Build Premium Horizontal lists for Your Adalo Apps

Resources & Tutorials
, ,
1

componentes
componentes1865Ă—1028 33.9 KB

Video demo: https://youtu.be/_BCVENDAs5I
More components: kurepadev

Showcasing service requests, user profiles, or customer orders cleanly in Adalo is usually a layout nightmare. Trying to squeeze titles, descriptions, location icons, dividers, and status badges into native groups breaks responsive design and causes performance lag.

InfoCardSlidePro solves this by packaging complex, multi-layered data into an ultra-fluid, fast, and beautiful horizontal carousel. It is the ultimate component to give your service marketplace or directory apps an agency-level user interface in minutes.

2
21514Ă—591 28.6 KB

1
11514Ă—591 35 KB

:high_voltage: What Makes InfoCardSlidePro a Game Changer?

:flower_playing_cards: Multi-Layered Card Layout (All-in-One)

Each card is visually organized into a perfect hierarchy to keep information readable:

  • Top Section: Bold title and a multi-line description/details area.

  • Middle Row: Location or custom extra row with its own custom PNG icon and text.

  • Divider Line: An elegant horizontal separator with customizable thickness and color.

  • Full Footer: User details (with a PNG avatar icon) on the left, and a dynamic status badge with an indicator arrow on the right.

:artist_palette: Dual Card Design Modes

  • Filled (With Background): Customize the card’s background color, border color, corner radius (border-radius), and elevation shadow (box-shadow).

  • Outline (Without Background): A transparent background for a clean, minimalist look, giving you full control over the border thickness, color, and corner radius.

:red_circle: Real-Time Dynamic Badge Colors

Say goodbye to setting up clunky conditional visibility rules for every single status. Connect the badge’s background and text colors directly to your database fields so “Pending”, “Urgent”, or “Completed” statuses automatically adopt their correct colors with zero extra logic.

:compass: Clean Header with Custom Navigation

Features a header with a title and a PNG icon on the left (no messy chevrons next to it) and integrated navigation arrows on the right for smooth control on web and desktop. You can fully customize the arrows’ colors, backgrounds, and roundness.

:bullseye: Smart “See More” Card with Entrance Animation

Set a limit on the number of cards displayed (e.g., maximum 10). When users scroll to the end, the component automatically generates a “See More” transition card with a smooth fade-in animation, ready to trigger a native Adalo redirection action.

:mobile_phone: Seamless Navigation

Native touch-swipe on mobile devices; mouse-wheel scrolling and interactive navigation arrows on desktop and tablets.

:control_knobs: Complete, Organized Control Inside the Editor

No more hunting through an endless list of parameters. Every property is neatly structured within collapsible accordion sections in the Adalo builder:

  • :bar_chart: Data Source: Map your text fields, database collections, and item limit.

  • :framed_picture: Icons & Images: Easily upload PNG icons for the header, location row, and footer user row.

  • :paintbrush: Card & Header Design: Toggle between filled/outline card styles, adjust dividers, and customize the header navigation arrows.

  • :writing_hand: Typography & Colors: Control fonts, sizes, weights, and colors for every single text element and the dynamic badge.

:light_bulb: The Developer’s ROI: Building this level of visual detail natively in Adalo would take you hours of pixel-pushing alignment and complex visibility rules that impact database loading times. With InfoCardSlidePro, you just drag and drop, connect your collection, and deliver a world-class UI to your clients instantly.