Sections

Use sections for...

Hero Sections

Use hero sections for...

Centered

Use centered hero sections for...

Eyebrow

Data to enrich your online business

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.

import { ButtonKind } from "@hedia/windfall/css/buttons";
import { button } from "@hedia/windfall/html/buttons";
import {
	heroSection,
	heroSectionCallToActions,
	heroSectionEyebrow,
	heroSectionHeading,
	heroSectionSubHeading,
} from "@hedia/windfall/html/sections";

heroSection(
	{ centered: true },
	heroSectionEyebrow("Eyebrow"),
	heroSectionHeading("Data to enrich your online business"),
	heroSectionSubHeading(
		"Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.",
	),
	heroSectionCallToActions(
		button({ kind: ButtonKind.Primary }, "Get started"),
		button({ kind: ButtonKind.Secondary }, "Learn more →"),
	),
),

Centered with background

Use centered hero sections with backgrounds for...

Eyebrow

Data to enrich your online business

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.

import { BackgroundContext, BackgroundVariation } from "@hedia/windfall/css/backgrounds";
import { ButtonKind } from "@hedia/windfall/css/buttons";
import { background } from "@hedia/windfall/html/backgrounds";
import { button } from "@hedia/windfall/html/buttons";
import {
	heroSection,
	heroSectionCallToActions,
	heroSectionEyebrow,
	heroSectionHeading,
	heroSectionSubHeading,
} from "@hedia/windfall/html/sections";

background(
	{ context: BackgroundContext.Product, variation: BackgroundVariation.One },
	heroSection(
		{ centered: true },
		heroSectionEyebrow("Eyebrow"),
		heroSectionHeading("Data to enrich your online business"),
		heroSectionSubHeading(
			"Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.",
		),
		heroSectionCallToActions(
			button({ kind: ButtonKind.Primary }, "Get started"),
			button({ kind: ButtonKind.Secondary }, "Learn more →"),
		),
	),
),

Header Sections

Use header sections for...

Centered

Use centered header sections for...

Support center

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.

import { headerSection } from "@hedia/windfall/html/sections";

headerSection({
	centered: true,
	heading: "Support center",
	subHeading:
		"Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.",
}),

Centered with eyebrow

Use centered header sections with eyebrows for...

Get the help you need

Support center

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.

import { headerSection } from "@hedia/windfall/html/sections";

headerSection({
	centered: true,
	eyebrow: "Get the help you need",
	heading: "Support center",
	subHeading:
		"Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.",
}),

Simple

Use simple header sections for...

Support center

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.

import { headerSection } from "@hedia/windfall/html/sections";

headerSection({
	heading: "Support center",
	subHeading:
		"Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.",
}),

Simple with background

Use simple header sections with backgrounds for...

Support center

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.

import { BackgroundContext, BackgroundVariation } from "@hedia/windfall/css/backgrounds";
import { background } from "@hedia/windfall/html/backgrounds";
import { headerSection } from "@hedia/windfall/html/sections";

background(
	{ context: BackgroundContext.Medical, variation: BackgroundVariation.Two },
	headerSection({
		heading: "Support center",
		subHeading:
			"Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.",
	}),
),

Simple with eyebrow

Use simple header sections with eyebrows for...

Get the help you need

Support center

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.

import { headerSection } from "@hedia/windfall/html/sections";

headerSection({
	eyebrow: "Get the help you need",
	heading: "Support center",
	subHeading:
		"Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.",
}),

Simple with eyebrow and background

Use simple header sections with eyebrows and backgrounds for...

Get the help you need

Support center

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.

import { BackgroundContext, BackgroundVariation } from "@hedia/windfall/css/backgrounds";
import { background } from "@hedia/windfall/html/backgrounds";
import { headerSection } from "@hedia/windfall/html/sections";

background(
	{ context: BackgroundContext.Medical, variation: BackgroundVariation.One },
	headerSection({
		eyebrow: "Get the help you need",
		heading: "Support center",
		subHeading:
			"Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.",
	}),
),

Highlighted with eyebrow

Use simple header sections with eyebrows for...

Get the help you need

Support center

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.

import { headerSection } from "@hedia/windfall/html/sections";

headerSection({
	eyebrow: "Get the help you need",
	heading: "Support center",
	alt: true,
	subHeading:
		"Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.",
}),