Heroes

Large marketing hero: eyebrow + title + subtitle + CTA actions, with an optional trailing image slot.

Preview

Announcing

Deploy to the edge in minutes

Ship your app to a global network with zero ops. Built on open standards.

Learn more →

React preview

LiveView (HEEx) 

alias DesignSystem.UI.{Buttons, Heroes}

<Heroes.hero
  eyebrow="Announcing"
  title="Deploy to the edge in minutes"
  subtitle="Ship to a global network with zero ops."
>
  <:actions>
    <Buttons.button phx-click="get_started">Get started</Buttons.button>
  </:actions>
</Heroes.hero>

React (JSX) 

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

<Hero
  eyebrow="Announcing"
  title="Deploy to the edge"
  subtitle="Ship faster"
  actions={<Button>Get started</Button>}
/>