Skip to content

Code snippet extension to Leadspace with foreground asset (LS) component #12424

Description

@ldohle

Contribution type

Components

Contribution type (other)

No response

Intent

Developers, who are becoming a new strategic target audience for many of our products, expect to try, install, or prototype with a tool instantly rather than navigate long sign‑up flows or UI‑centric onboarding paths. Many of our products are offering or working on offering this fast, frictionless pathway to get started for developers.

However, our existing product pages are primarily optimized for the traditional journey where users must first register or engage with a UI-heavy workflow.

This mismatch forces technically oriented users to dig through documentation to find a reliable installation snippet, creating unnecessary friction and slowing down activation.

Adding a code snippet directly to the leadspace solves this by giving users—especially developers—an immediate entry point within seconds.

Solution

AEM Leadspace Foreground Asset – with code snippet option (LS)

Description: The component is an extension to the Leadspace Foreground (LS) asset for AEM for ibm.com. It includes the option to show a single-line code snippet instead of a product rating.

Image

Overview

A leadspace with a code snippet extension is positioned at the top of a product page and enhances the existing leadspace design by offering users a practical, action‑oriented starting point. In addition to orienting the user and quickly communicating the purpose of the page, this extension provides an immediate way to install or start using the software through a prominently displayed code snippet. Its primary purpose is to streamline onboarding by giving users clear context and a quick, accessible technical entry point directly from the page header.

When to use

  • For product or feature pages
  • When the target audience consists of mainly developers or pro-code users

When not to use

  • When the target audience are mainly low-code, business personas, who would not normally work within an IDE or CLI

Behaviors

The code snippet used in the proposed extension to the leadspace component is the single-line code snippet component: https://carbondesignsystem.com/components/code-snippet/usage/#single-line

Resources

Figma design specs

Content guidance

Element Status Character count Format
Code snippet Optional XXS 40/55 Code

Other elements stay as specified in the exisisting Leadspace with foreground asset component.

IBM Organization or Company you are part of

IBM Software, AI & Automation

Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    contributionIssues to track contributions from outside contributors

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    Status
    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions