Content Section: Centered

stable

Full-width centered section. Eyebrow → heading → optional image/lottie → lead → divider → body copy. Supports single or two-column body.

Live Preview

About the League

Competitive Soccer Across the Carolinas

From the Piedmont to the coast, CPSL brings together the best clubs in North and South Carolina under one banner — raising the standard for competitive soccer at every level.

The Carolina Premier Soccer League was founded to elevate competitive youth and amateur soccer across North Carolina and South Carolina. Our league spans the state border — a boundary that unites rather than divides — and serves clubs from Charlotte to Raleigh, Greensboro to the coast.

With tiered divisions — Premier, Elite, and Academy — CPSL provides a development pathway for players at every stage. Our promotion and relegation structure rewards ambition and ensures every match carries weight throughout the full season.

CPSL partners with US Soccer and regional federations to deliver certified officiating, standardized pitch standards, and transparent standings. Teams gain access to stat tracking, live scoring, and digital match reports through the CPSL platform.

From pre-season tournaments to end-of-season championships, the CPSL calendar is built around the player experience. We believe competitive soccer should be accessible, professionally run, and celebrated by the communities it represents.

tsx

<ContentSectionCentered
/>

Controls

Background

background

Columns

columns

Body copy column count.

Props

Prop	Type	Default	Description
`eyebrow`	`string`	`—`	Small uppercase label above the heading.
`heading`	`string`	`—`	Main display heading.
`image`	`{ src: string; alt?: string }`	`—`	Optional image below the heading.
`lottie`	`LottieMedia`	`—`	Optional Lottie animation. Overrides `image` if both provided.
`lead`	`string`	`—`	Lead paragraph centered below the heading.
`paragraphs`	`string[]`	`—`	Body paragraphs. Splits into 2 columns at lg by default.
`background`	`"cream" \| "white" \| "surface" \| "navy" \| "gold"`	`"cream"`	Surface variant.
`columns`	`1 \| 2`	`2`	Body-copy column count.
`bottomImage`	`{ src: string; alt?: string }`	`—`	Optional image at the bottom of the section.