Description:

The Travel Information Section for the Single Country template will display a series of cards containing grouped travel information such as General, Electricity, Visa, Currency, and Banking. Each card will be bound to its relevant custom field and displayed in a carousel. If a custom field is empty, the corresponding card should be hidden from the UI, ensuring no empty cards are shown. The contents of each card need to be formatted to display correctly and consistently.

Requirements:

• Design and develop a Travel Information Section for the Single Country template that displays grouped information in cards.

  • The cards will include: General, Electricity, Visa, Currency, Banking, and other relevant categories.

• Bind each card to its relevant custom field.

  • Ensure each card is dynamically populated based on the data entered in the custom fields.

• Implement a carousel to display the cards.

  • The carousel should allow users to navigate between the cards smoothly.

• Hide any card where its corresponding custom field is empty.

  • If no data is available for a particular field (e.g., no Electricity information), the entire card should not be visible in the UI.

• Ensure that the contents of each card are properly formatted to display clearly and consistently.

• Ensure that the section is responsive and works across all devices.

Acceptance Criteria:

• A fully functioning Travel Information Section is added to the Single Country template.
• All cards are bound to their respective custom fields.
• A carousel is implemented to display the cards.
• Cards with empty custom fields are hidden from the UI (not displayed as empty cards).
• The contents of the cards are correctly formatted and displayed.
• The section is responsive and displays correctly across devices.

Resources:

• Figma Frame

Images

Additional Notes:

• Test thoroughly to ensure that only populated cards are visible and that the carousel functions correctly.
• Verify that the card formatting is consistent across all browsers and devices.

Information Needed

• @krugazul to add size and time estimate and sprint