Backgrounds

Use Backgrounds to really catch attention!

Works great with Sections.

Product Backgrounds

Use Product Backgrounds for...

Product Variation 1

Product Variation 2

Product Variation 3

import { BackgroundContext, BackgroundVariation } from "@hedia/windfall/css/backgrounds";
import { StackSize } from "@hedia/windfall/css/stacks";
import { background } from "@hedia/windfall/html/backgrounds";
import { heading3 } from "@hedia/windfall/html/headings";
import { stack } from "@hedia/windfall/html/stacks";

stack(
	{ size: StackSize.Small },
	heading3("Product Variation 1"),
	background({
		context: BackgroundContext.Product,
		variation: BackgroundVariation.One,
		style: "height: 400px;",
	}),
	heading3("Product Variation 2"),
	background({
		context: BackgroundContext.Product,
		variation: BackgroundVariation.Two,
		style: "height: 400px;",
	}),
	heading3("Product Variation 3"),
	background({
		context: BackgroundContext.Product,
		variation: BackgroundVariation.Three,
		style: "height: 400px;",
	}),
),

Medical Backgrounds

Use Medical Backgrounds for...

Medical Variation 1

Medical Variation 2

Medical Variation 3

import { BackgroundContext, BackgroundVariation } from "@hedia/windfall/css/backgrounds";
import { StackSize } from "@hedia/windfall/css/stacks";
import { background } from "@hedia/windfall/html/backgrounds";
import { heading3 } from "@hedia/windfall/html/headings";
import { stack } from "@hedia/windfall/html/stacks";

stack(
	{ size: StackSize.Small },
	heading3("Medical Variation 1"),
	background({
		context: BackgroundContext.Medical,
		variation: BackgroundVariation.One,
		style: "height: 400px;",
	}),
	heading3("Medical Variation 2"),
	background({
		context: BackgroundContext.Medical,
		variation: BackgroundVariation.Two,
		style: "height: 400px;",
	}),
	heading3("Medical Variation 3"),
	background({
		context: BackgroundContext.Medical,
		variation: BackgroundVariation.Three,
		style: "height: 400px;",
	}),
),

Brand Backgrounds

Use Brand Backgrounds for...

Brand Variation 1

Brand Variation 2

Brand Variation 3

import { BackgroundContext, BackgroundVariation } from "@hedia/windfall/css/backgrounds";
import { StackSize } from "@hedia/windfall/css/stacks";
import { background } from "@hedia/windfall/html/backgrounds";
import { heading3 } from "@hedia/windfall/html/headings";
import { stack } from "@hedia/windfall/html/stacks";

stack(
	{ size: StackSize.Small },
	heading3("Brand Variation 1"),
	background({
		context: BackgroundContext.Brand,
		variation: BackgroundVariation.One,
		style: "height: 400px;",
	}),
	heading3("Brand Variation 2"),
	background({
		context: BackgroundContext.Brand,
		variation: BackgroundVariation.Two,
		style: "height: 400px;",
	}),
	heading3("Brand Variation 3"),
	background({
		context: BackgroundContext.Brand,
		variation: BackgroundVariation.Three,
		style: "height: 400px;",
	}),
),