Hero Sections | Kong Konnect Developer Portal Docs

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, #f9fafb)"
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, 14px), 1.8vw, var(--kui-font-size-70, 24px))"
description-font-weight: "var(--kui-font-weight-regular, 400)"
description-line-height: "clamp(var(--kui-line-height-30, 20px), 1.8vw, var(--kui-line-height-70, 36px))"
color: "var(--kui-color-text-neutral-stronger, #3a3f51)"
title-color: "var(--kui-color-text, #000933)"
styles: |
  padding: var(--kui-space-0, 0) !important;
---
#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, #f9fafb)"
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, 14px), 1.8vw, var(--kui-font-size-70, 24px))"
description-font-weight: "var(--kui-font-weight-regular, 400)"
description-line-height: "clamp(var(--kui-line-height-30, 20px), 1.8vw, var(--kui-line-height-70, 36px))"
color: "var(--kui-color-text-neutral-stronger, #3a3f51)"
title-color: "var(--kui-color-text, #000933)"
text-align: "center"
styles: |
  padding: var(--kui-space-0, 0) !important;
---
#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
  :::
::

Hero with large image

Empower Your Integrations with Our Flexible API Suite

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

::page-section
---
full-width: true
max-width: "960px"
horizontal-align: "center"
title:
  font-size: "clamp(34px, 3.4vw, 68px)"
  line-height: "clamp(38px, 3.5vw, 78px)"
  color: "var(--kui-color-text, #000933)"
  text-align: "center"
background: "var(--kui-color-background-neutral-weakest, #f9fafb)"
padding: "clamp(30px, 8vw, 40px) clamp(10px, 4vw, 56px)"
color: "var(--kui-color-text-neutral-stronger, #3a3f51)"
styles: |
  .section-content {
    font-size: clamp(var(--kui-font-size-30, 14px), 1.8vw, var(--kui-font-size-70, 24px));
    font-weight: var(--kui-font-weight-regular, 400);
    line-height: clamp(var(--kui-line-height-30, 20px), 1.8vw, var(--kui-line-height-70, 36px));
    text-align: center;
  }
---
#title
Empower Your Integrations with Our Flexible API Suite


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

  :::page-container
  ---
  display: "flex"
  justify-content: "center"
  margin: "0 0 clamp(var(--kui-space-90, 32px), 8vw, var(--kui-space-130, 64px))"
  ---
    :::button
    ---
    size: "large"
    ---
    Get started
    :::

    :::button
    ---
    size: "large"
    appearance: "tertiary"
    ---
    Learn more -->
    :::
  :::

  ::image
  ---
  src: "./images/examples/sections/hero-large-image.png"
  border-radius: "var(--kui-border-radius-40, 8px)"
  styles: |
    width: 100%;
  ---
  ::
::

Hero with small image

Launch, Share, and Scale Your APIs Faster

Easily publish APIs, onboard consumers, and provide live documentation — all with the power of Kong Gateway and the flexibility of a beautiful developer experience.

::page-hero
---
background: "var(--kui-color-background-neutral-weakest, #f9fafb)"
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, 14px), 1.8vw, var(--kui-font-size-70, 24px))"
description-font-weight: "var(--kui-font-weight-regular, 400)"
description-line-height: "clamp(var(--kui-line-height-30, 20px), 1.8vw, var(--kui-line-height-70, 36px))"
color: "var(--kui-color-text-neutral-stronger, #3a3f51)"
title-color: "var(--kui-color-text, #000933)"
image:
  src: "./images/examples/sections/hero-small-image.png"
  border-radius: "var(--kui-border-radius-40, 8px)"
  max-width: "400px"
styles: |
  padding: var(--kui-space-0, 0) !important;

  .page-hero {
    gap: clamp(var(--kui-space-90, 32px), 4vw, var(--kui-space-120, 56px)) !important;
  }
  .page-hero-textblock {
    padding: 0 !important;
  }
---
#title
Launch, Share, and Scale Your APIs Faster

#description
Easily publish APIs, onboard consumers, and provide live documentation — all with the power of Kong Gateway and the flexibility of a beautiful developer experience.

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

Hero with split image

Build. Test. Launch. Repeat.

From API keys to interactive docs, the Kong Dev Portal gives your developers everything they need to ship faster and smarter.

::page-hero
---
padding: "0"
background: "var(--kui-color-background-neutral-weakest, #f9fafb)"
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, 14px), 1.8vw, var(--kui-font-size-70, 24px))"
description-font-weight: "var(--kui-font-weight-regular, 400)"
description-line-height: "clamp(var(--kui-line-height-30, 20px), 1.8vw, var(--kui-line-height-70, 36px))"
color: "var(--kui-color-text-neutral-stronger, #3a3f51)"
title-color: "var(--kui-color-text, #000933)"
image:
  src: "./images/examples/sections/hero-image-background.png"
  position: "right"
  max-width: "720px"
styles: |
  padding: var(--kui-space-0, 0) !important;

  .page-hero-textblock {
    padding: clamp(60px, 8vw, 120px) clamp(10px, 4vw, 28px) clamp(0px, 8vw, 120px) clamp(10px, 4vw, 60px) !important;
  }
---
#title
Build. Test. Launch. Repeat.

#description
From API keys to interactive docs, the Kong Dev Portal gives your developers everything they need to ship faster and smarter.

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

  :::button
  ---
  size: "large"
  appearance: "tertiary"
  ---
  Learn more -->
  :::
::

Hero with multiple images

Your Central Hub for All Things API

Get fast access to documentation, usage guides, and testing tools so your teams and partners can build on your APIs with confidence.

::page-hero
---
background: "var(--kui-color-background-neutral-weakest, #f9fafb)"
padding: "clamp(10px, 4vw, 46px) clamp(20px, 8vw, 56px)"
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, 14px), 1.8vw, var(--kui-font-size-70, 24px))"
description-font-weight: "var(--kui-font-weight-regular, 400)"
description-line-height: "clamp(var(--kui-line-height-30, 20px), 1.8vw, var(--kui-line-height-70, 36px))"
color: "var(--kui-color-text-neutral-stronger, #3a3f51)"
title-color: "var(--kui-color-text, #000933)"
image:
  position: "right"
  max-width: "584px"
styles: |
  .page-hero-textblock {
    padding: 0 !important;
  }
---
#title
Your Central Hub for All Things API

#description
Get fast access to documentation, usage guides, and testing tools so your teams and partners can build on your APIs with confidence.

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

#image
  :::multi-column
  ---
  columns-breakpoints:
    mobile: "1"
  phablet: "1"
  tablet: "2"
  laptop: "2"
  desktop: "2"
  gap: "var(--kui-space-100, 40px)"
  ---
    :::container
    ---
    gap: "var(--kui-space-100, 40px)"
    display: "flex"
    flex-direction: "column"
    ---
      ::image
      ---
      src: "./images/examples/sections/hero-small-image.png"
      border-radius: "var(--kui-border-radius-40, 8px)"
      display: "block"
      styles: |
        width: 100%;
        height: 272px;
      ---
      ::

      ::image
      ---
      src: "./images/examples/sections/hero-multiple-image-one.png"
      border-radius: "var(--kui-border-radius-40, 8px)"
      display: "block"
      styles: |
        width: 100%;
        height: 272px;
      ---
      ::
    :::

    :::container
    ---
    margin: "clamp(0px, 4vw, 146px) 0 0"
    gap: "var(--kui-space-100, 40px)"
    display: "flex"
    flex-direction: "column"
    ---
      ::image
      ---
      src: "./images/examples/sections/hero-multiple-image-two.png"
      border-radius: "var(--kui-border-radius-40, 8px)"
      display: "block"
      styles: |
        width: 100%;
        height: 272px;
      ---
      ::

      ::image
      ---
      src: "./images/examples/sections/hero-large-image.png"
      border-radius: "var(--kui-border-radius-40, 8px)"
      display: "block"
      styles: |
        width: 100%;
        height: 272px;
      ---
      ::
    :::
  :::
::