This component was developed exclusively for the TEVA rebrand initiative.

It is not intended for general use in other projects.
Please do not use this component outside of the TEVA context.

Overview

Controls top and bottom spacing for hero sections with predefined size variants.

API Reference

vision-teva-2025-hero-spacing

Wraps content with configurable top and bottom spacing.

Attributes

top: "none" | "sm" | "md" | "lg" - Top spacing size (default: "lg")
bottom: "none" | "sm" | "md" | "lg" - Bottom spacing size (default: "lg")

Basic Usage

Wrap hero content to apply consistent spacing above and below.

Note: Margin collapse is not visible in this demo because of the hr elements separating each example.

Default hero spacing

Small hero spacing

Small spacing (sm/sm)

Medium hero spacing

Medium spacing (md/md)

No top, large bottom

No spacing (none/none)

Large top, small bottom

Mixed spacing (lg/sm)

<hr>
<vision-teva-2025-hero-spacing>
	<Block caption="Default hero spacing">Default hero spacing</Block>
</vision-teva-2025-hero-spacing>
<hr>
<vision-teva-2025-hero-spacing top="sm" bottom="sm">
	<Block caption="Small hero spacing">Small spacing (sm/sm)</Block>
</vision-teva-2025-hero-spacing>
<hr>
<vision-teva-2025-hero-spacing top="md" bottom="md">
	<Block caption="Medium hero spacing">Medium spacing (md/md)</Block>
</vision-teva-2025-hero-spacing>
<hr>
<vision-teva-2025-hero-spacing top="none" bottom="lg">
	<Block caption="No top, large bottom">No spacing (none/none)</Block>
</vision-teva-2025-hero-spacing>
<hr>
<vision-teva-2025-hero-spacing top="lg" bottom="sm">
	<Block caption="Large top, small bottom">Mixed spacing (lg/sm)</Block>
</vision-teva-2025-hero-spacing>
<hr>

Spacing Values

Available spacing sizes: