Feature Sections

Utilize feature sections to highlight core functionality and help developers quickly understand how your product fits their needs.

Feature highlights help developers grasp your platform’s value at a glance with structured feature blocks that highlight key APIs, tools, and use cases—making complex capabilities simple, scannable, and actionable.

Feature highlights with split layout

Build with confidence

Give your developers a central hub to discover, test, and integrate with your APIs—all in one place.

  • Showcase your APIs with ease
    Publish interactive documentation and sample requests so developers can quickly understand how to use your APIs and start building right away.

  • Highlight the value of your platform
    Communicate why your APIs matter with clear descriptions, real-world use cases, and easy onboarding resources that reduce friction and drive adoption.

::page-hero
---
title-font-size: "clamp(24px, 3.4vw, 44px)"
title-line-height: "clamp(26px, 3.4vw, 46px)"
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))"
image:
  src: "./images/examples/sections/feature-split-image.png"
  position: "right"
  max-width: "680px"
styles: |
  padding: var(--kui-space-0, 0) !important;
---
#title
Build with confidence

#description
Give your developers a central hub to discover, test, and integrate with your APIs—all in one place.
  :::container
  ---
  tag: "ul"
  padding: "clamp(20px, 8vw, 48px) 16px 0 0"
  styles: |
    strong {
      font-size: var(--kui-font-size-50, 18px);
      line-height: var(--kui-line-height-50, 28px);
    }
  ---
    ::::container
    ---
    tag: "li"
    font-size: "var(--kui-font-size-40, 16px)"
    line-height: "var(--kui-line-height-40, 24px)"
    padding: "0 0 clamp(12px, 8vw, 24px)"
    ---
    **Showcase your APIs with ease**
    Publish interactive documentation and sample requests so developers can quickly understand how to use your APIs and start building right away.
    ::::

    ::::container
    ---
    tag: "li"
    font-size: "var(--kui-font-size-40, 16px)"
    line-height: "var(--kui-line-height-40, 24px)"
    padding: "0 0 clamp(12px, 8vw, 24px)"
    ---
    **Highlight the value of your platform**
    Communicate why your APIs matter with clear descriptions, real-world use cases, and easy onboarding resources that reduce friction and drive adoption.
    ::::
  :::
::

Feature highlights with centered content

Discover & Showcase Your APIs

Make it easy for developers to find and explore your APIs — with clear documentation, examples, and interactive consoles.

Accelerate Developer Onboarding

Enable fast, self-service access to APIs with built-in authentication, usage guides, and automated provisioning.

Monitor, Secure & Iterate

Track usage, control access, and evolve your API offerings over time — all from one connected, customizable portal.

Powering Smarter APIs, Built for Modern Developers

From prototyping to production, Kong Dev Portal helps you publish, document, and scale intelligent APIs with ease.
::page-hero
---
text-align: "center"
title-font-size: "clamp(24px, 3.4vw, 44px)"
title-line-height: "clamp(26px, 3.4vw, 46px)"
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))"
max-width: "1160px"
image:
  position: "bottom"
styles: |
  padding: var(--kui-space-0, 0) !important;

  .page-hero-image {
    flex-direction: column !important;
  }
---
#title
Powering Smarter APIs, Built for Modern Developers

#description
From prototyping to production, Kong Dev Portal helps you publish, document, and scale intelligent APIs with ease.

#image
  :::image
  ---
  src: "./images/examples/sections/feature-split-image.png"
  display: "block"
  border-radius: "var(--kui-border-radius-40, 8px)"
  styles: |
    width: 100%;
    max-height: 544px;  
  ---
  :::

  :::multi-column
  ---
  columns-breakpoints:
    mobile: 2
  phablet: 2
  tablet: 2
  laptop: 3
  desktop: 3
  gap: "var(--kui-space-90, 32px)"
  margin: "var(--kui-space-90, 32px) var(--kui-space-0, 0px) var(--kui-space-0, 0px)"
  ---
    ::page-container
    ---
    styles: |
      p + p {
        margin-top: var(--kui-space-40, 8px);
        font-size: clamp(var(--kui-font-size-20, 12px), 4vw, var(--kui-font-size-40, 16px));
      }

      strong {
        clamp(var(--kui-font-size-30, 14px), 4vw, var(--kui-font-size-50, 18px));
      }
    ---
    **Discover & Showcase Your APIs**

    Make it easy for developers to find and explore your APIs — with clear documentation, examples, and interactive consoles.
    ::

    ::page-container
    ---
    styles: |
      p + p {
        margin-top: var(--kui-space-40, 8px);
        font-size: clamp(var(--kui-font-size-20, 12px), 4vw, var(--kui-font-size-40, 16px));
      }

      strong {
        clamp(var(--kui-font-size-30, 14px), 4vw, var(--kui-font-size-50, 18px));
      }
    ---
    **Accelerate Developer Onboarding**

    Enable fast, self-service access to APIs with built-in authentication, usage guides, and automated provisioning.
    ::

    ::page-container
    ---
    styles: |
      p + p {
        margin-top: var(--kui-space-40, 8px);
        font-size: clamp(var(--kui-font-size-20, 12px), 4vw, var(--kui-font-size-40, 16px));
      }

      strong {
        clamp(var(--kui-font-size-30, 14px), 4vw, var(--kui-font-size-50, 18px));
      }
    ---
    **Monitor, Secure & Iterate**

    Track usage, control access, and evolve your API offerings over time — all from one connected, customizable portal.
    ::
  :::
::

Feature highlights with three columns

Real-Time Insights & Analytics

Track API usage, latency, and error rates with built-in analytics that help you understand how your APIs are performing in the wild.

Learn more -->

Built-In Security & Access Control

Manage authentication, authorization, and rate limits with ease — all backed by Kong’s proven API gateway and RBAC capabilities.

Learn more -->

Auto-Generated & Custom API Docs

Automatically generate interactive documentation from your OpenAPI specs and customize them to guide developers through every use case.

Learn more -->

Everything You Need to Deliver and Consume APIs

From publishing to monitoring, the Kong Dev Portal provides a complete experience for developers and API consumers.
::page-hero
---
text-align: "center"
title-font-size: "clamp(24px, 3.4vw, 44px)"
title-line-height: "clamp(26px, 3.4vw, 46px)"
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))"
max-width: "1200px"
text-max-width: "780px"
padding: "clamp(20px, 8vw, 60px) clamp(10px, 4vw, 30px)"
image:
  position: "bottom"
styles: |
  padding: var(--kui-space-0, 0) !important;

  .page-hero-textblock {
    align-self: center;
  }
---
#title
Everything You Need to Deliver and Consume APIs

#description
From publishing to monitoring, the Kong Dev Portal provides a complete experience for developers and API consumers.

#image
  :::multi-column
  ---
  columns-breakpoints:
    mobile: 2
  phablet: 2
  tablet: 2
  laptop: 3
  desktop: 3
  gap: "var(--kui-space-90, 32px)"
  styles: |
    p + p {
      margin-top: var(--kui-space-40, 8px);
      font-size: clamp(var(--kui-font-size-20, 12px), 4vw, var(--kui-font-size-40, 16px));
    }

    strong {
      font-size: clamp(var(--kui-font-size-30, 14px), 4vw, var(--kui-font-size-50, 18px));
    }

    a {
      text-decoration: none;
      font-size: clamp(var(--kui-font-size-30, 14px), 4vw, var(--kui-font-size-50, 18px));
      font-weight: var(--kui-font-weight-bold, 700);
      color: var(--kui-color-text-primary, #0044F4);
      display: inline-block;
      padding-top: var(--kui-space-70, 20px);
    }
  ---
    ::container
    **Real-Time Insights & Analytics**

    Track API usage, latency, and error rates with built-in analytics that help you understand how your APIs are performing in the wild.

    [Learn more -->](/)
    ::

    ::container
    **Built-In Security & Access Control**

    Manage authentication, authorization, and rate limits with ease — all backed by Kong’s proven API gateway and RBAC capabilities.

    [Learn more -->](/)
    ::

    ::container
    **Auto-Generated & Custom API Docs**

    Automatically generate interactive documentation from your OpenAPI specs and customize them to guide developers through every use case.

    [Learn more -->](/)
    ::
  :::
::

Feature highlights with two columns

Understand What’s Working

View live usage data and trends so you know which APIs are driving value — and where to optimize.

Ready Out of the Box Security

OAuth2, API keys, RBAC — all pre-wired. Focus on building, not bolting on security.

Developers Docs

Self-service, interactive API docs that update automatically with your specs.

Frictionless Onboarding

Get developers up and running in minutes with everything they need.

Build Fast. Collaborate Smarter. Ship with Confidence.

Kong’s developer portal gives your team the tools to design, document, and manage APIs — without the heavy lift.
::page-hero
---
text-align: "center"
title-font-size: "clamp(24px, 3.4vw, 44px)"
title-line-height: "clamp(26px, 3.4vw, 46px)"
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))"
max-width: "1000px"
text-max-width: "780px"
padding: "clamp(20px, 8vw, 60px) clamp(10px, 4vw, 30px)"
image:
  position: "bottom"
styles: |
  padding: var(--kui-space-0, 0) !important;

  .page-hero-textblock {
    align-self: center;
  }
---
#title
Build Fast. Collaborate Smarter. Ship with Confidence.

#description
Kong’s developer portal gives your team the tools to design, document, and manage APIs — without the heavy lift.

#image
  :::multi-column
  ---
  columns-breakpoints:
    mobile: 1
  phablet: 2
  tablet: 2
  laptop: 2
  desktop: 2
  gap: "var(--kui-space-100, 40px)"
  styles: |
    p + p {
      margin-top: var(--kui-space-40, 8px);
      font-size: clamp(var(--kui-font-size-20, 12px), 4vw, var(--kui-font-size-40, 16px));
    }

    strong {
      font-size: clamp(var(--kui-font-size-30, 14px), 4vw, var(--kui-font-size-50, 18px));
    }
  ---
    ::container
    ---
    display: "flex"
    ---
      :::image
      ---
      src: "/images/examples/sections/bullet_1.png"
      width: "56"
      height: "56"
      ---
      :::

      :::container
      **Understand What’s Working**

      View live usage data and trends so you know which APIs are driving value — and where to optimize.
      :::
    ::

    ::container
    ---
    display: "flex"
    ---
      :::image
      ---
      src: "/images/examples/sections/bullet_2.png"
      width: "56"
      height: "56"
      ---
      :::

      :::container
      **Ready Out of the Box Security**

      OAuth2, API keys, RBAC — all pre-wired. Focus on building, not bolting on security.
      :::
    ::

    ::container
    ---
    display: "flex"
    ---
      :::image
      ---
      src: "/images/examples/sections/bullet_3.png"
      width: "56"
      height: "56"
      ---
      :::

      :::container
      **Developers Docs**

      Self-service, interactive API docs that update automatically with your specs.
      :::
    ::

    ::container
    ---
    display: "flex"
    ---
      :::image
      ---
      src: "/images/examples/sections/bullet_4.png"
      width: "56"
      height: "56"
      ---
      :::

      :::container
      **Frictionless Onboarding**

      Get developers up and running in minutes with everything they need.
      :::
    ::
  :::
::

Feature highlights with cards

Centralize your APIs
Bring all your APIs into one portal so developers can find, understand, and use them without switching between tools.
Simplify onboarding
Offer clear documentation, code samples, and guided flows that help developers integrate quickly and reduce support overhead.
Track engagement
Use built-in analytics to see how your APIs are being used and gain insights to improve adoption and performance.

Turn API access into API adoption

Give your developers a central hub to discover, test, and integrate with your APIs—all in one place.
::page-hero
---
text-align: "center"
title-font-size: "clamp(24px, 3.4vw, 48px)"
title-line-height: "clamp(26px, 3.4vw, 50px)"
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))"
max-width: "1200px"
text-max-width: "900px"
padding: "clamp(20px, 8vw, 60px) clamp(10px, 4vw, 30px)"
image:
  position: "bottom"
styles: |
  padding: var(--kui-space-0, 0) !important;

  .page-hero-textblock {
    align-self: center;
  }
---
#title
Turn API access into API adoption

#description
Give your developers a central hub to discover, test, and integrate with your APIs—all in one place.

#image
  :::multi-column
  ---
  columns-breakpoints:
    mobile: 2
    phablet: 2
    tablet: 2
    laptop: 3
    desktop: 3
  gap: "var(--kui-space-100, 40px)"
  ---
    ::card
    ---
    background-color: "var(--kui-color-background-neutral-weakest, #F9FAFB)"
    border: "none"
    ---
    #tagline
      :::image
      ---
      src: "/images/examples/sections/bullet_1.png"
      width: "32"
      height: "32"
      ---
      :::

    #title
    Centralize your APIs

    #default
    Bring all your APIs into one portal so developers can find, understand, and use them without switching between tools.

    #footer
      :::button
      Read more
      :::
    ::

    ::card
    ---
    background-color: "var(--kui-color-background-neutral-weakest, #F9FAFB)"
    border: "none"
    ---
    #tagline
      :::image
      ---
      src: "/images/examples/sections/bullet_2.png"
      width: "32"
      height: "32"
      ---
      :::

    #title
    Simplify onboarding

    #default
    Offer clear documentation, code samples, and guided flows that help developers integrate quickly and reduce support overhead.

    #footer
      :::button
      Read more
      :::
    ::

    ::card
    ---
    background-color: "var(--kui-color-background-neutral-weakest, #F9FAFB)"
    border: "none"
    ---
    #tagline
      :::image
      ---
      src: "/images/examples/sections/bullet_3.png"
      width: "32"
      height: "32"
      ---
      :::

    #title
    Track engagement

    #default
    Use built-in analytics to see how your APIs are being used and gain insights to improve adoption and performance.

    #footer
      :::button
      Read more
      :::
    ::
  :::
::

Feature highlights with cards on background

1
Publish your APIs
Make your APIs discoverable by hosting them in one central developer portal, complete with interactive documentation and code samples.
2
Onboard developers faster
Provide guided workflows, authentication support, and clear usage examples so developers can get started without friction.
3
Drive adoption and growth
Track engagement with real-time analytics and gain insights that help you improve API usage and deliver more business value.

Empower developers to start fast

Give your developers a central hub to discover, test, and integrate with your APIs—all in one place.
::page-hero
---
title-font-size: "clamp(24px, 3.4vw, 48px)"
title-line-height: "clamp(26px, 3.4vw, 50px)"
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))"
max-width: "1200px"
text-max-width: "900px"
padding: "clamp(20px, 8vw, 60px) clamp(10px, 4vw, 30px)"
background-color: "var(--kui-color-background-neutral-weakest, #F9FAFB)"
image:
  position: "bottom"
styles: |
  padding: var(--kui-space-0, 0) !important;

  .page-hero-textblock {
    padding: var(--kui-space-0, 0) !important;
  }
---
#title
Empower developers to start fast

#description
Give your developers a central hub to discover, test, and integrate with your APIs—all in one place.

#image
  :::multi-column
  ---
  columns-breakpoints:
    mobile: 2
    phablet: 2
    tablet: 2
    laptop: 3
    desktop: 3
  gap: "var(--kui-space-100, 40px)"
  styles: |
    .portal-card-tagline {
      font-size: 64px;
      line-height: 68px;
      font-weight: var(--kui-font-weight-medium, 500);
      margin-bottom: var(--kui-space-40, 8px);
    }
  ---
    ::card
    #tagline
    1

    #title
    Publish your APIs

    #default
    Make your APIs discoverable by hosting them in one central developer portal, complete with interactive documentation and code samples.
    ::

    ::card
    #tagline
    2

    #title
    Onboard developers faster

    #default
    Provide guided workflows, authentication support, and clear usage examples so developers can get started without friction.
    ::

    ::card
    #tagline
    3

    #title
    Drive adoption and growth

    #default
    Track engagement with real-time analytics and gain insights that help you improve API usage and deliver more business value.
    ::
  :::
::