Card Layouts

The layout builder lets you design how each record looks in your directory — no coding required. You pick the card style, choose which fields to show, and see a live preview as you go.

Open the layout builder

Go to your project’s Configure > Display tab.

Card styles

FieldFlow offers three card variants:

Modern (default)

Larger cards with prominent images and generous spacing. Best for directories where visual appeal matters — resource directories, business listings, program catalogs.

Compact

Smaller, denser cards that show more records on screen. Best for long lists where users want to scan quickly — staff directories, job boards, event calendars.

Detailed

Full-width cards with extra field visibility. Best when each record has lots of metadata — service directories with hours, eligibility, contact info, and descriptions.

Choosing which fields to display

Not every field needs to show on the card. In the layout builder:

1. Title field — the main heading on each card (usually “Name” or “Organization”)
2. Subtitle — a secondary line (optional)
3. Description — a longer text field shown below the title
4. Image — displayed as the card’s hero image or thumbnail
5. Additional fields — toggle any mapped field on or off

Users can also show/hide optional fields themselves using the field visibility menu in the directory toolbar.

Colors and styling

You can customize:

• Primary color — used for links, buttons, and accents
• Card borders and shadows — subtle or prominent
• Header style — gradient or flat

For more detail, see Colors & Branding.

Live preview

Changes update in real-time in the preview panel. What you see is what your visitors will see in the embedded directory.

Saving

Click Save to apply your layout changes. The next time someone loads your directory (or refreshes), they’ll see the updated design.