Back to site

Feature benefits grid

Split headline (two colours) plus a responsive two-column grid of benefit cards with icon, title, and body copy—styled for “why choose us” blocks with CloudCannon colour pickers.

Why aussies love compare travel insurance

  • No Hidden Fees

    Travel agents and airlines charge huge commissions. We don’t! Our travel insurance comparison is free to use.

  • Convenient

    Using our comparison is easy-peasy! One simple form makes it quick and easy to compare travel insurance quotes for your holiday. 

---
import FeatureBenefitsGrid from "@features/feature-benefits-grid/FeatureBenefitsGrid.astro";
---

<FeatureBenefitsGrid
cardBackgroundColor="#ffffff" colorScheme="light" defaultCardDescriptionColor="#374151" defaultCardTitleColor="#d1413d" features={
  [
    {
      "iconName": "Outlined_All_RGB_Red_NoHiddenFee",
      "title": "No Hidden Fees",
      "description": "Travel agents and airlines charge huge commissions. We don’t! Our travel insurance comparison is free to use.",
      "titleColor": "",
      "descriptionColor": ""
    },
    {
      "iconName": "Outlined_All_RGB_Red_Convenient",
      "title": "Convenient",
      "description": "Using our comparison is easy-peasy! One simple form makes it quick and easy to compare travel insurance quotes for your holiday.",
      "titleColor": "",
      "descriptionColor": ""
    }
  ]
} headingHighlight="compare travel insurance" headingHighlightColor="#d1413d" headingLead="Why aussies love" headingLeadColor="#2e2a63" paddingVertical="4xl" sectionBackgroundColor="#f8f3f0"
/>
---
blocks:
  _component: page-sections/features/feature-benefits-grid
  sectionBackgroundColor: '#f8f3f0'
  cardBackgroundColor: '#ffffff'
  headingLead: Why aussies love
  headingLeadColor: '#2e2a63'
  headingHighlight: compare travel insurance
  headingHighlightColor: '#d1413d'
  defaultCardTitleColor: '#d1413d'
  defaultCardDescriptionColor: '#374151'
  features:
    - iconName: Outlined_All_RGB_Red_NoHiddenFee
      title: No Hidden Fees
      description: Travel agents and airlines charge huge commissions. We don’t! Our travel insurance comparison is free to use.
      titleColor: ''
      descriptionColor: ''
    - iconName: Outlined_All_RGB_Red_Convenient
      title: Convenient
      description: Using our comparison is easy-peasy! One simple form makes it quick and easy to compare travel insurance quotes for your holiday.
      titleColor: ''
      descriptionColor: ''
  colorScheme: light
  paddingVertical: 4xl
---

Overview

Use this section for “why choose us” blocks: a centred headline split into two colours, a warm band background, white cards in a responsive two-column grid, and per-card icons from the brand illustration set.

Properties

sectionBackgroundColor string | default: #f8f3f0

Warm wash behind the benefit cards (matches the beige page band).

cardBackgroundColor string | default: #ffffff

Fill colour for each white benefit card.

headingLead string | default: Why aussies love

First part of the headline (e.g. “Why aussies love”) — typically navy.

headingLeadColor string | default: #2e2a63

Colour for the first part of the headline.

headingHighlight string | default: compare travel insurance

Second part of the headline (e.g. brand name) — typically accent red.

headingHighlightColor string | default: #d1413d

Colour for the highlighted part of the headline.

defaultCardTitleColor string | default: #d1413d

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

defaultCardDescriptionColor string | default: #374151

Default body copy colour inside cards when a card does not set its own description colour.

iconSize enum | default: lg

Icon size on each benefit card (core Icon scale — larger keys render bigger art).

Accepted values:
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl

features array | default: array

Two-column grid on medium+ screens (stacks on small). Each card has an icon, title, and short paragraph. Optional per-card title and description colours override the defaults above.

Item Properties:

iconName enum | default: Outlined_All_RGB_Red_NoHiddenFee

Icon shown at the top of the card (brand illustration set).

title string | default: Benefit title

Bold card heading (accent colour by default).

description string | default: Short supporting copy for this benefit.

Body copy under the heading.

titleColor string

Optional override for this card’s title colour (leave empty to use the section default).

descriptionColor string

Optional override for this card’s description colour (leave empty to use the section default).

colorScheme enum | default: light

Theme context for nested tokens (section background is controlled by colours above).

Accepted values:
  • inherit
  • light
  • dark

paddingVertical enum | default: 4xl

Vertical padding for this section.

Accepted values:
  • none
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl