Feature trending tips grid

Centred split-colour headline plus a responsive three-column grid of image cards (16:9 image, title, body)—for “trending tips and guides” style content blocks.

---
import FeatureTrendingTipsGrid from "@features/feature-trending-tips-grid/FeatureTrendingTipsGrid.astro";
---

<FeatureTrendingTipsGrid
cards={
  [
    {
      "imageSource": "/src/assets/images/component-docs/website-hero.svg",
      "imageAlt": "Adventure activity travel illustration",
      "title": "What Adventure Activities Are Covered?",
      "text": "Travel insurance is two words that could make all the difference to your holiday. Get the lowdown on how to choose the right travel insurance policy and the potential traps.",
      "titleColor": "",
      "textColor": ""
    },
    {
      "imageSource": "/src/assets/images/component-docs/website-hero.svg",
      "imageAlt": "Travel destination gate illustration",
      "title": "Pre-existing Medical Conditions",
      "text": "Having pre-existing medical conditions doesn't mean you can't get cover or that it has to be expensive. It simply means that you need to dig a little deeper when doing your research.",
      "titleColor": "",
      "textColor": ""
    },
    {
      "imageSource": "/src/assets/images/component-docs/website-hero.svg",
      "imageAlt": "Travel and health illustration",
      "title": "Coronavirus, Travel Disruptions and Your Insurance",
      "text": "The rapid spread of covid-19 around the globe has thrown international travel into chaos. Find out what's covered if you're travelling during the coronavirus outbreak.",
      "titleColor": "",
      "textColor": ""
    }
  ]
} colorScheme="light" defaultCardTextColor="#4a5568" defaultCardTitleColor="#2e2e61" headingHighlight="tips and guides" headingHighlightColor="#d64f4a" headingLead="Trending trip cover" headingLeadColor="#2e2e61" paddingVertical="4xl"
/>

---
blocks:
  _component: page-sections/features/feature-trending-tips-grid
  headingLead: Trending trip cover
  headingLeadColor: '#2e2e61'
  headingHighlight: tips and guides
  headingHighlightColor: '#d64f4a'
  defaultCardTitleColor: '#2e2e61'
  defaultCardTextColor: '#4a5568'
  cards:
    - imageSource: /src/assets/images/component-docs/website-hero.svg
      imageAlt: Adventure activity travel illustration
      title: What Adventure Activities Are Covered?
      text: Travel insurance is two words that could make all the difference to your holiday. Get the lowdown on how to choose the right travel insurance policy and the potential traps.
      titleColor: ''
      textColor: ''
    - imageSource: /src/assets/images/component-docs/website-hero.svg
      imageAlt: Travel destination gate illustration
      title: Pre-existing Medical Conditions
      text: Having pre-existing medical conditions doesn't mean you can't get cover or that it has to be expensive. It simply means that you need to dig a little deeper when doing your research.
      titleColor: ''
      textColor: ''
    - imageSource: /src/assets/images/component-docs/website-hero.svg
      imageAlt: Travel and health illustration
      title: Coronavirus, Travel Disruptions and Your Insurance
      text: The rapid spread of covid-19 around the globe has thrown international travel into chaos. Find out what's covered if you're travelling during the coronavirus outbreak.
      titleColor: ''
      textColor: ''
  colorScheme: light
  paddingVertical: 4xl
---

Overview

Use for “trending tips and guides” style sections: navy + accent headline, then cards with a 16:9 image (rounded), bold title, and paragraph. Colours are configurable in CloudCannon; each card supports image, alt, title, and body text with optional per-card colour overrides.

Properties

headingLead string | default: Trending trip cover

First part of the section headline (e.g. “Trending trip cover”) — typically navy.

headingLeadColor string | default: #2e2e61

Colour for the first part of the headline.

headingHighlight string | default: tips and guides

Second part of the headline (e.g. “tips and guides”) — typically accent coral/red.

headingHighlightColor string | default: #d64f4a

Colour for the highlighted part of the headline.

defaultCardTitleColor string | default: #2e2e61

Default card title colour when a card does not set its own title colour.

defaultCardTextColor string | default: #4a5568

Default body copy colour under each card title.

cards array | default: array

Three-up grid on medium+ screens (stacks on small). Each card has a 16:9 image, bold title, and supporting paragraph. Optional per-card title and text colours override the defaults above.

Item Properties:

imageSource string | default: /src/assets/images/component-docs/website-hero.svg

Card image (displayed in 16:9 with rounded corners).

imageAlt string

Alt text for the card image.

title string | default: Card title

Bold headline under the image.

text string | default: Short supporting copy for this tip or guide.

Body paragraph under the title.

titleColor string

Optional title colour override (empty = section default).

textColor string

Optional body colour override (empty = section default).

colorScheme enum | default: light

Theme context for nested tokens.

Accepted values:

inherit
light
dark

paddingVertical enum | default: 4xl

Vertical padding for this section.