Trust Stats Row
A row of headline statistics with optional section intro.
Why travelers choose us
Real numbers from real trips
Independent quotes and policies issued through our comparison tools.
2M+
Quotes compared
Since 2018
4.8
Average rating
From 12k+ reviews
48h
Typical claim notice
When you keep receipts
---
import TrustStatsRow from "@page-sections/info-blocks/trust-stats-row/TrustStatsRow.astro";
---
<TrustStatsRow
backgroundColor="surface" colorScheme="inherit" eyebrow="Why travelers choose us" heading="Real numbers from real trips" paddingVertical="3xl" stats={
[
{
"value": "2M+",
"label": "Quotes compared",
"sublabel": "Since 2018"
},
{
"value": "4.8",
"label": "Average rating",
"sublabel": "From 12k+ reviews"
},
{
"value": "48h",
"label": "Typical claim notice",
"sublabel": "When you keep receipts"
}
]
} subtext="Independent quotes and policies issued through our comparison tools." variant="default"
/>---
blocks:
_component: page-sections/info-blocks/trust-stats-row
eyebrow: Why travelers choose us
heading: Real numbers from real trips
subtext: Independent quotes and policies issued through our comparison tools.
variant: default
stats:
- value: 2M+
label: Quotes compared
sublabel: Since 2018
- value: '4.8'
label: Average rating
sublabel: From 12k+ reviews
- value: 48h
label: Typical claim notice
sublabel: When you keep receipts
colorScheme: inherit
backgroundColor: surface
paddingVertical: 3xl
---Overview
Use for social proof on insurance or travel pages: each stat has a large value, short label, and optional sublabel (e.g. timeframe or review source). variant changes column dividers, pill-style tiles, density, and grid spacing.
Properties
eyebrow string | default: Why travelers choose us
Optional label above the stats heading.
heading string | default: Real numbers from real trips
Section heading for the trust or proof points.
subtext string | default: Independent quotes and policies issued through our comparison tools.
Supporting copy shown above the statistics row.
variant enum | default: default
Layout style for the statistics row.
Accepted values:
-
default -
divided -
pills -
spacious -
tight
stats array | default: array
Key metrics (e.g. policies sold, average rating).
Item Properties:
value string | default: 0
Large number or short headline stat.
label string | default: Stat label
Short label under the value.
sublabel string
Optional supporting line (e.g. timeframe or source).
colorScheme enum | default: inherit
Color scheme theme for the section.
Accepted values:
-
inherit -
light -
dark
backgroundColor enum | default: surface
Background color behind the stats.
Accepted values:
-
none -
base -
surface -
accent -
highlight
paddingVertical enum | default: 3xl
Vertical padding for the section.
Accepted values:
-
xs -
sm -
md -
lg -
xl -
2xl -
3xl -
4xl -
5xl -
6xl
Examples
Layout variants
Why travelers choose us
Real numbers from real trips
Independent quotes and policies issued through our comparison tools.
2M+
Quotes compared
Since 2018
4.8
Average rating
From 12k+ reviews
48h
Typical claim notice
When you keep receipts
---
import TrustStatsRow from "@page-sections/info-blocks/trust-stats-row/TrustStatsRow.astro";
---
<TrustStatsRow
backgroundColor="surface" colorScheme="inherit" eyebrow="Why travelers choose us" heading="Real numbers from real trips" paddingVertical="3xl" stats={
[
{
"value": "2M+",
"label": "Quotes compared",
"sublabel": "Since 2018"
},
{
"value": "4.8",
"label": "Average rating",
"sublabel": "From 12k+ reviews"
},
{
"value": "48h",
"label": "Typical claim notice",
"sublabel": "When you keep receipts"
}
]
} subtext="Independent quotes and policies issued through our comparison tools." variant="default"
/>---
blocks:
_component: page-sections/info-blocks/trust-stats-row
eyebrow: Why travelers choose us
heading: Real numbers from real trips
subtext: Independent quotes and policies issued through our comparison tools.
variant: default
stats:
- value: 2M+
label: Quotes compared
sublabel: Since 2018
- value: '4.8'
label: Average rating
sublabel: From 12k+ reviews
- value: 48h
label: Typical claim notice
sublabel: When you keep receipts
colorScheme: inherit
backgroundColor: surface
paddingVertical: 3xl
---15+
Insurers
On panel
30s
To compare
Typical flow
98%
Claims paid
Last year
---
import TrustStatsRow from "@page-sections/info-blocks/trust-stats-row/TrustStatsRow.astro";
---
<TrustStatsRow
backgroundColor="base" colorScheme="inherit" eyebrow="" heading="" paddingVertical="2xl" stats={
[
{
"value": "15+",
"label": "Insurers",
"sublabel": "On panel"
},
{
"value": "30s",
"label": "To compare",
"sublabel": "Typical flow"
},
{
"value": "98%",
"label": "Claims paid",
"sublabel": "Last year"
}
]
} subtext="" variant="divided"
/>---
blocks:
_component: page-sections/info-blocks/trust-stats-row
variant: divided
eyebrow: ''
heading: ''
subtext: ''
stats:
- value: 15+
label: Insurers
sublabel: On panel
- value: 30s
label: To compare
sublabel: Typical flow
- value: 98%
label: Claims paid
sublabel: Last year
colorScheme: inherit
backgroundColor: base
paddingVertical: 2xl
---Social proof
Travelers stay covered
500k
Policies/year
4.7
App store
iOS & Android
---
import TrustStatsRow from "@page-sections/info-blocks/trust-stats-row/TrustStatsRow.astro";
---
<TrustStatsRow
backgroundColor="highlight" colorScheme="inherit" eyebrow="Social proof" heading="Travelers stay covered" paddingVertical="3xl" stats={
[
{
"value": "500k",
"label": "Policies/year",
"sublabel": ""
},
{
"value": 4.7,
"label": "App store",
"sublabel": "iOS & Android"
}
]
} subtext="" variant="pills"
/>---
blocks:
_component: page-sections/info-blocks/trust-stats-row
variant: pills
eyebrow: Social proof
heading: Travelers stay covered
subtext: ''
stats:
- value: 500k
label: Policies/year
sublabel: ''
- value: 4.7
label: App store
sublabel: iOS & Android
colorScheme: inherit
backgroundColor: highlight
paddingVertical: 3xl
---Room to breathe
Wider grid gaps and larger stat tiles for hero-adjacent placement.
$2.1B
Coverage placed
Rolling 12 months
180
Countries
Destination list
---
import TrustStatsRow from "@page-sections/info-blocks/trust-stats-row/TrustStatsRow.astro";
---
<TrustStatsRow
backgroundColor="surface" colorScheme="inherit" eyebrow="" heading="Room to breathe" paddingVertical="5xl" stats={
[
{
"value": "$2.1B",
"label": "Coverage placed",
"sublabel": "Rolling 12 months"
},
{
"value": 180,
"label": "Countries",
"sublabel": "Destination list"
}
]
} subtext="Wider grid gaps and larger stat tiles for hero-adjacent placement." variant="spacious"
/>---
blocks:
_component: page-sections/info-blocks/trust-stats-row
variant: spacious
eyebrow: ''
heading: Room to breathe
subtext: Wider grid gaps and larger stat tiles for hero-adjacent placement.
stats:
- value: $2.1B
label: Coverage placed
sublabel: Rolling 12 months
- value: 180
label: Countries
sublabel: Destination list
colorScheme: inherit
backgroundColor: surface
paddingVertical: 5xl
---24/7
Assist
<2min
Avg. wait
---
import TrustStatsRow from "@page-sections/info-blocks/trust-stats-row/TrustStatsRow.astro";
---
<TrustStatsRow
backgroundColor="none" colorScheme="inherit" eyebrow="" heading="" paddingVertical="xl" stats={
[
{
"value": "24/7",
"label": "Assist"
},
{
"value": "<2min",
"label": "Avg. wait"
}
]
} subtext="" variant="tight"
/>---
blocks:
_component: page-sections/info-blocks/trust-stats-row
variant: tight
eyebrow: ''
heading: ''
subtext: ''
stats:
- value: 24/7
label: Assist
- value: <2min
label: Avg. wait
colorScheme: inherit
backgroundColor: none
paddingVertical: xl
---