Header (marketing)

Section-level intro headers: simple, centered, with stats, with cards, with background image.

Preview

Simple with eyebrow

Get the help you need

Support center

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.

Centered

Support center

Anim aute id magna aliqua ad ad non deserunt sunt.

With stats

Work with us

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.

Open roles Internship program Our values

Offices worldwide: 12
Full-time colleagues: 300+
Hours per week: 40
Paid time off: Unlimited

With cards

Support center

Get in touch with the right team.

Sales

Talk to a sales rep about pricing and options.

Technical support

Need help with your account? We've got you.

Media inquiries

Press and partner questions.

React preview

LiveView (HEEx)

alias DesignSystem.UI.MarketingSectionHeader

<MarketingSectionHeader.header
  variant="with-stats"
  title="Work with us"
  description="Join a friendly team."
  links={[%{label: "Open roles", href: ~p"/jobs"}]}
  stats={[
    %{label: "Offices worldwide", value: "12"},
    %{label: "Colleagues", value: "300+"}
  ]}
/>

<MarketingSectionHeader.header
  variant="centered"
  eyebrow="Get the help you need"
  title="Support center"
  description="We're here to help."
/>

React (JSX)

import { MarketingSectionHeader } from "../ui/index.mjs"

<MarketingSectionHeader
  variant="with-stats"
  title="Work with us"
  description="Join a friendly team."
  links={[{ label: "Open roles", href: "/jobs" }]}
  stats={[
    { label: "Offices worldwide", value: "12" },
    { label: "Colleagues", value: "300+" },
  ]}
/>

<MarketingSectionHeader
  variant="centered"
  eyebrow="Get the help you need"
  title="Support center"
  description="We're here to help."
/>