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 the installation path, creating unnecessary friction and slowing down activation.
A multi‑step getting started component on the product page solves this by presenting a guided, sequential path paired with the exact code snippet needed at each step. This helps users quickly build confidence, reduces cognitive load, and lets them move from interest to activation in a clear, structured, and efficient way.
Solution
AEM Vertical Accordion– with code snippet option (FW)
Description: The component is an extension to the Vertical Accordion asset for AEM for ibm.com. It includes the option to show a multi-line code snippet with optional contained tab navigation for each accordion item, as an alternative to the image component.
Overview
A multi‑step getting started component presents a guided sequence of onboarding steps directly on the product page, each paired with its corresponding code snippet to help users progress quickly and confidently. By structuring the early setup flow into clear, actionable stages, this component reduces friction, prevents guesswork, and enables pro-code users to move from interest to successful first use with clarity and efficiency.
When to use
- When the target audience consists of mainly developers or pro-code users
- When the product or feature has a simple, programmatic getting started path, that does not exceed six steps.
When not to use
- When the target audience are mainly low-code, business personas, who would not normally work within an IDE or CLI
- When the programmatic getting started path is more complex, use a link to the docs instead
Behaviors
The code snippet used in the proposed extension to the leadspace component is the multi-line code snippet component, with the "show more" button disabled: https://carbondesignsystem.com/components/code-snippet/usage/#multi-line
Optionally, it is combined with the contained tab component, to showcase code for e.g. different coding languages: https://carbondesignsystem.com/components/tabs/usage/
Resources
Figma design specs
Content guidance
| Element |
Status |
Character count |
Format |
| Asset: Code snippet |
Optional |
N/A |
N7A |
Other elements stay as specified in the exisisting Vertical accordion component.
IBM Organization or Company you are part of
IBM Software, Automation and AI
Code of Conduct
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 the installation path, creating unnecessary friction and slowing down activation.
A multi‑step getting started component on the product page solves this by presenting a guided, sequential path paired with the exact code snippet needed at each step. This helps users quickly build confidence, reduces cognitive load, and lets them move from interest to activation in a clear, structured, and efficient way.
Solution
AEM Vertical Accordion– with code snippet option (FW)
Description: The component is an extension to the Vertical Accordion asset for AEM for ibm.com. It includes the option to show a multi-line code snippet with optional contained tab navigation for each accordion item, as an alternative to the image component.
Overview
A multi‑step getting started component presents a guided sequence of onboarding steps directly on the product page, each paired with its corresponding code snippet to help users progress quickly and confidently. By structuring the early setup flow into clear, actionable stages, this component reduces friction, prevents guesswork, and enables pro-code users to move from interest to successful first use with clarity and efficiency.
When to use
When not to use
Behaviors
The code snippet used in the proposed extension to the leadspace component is the multi-line code snippet component, with the "show more" button disabled: https://carbondesignsystem.com/components/code-snippet/usage/#multi-line
Optionally, it is combined with the contained tab component, to showcase code for e.g. different coding languages: https://carbondesignsystem.com/components/tabs/usage/
Resources
Figma design specs
Content guidance
Other elements stay as specified in the exisisting Vertical accordion component.
IBM Organization or Company you are part of
IBM Software, Automation and AI
Code of Conduct