Popular Destinations
Centered title with a horizontally scrolling row of destination image cards and text overlays.
---
import PopularDestinations from "@features/popular-destinations/PopularDestinations.astro";
import PopularDestinationItem from "@features/popular-destinations/PopularDestinationItem.astro";
---
<PopularDestinations backgroundColor="none" colorScheme="inherit" eyebrow="" heading="Popular Destinations" paddingVertical="4xl" subtext="Explore the world with peace of mind" variant="default" />---
blocks:
_component: page-sections/features/popular-destinations
eyebrow: ''
heading: Popular Destinations
subtext: Explore the world with peace of mind
items:
- _component: page-sections/features/popular-destinations/popular-destination-item
name: Bali
description: Tropical Paradise
imageSource: /destinations/bali.webp
imageAlt: Bali
href: ''
variant: default
colorScheme: inherit
backgroundColor: none
paddingVertical: 4xl
---Overview
Use Popular Destinations when you want a lightweight discovery band between denser sections. The content inside the marquee is currently static in the React component, so the section-level controls focus on spacing and theme treatment rather than individual destination editing.
Properties
title string | default: Popular destinations
Main heading (shown in uppercase in the layout).
subtitle string | default: Explore the world with peace of mind.
Supporting line under the heading.
iconName enum | default: globe-americas
Icon shown in the red circle beside the title (matches the icon library).
destinations array | default: array
Destination cards (image, name, tagline, and link URL).
name string
Destination name shown on the card.
tagline string
Short uppercase-style tagline under the name.
link string
URL when the card is clicked.
imageSource string
Card background photo.
imageAlt string
Alt text for the card image.
colorScheme enum | default: inherit
Color scheme theme for this section.
-
inherit -
light -
dark
backgroundColor enum | default: none
Background color for this section.
-
none -
base -
surface -
accent -
highlight
paddingVertical enum | default: 4xl
Vertical padding for this section.
-
none -
xs -
sm -
md -
lg -
xl -
2xl -
3xl -
4xl
rounded boolean | default: false
Rounded corners on the section background.