Marketing Section Header | UI Showcase
WRNexus UI
Marketing component

Marketing Section Header

Introduce marketing content with an eyebrow, title, description, and optional linked action.

12 props3 slots0 outputsTheme readyResponsive
Interactive playground

Configure Marketing Section Header

Change any prop and inspect the server-rendered component immediately.

Live preview

Marketing Section Header example

A polished default marketing section header for a modern application.

Component code
<MarketingSectionHeader
  title="Marketing Section Header example"
  description="A polished default marketing section header for a modern application."
  align="start"
  actionLabel="Marketing Section Header"
  actionHref="#marketing-section-header-demo">
  <div data-slot="icon">
    <div class="showcase-slot">icon slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</MarketingSectionHeader>
Component props12 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Split header with action

Pair marketing copy with a clear secondary navigation action.

01
Live preview

Platform capabilities

Build complete public experiences

Use reusable sections, cards, metrics, heroes, and CTAs.

Component usage.wrn
<MarketingSectionHeader
  eyebrow="Platform capabilities"
  title="Build complete public experiences"
  description="Use reusable sections, cards, metrics, heroes, and CTAs."
  actionLabel="Explore components"
  actionHref="#components"
  actionIcon="icon-[lucide--arrow-right]">
  <div data-slot="icon">
    <div class="showcase-slot">icon slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</MarketingSectionHeader>
Compact

Centered marketing header

Use a centered configuration above campaigns, proof, and feature collections.

02
Live preview

Why WRNexusJS

One coherent design system

Consistent presentation across public pages and product applications.

Component usage.wrn
<MarketingSectionHeader
  eyebrow="Why WRNexusJS"
  title="One coherent design system"
  description="Consistent presentation across public pages and product applications."
  align="center"
  size="compact"
  actionLabel="Compact example"
  actionHref="#marketing-section-header-demo">
  <div data-slot="icon">
    <div class="showcase-slot">icon slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</MarketingSectionHeader>
Advanced

External resource header

Link to supporting documentation or an external resource.

03
Live preview

Developer resources

Learn the framework through working examples

Every component page includes live demos, playground controls, events, and API details.

Component usage.wrn
<MarketingSectionHeader
  eyebrow="Developer resources"
  title="Learn the framework through working examples"
  description="Every component page includes live demos, playground controls, events, and API details."
  size="large"
  actionLabel="Open documentation"
  actionHref="https://wrnexusjs.dev"
  actionExternal="true">
  <div data-slot="icon">
    <div class="showcase-slot">icon slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</MarketingSectionHeader>
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
idstring""No
eyebrowstring""No
titlestring""No
descriptionstring""No
alignstring"split"No
sizestring"default"No
colorstring"primary"No
actionLabelstring""No
actionHrefstring""No
actionIconstring""No
actionExternalbooleanfalseNo
classstring""No