Hero Sections

Explore modern hero section designs for developer portals.

Explore hero section examples built for developer portals. These designs help you communicate your product’s value, surface key features, and direct developers to essential actions like viewing docs, generating API keys, or trying your sandbox environment.

Default hero

Empower Your Integrations with Our Flexible API Suite

Seamlessly connect and extend your applications with powerful, developer-friendly APIs designed for modern platforms
::page-hero
---
background: "var(--kui-color-background-neutral-weakest, $kui-color-background-neutral-weakest)"
padding: "clamp(60px, 8vw, 120px) clamp(10px, 4vw, 60px)"
title-font-size: "clamp(34px, 3.4vw, 68px)"
title-line-height: "clamp(36px, 3.4vw, 76px)"
description-font-size: "clamp(var(--kui-font-size-30, $kui-font-size-30), 1.8vw, var(--kui-font-size-70, $kui-font-size-70))"
description-font-weight: "var(--kui-font-weight-regular, $kui-font-weight-regular)"
description-line-height: "clamp(var(--kui-line-height-30, $kui-line-height-30), 1.8vw, var(--kui-line-height-70, $kui-line-height-70))"
color: "var(--kui-color-text-neutral-stronger, $kui-color-text-neutral-stronger)"
title-color: "var(--kui-color-text, $kui-color-text)"
---
#title
Empower Your Integrations with Our Flexible API Suite

#description
Seamlessly connect and extend your applications with powerful, developer-friendly APIs designed for modern platforms

#actions
  :::button
  ---
  size: "large"
  ---
  Get started
  :::
::

Default hero with centered content

Empower Your Integrations with Our Flexible API Suite

Seamlessly connect and extend your applications with powerful, developer-friendly APIs designed for modern platforms
::page-hero
---
background: "var(--kui-color-background-neutral-weakest, $kui-color-background-neutral-weakest)"
padding: "clamp(60px, 8vw, 120px) clamp(10px, 4vw, 60px)"
title-font-size: "clamp(34px, 3.4vw, 68px)"
title-line-height: "clamp(36px, 3.4vw, 76px)"
description-font-size: "clamp(var(--kui-font-size-30, $kui-font-size-30), 1.8vw, var(--kui-font-size-70, $kui-font-size-70))"
description-font-weight: "var(--kui-font-weight-regular, $kui-font-weight-regular)"
description-line-height: "clamp(var(--kui-line-height-30, $kui-line-height-30), 1.8vw, var(--kui-line-height-70, $kui-line-height-70))"
color: "var(--kui-color-text-neutral-stronger, $kui-color-text-neutral-stronger)"
title-color: "var(--kui-color-text, $kui-color-text)"
text-align: "center"
---
#title
Empower Your Integrations with Our Flexible API Suite

#description
Seamlessly connect and extend your applications with powerful, developer-friendly APIs designed for modern platforms

#actions
  :::button
  ---
  size: "large"
  ---
  Get started
  :::
::