Components general

LinearCard

A draggable carousel of cards that can be swiped horizontally. Selecting a card opens an expanded detail overlay with smooth shared‑element transitions.

Aggiornato Mar 6, 2026

LinearCard

A draggable carousel of cards that can be swiped horizontally. Selecting a card opens an expanded detail overlay with smooth shared‑element transitions.

Use Cases

  • Feature cards with expandable details
  • Team member cards with bios
  • Project/portfolio showcase
  • Product cards with descriptions and tags

Properties

items

Array of card objects. Type: array.

customCss

Custom CSS property pairs. Type: string.

Best Practices

  • Use 3-6 cards for the best carousel experience
  • Always include images — the card relies heavily on visual appeal
  • Keep titles short (2-4 words)
  • Write detailed descriptions (2-4 sentences) — they’re shown in the expanded dialog
  • Use 3-5 tags per card for visual richness

Common Mistakes

Using only 1-2 cards

Why it's a problem: The draggable carousel has no content to scroll through

Fix: Use at least 3 cards to make the drag interaction meaningful

Leaving description empty

Why it's a problem: The expanded dialog will be nearly empty — bad user experience

Fix: Write 2-4 sentences describing the card’s topic in detail

Tag

linearcard sections feature cards team member project/portfolio showcase

Componenti correlati

LinearCard

Pronto a costruire?

Inizia a creare la tua app gratuitamente con Qödiak.

Inizia gratis

Articoli correlati

AnimatedGradient

Smooth animated gradient background for modern, premium aesthetics. Supports linear and radial gradients with configurable colors, animation speed, and intensity. GPU‑accelerated for smooth 60fps performance.

Button

Interactive button component that supports link navigation, page data source operations (record navigation, new record, mode switching), form submission, and custom JavaScript execution. Save/Delete actions must use a custom‑script with navigation. Two visual variants are available, and the button can be enabled or disabled dynamically based on data context.

Calendar

A full‑featured calendar component built with react‑big‑calendar. It can display events in month, week, day, or agenda views and includes navigation and view‑switching capabilities, making it suitable for any site that needs scheduling, event management, or date visualization.

Card

Feature card component with an icon, title, description, and entrance animations. Ideal for showcasing features, services, or benefits in grid layouts with animation support.

Checkbox

A checkbox group component that lets users select multiple options from a predefined list. It renders a set of checkboxes with individual labels and can be arranged vertically or horizontally.

CountdownTimer

Real-time countdown timer component that displays the time remaining until a target date/time. It updates every second, offers customizable formatting, and shows a completion message when the countdown ends. Suitable for any site type.