nuxt-x-cards
Hero Split
Split-layout hero card with image on one side and editorial text on the other.
Hero Split
The XCardHeroSplit component renders a two-column hero: image on one side, editorial text on the other. Useful for editorial landing sections where breathing room around the text matters.
Components
<XCardHeroSplit />
<XCardHeroSplit
title="Engineered for"
title-accent="every body."
description="The most advanced health sensor we've ever built, wrapped in the most comfortable form we've ever designed."
pretitle="The Science"
image-url="/images/hero-split.jpg"
variant="left-image"
filter="golden"
theme="light"
:cta="{ label: 'Explore the research', to: '/science' }"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Main headline text |
titleAccent | string | — | Accent line rendered below title in serif italic |
description | string | — | Body paragraph below the headline |
pretitle | string | — | Small section-label text above the headline |
imageUrl | string | required | Image URL |
imageAlt | string | — | Alt text for the image |
variant | 'left-image' | 'right-image' | 'left-image' | Which column the image occupies |
filter | 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | 'warm' | 'clean' | 'product' | 'none' | global default | CSS filter applied to the image |
cta | { label: string; to?: string; href?: string } | — | Single outline pill button. Use to for internal links, href for external. |
theme | 'dark' | 'light' | 'light' | Background and text color scheme |
loading | 'eager' | 'lazy' | 'eager' | Native <img> loading hint for the hero image. |
AI Context
component: XCardHeroSplit
package: "@xenterprises/nuxt-x-cards"
category: HeroCards
use-when: >
Use XCardHeroSplit for editorial split-screen layouts where image and text
share equal visual weight. Falls back to global filter defaults from
useXCards() when the filter prop is omitted.
notes:
- titleAccent renders in a serif italic style for brand emphasis
- pretitle renders as small section-label text above the headline
- filter prop is optional — omit to use layer-wide defaults