---
title: "Component Showcase"
description: 'Sample trail that walks through every common Starlight and framework component, used to verify correct rendering in the presentation deck and the trail timeline view.'
date: 2026-07-20
stateBadge: "feature"
scfTrail:
  tags: ["wip"]
  maintainers:
    - user: "tobias.mueller"
  steps:
    - id: all-components
      style: compass
      assetId: data-and-ai/assetcontainer/tm/component-showcase
      title: All Components
      trailContext: A single step embedding an asset that exercises every common component, to verify deck and timeline rendering.
    - id: live-asset-card
      style: t-bar
      title: Explanation Beside a Live Asset Card
      trailContext: A split step with explanatory text on the left and a live asset card on the right. Because it is the real component, it re-colours with the deck theme and always shows current data, so no dark/light screenshots to maintain.
      splitRatio: 55
      left:
        text: "Assets are the equipment in the backpack: blueprints, guides, runbooks and more. Each is shown as a card with its contributor, category, tags, license model, and whether STACKIT recommends it. The card on the right is the real component."
      right:
        assetId: migration/assetcontainer/stackit/landing-zone-foundation-opentofu
    - id: live-trail-card
      style: chairlift
      title: Explanation Beside a Live Trail Card
      trailContext: The same split with a live trail card on the right, rendered by the trailId column type. It shows the contributor, framework, recommendation, and the first steps of the route, themed live.
      splitRatio: 55
      left:
        text: "Trails chain assets and pages into a guided journey up the mountain. A trail card previews where a route leads before you open it. This is the real trail card component, so it themes with the deck."
      right:
        trailId: advisory/trails/stackit/getting-started
    - id: page-sections
      style: gondola
      title: Multiple Sections Stacked in One Column (cards shown)
      trailContext: A column can stack several page sections, not just one. Here the fit criteria for five 6R strategies, three on the left and two on the right, each opting in to its pointer card with cards true, to verify multiple sections per column with cards in the timeline and the deck.
      splitRatio: 55
      left:
        - pageId: migration/design-and-mobilize/design/relocate/#when-relocate-is-a-good-fit
          cards: true
        - pageId: migration/design-and-mobilize/design/rehost/#when-rehost-is-a-good-fit
          cards: true
        - pageId: migration/design-and-mobilize/design/replatform/#when-replatform-is-a-good-fit
          cards: true
      right:
        - pageId: migration/design-and-mobilize/design/refactor/#when-refactor-is-a-good-fit
          cards: true
        - pageId: migration/design-and-mobilize/design/repurchase/#when-repurchase-is-a-good-fit
          cards: true
    - id: asset-sections
      style: chart
      title: Asset Sections Condensed (default, no cards flag)
      trailContext: The default for a section column, no flag needed. On the left three sections of one asset, the Landing Zone Accelerator, condensed under a small source breadcrumb instead of repeating its full card. On the right one section each from two different assets, each carrying its own source breadcrumb.
      splitRatio: 55
      left:
        - assetId: migration/assetcontainer/stackit/landing-zone-foundation-opentofu#overview
        - assetId: migration/assetcontainer/stackit/landing-zone-foundation-opentofu#how-the-repository-works
        - assetId: migration/assetcontainer/stackit/landing-zone-foundation-opentofu#deployment-flavours-and-what-they-enable
      right:
        - assetId: migration/assetcontainer/stackit/runbook-rehost-spring-boot#use-case
        - assetId: migration/assetcontainer/stackit/optimize-rehosted-spring-boot-observability-rightsizing#continue-the-reference-implementation
  presentations:
    - id: design-components
      label: Design components
      description: "The live framework components on their own: a full component sweep, plus the asset and trail cards rendered beside explanatory text."
      steps:
        - all-components
        - live-asset-card
        - live-trail-card
    - id: content-linked
      label: Content linked
      description: "Only the steps that pull in linked content: stacked page sections on one side, condensed asset sections on the other."
      steps:
        - page-sections
        - asset-sections
source_url: "https://framework.stackit.cloud/data-and-ai/trailpool/tm/component-showcase/"
source_file: "docs/data-and-ai/trailpool/tm/component-showcase.mdx"
---

## Steps

### 1. All Components

Stage: `compass`

A single step embedding an asset that exercises every common component, to verify deck and timeline rendering.

Asset: [/data-and-ai/assetcontainer/tm/component-showcase/](/data-and-ai/assetcontainer/tm/component-showcase/) — source: [/raw/data-and-ai/assetcontainer/tm/component-showcase.md](/raw/data-and-ai/assetcontainer/tm/component-showcase.md)

### 2. Explanation Beside a Live Asset Card

Stage: `t-bar`

A split step with explanatory text on the left and a live asset card on the right. Because it is the real component, it re-colours with the deck theme and always shows current data, so no dark/light screenshots to maintain.

### 3. Explanation Beside a Live Trail Card

Stage: `chairlift`

The same split with a live trail card on the right, rendered by the trailId column type. It shows the contributor, framework, recommendation, and the first steps of the route, themed live.

### 4. Multiple Sections Stacked in One Column (cards shown)

Stage: `gondola`

A column can stack several page sections, not just one. Here the fit criteria for five 6R strategies, three on the left and two on the right, each opting in to its pointer card with cards true, to verify multiple sections per column with cards in the timeline and the deck.

### 5. Asset Sections Condensed (default, no cards flag)

Stage: `chart`

The default for a section column, no flag needed. On the left three sections of one asset, the Landing Zone Accelerator, condensed under a small source breadcrumb instead of repeating its full card. On the right one section each from two different assets, each carrying its own source breadcrumb.