---
title: "Component Showcase"
description: 'Sample asset that exercises every common Starlight and framework component, used to verify correct rendering in the presentation deck and the trail timeline view.'
scfAsset:
  maintainers:
    - user: "tobias.mueller"
  managed: false
  category: "generic"
  external: false
  tags: ["wip"]
source_url: "https://framework.stackit.cloud/data-and-ai/assetcontainer/tm/component-showcase/"
source_file: "docs/data-and-ai/assetcontainer/tm/component-showcase.mdx"
---

## Asides

<Aside type="note">A note aside with some **bold** and `inline code`.</Aside>
<Aside type="tip" title="Pro tip">A tip aside with a custom title.</Aside>
<Aside type="caution">A caution aside.</Aside>
<Aside type="danger">A danger aside.</Aside>

## Card Grid

<CardGrid>
  <Card title="Card one">Body text of the first card, long enough to wrap onto a second line.</Card>
  <Card title="Card two">Body text of the second card.</Card>
</CardGrid>

## Steps

<Steps>

1. First step of the sequence.
2. Second step with `code`.
3. Third and final step.

</Steps>

## Tabs

<Tabs>
  <TabItem label="First">Content of the first tab.</TabItem>
  <TabItem label="Second">Content of the second tab.</TabItem>
</Tabs>

## Link card and button

The card reads its kind from the link target, so the same component covers a page
on this site, a STACKIT product, the documentation, a repository and a third-party
source. Only the last one carries the "leads off the trail" note.

<LinkCard title="A link card" description="With a description line." href="/" />

<LinkCard
  title="CAF Landing Zone Foundation"
  description="A managed landing zone, bookable through the STACKIT Marketplace."
  href="https://portal.stackit.cloud/marketplace/products/caf-landing-zone-fou-608afd7e"
/>

<LinkCard
  title="STACKIT Kubernetes Engine"
  description="Product documentation for the managed Kubernetes offering."
  href="https://docs.stackit.cloud/products/runtime/kubernetes-engine/"
/>

<LinkCard
  title="A third-party source"
  description="An external site that STACKIT does not vet."
  href="https://www.google.com/"
/>

<LinkButton href="/">A link button</LinkButton>

## Inline links

A reference that sits inside a sentence uses the chip instead of the card, so the
line keeps reading. It marks the same five kinds with the same colours, and the
label says where you land rather than repeating the URL.

- **Regions**: Region strategy determines data locality, latency profile and
  resilience boundaries for workloads and shared services.
  <LinkChip href="https://docs.stackit.cloud/platform/regions/">Documentation</LinkChip>
- **Terraform Provider**: Use the official provider for declarative infrastructure
  provisioning and lifecycle control.
  <LinkChip href="https://registry.terraform.io/providers/stackitcloud/stackit/latest/docs">Provider registry</LinkChip>
- **Landing zone service**: A managed landing zone can be booked instead of built.
  <LinkChip href="https://portal.stackit.cloud/marketplace/products/caf-landing-zone-fou-608afd7e">Marketplace</LinkChip>
- **Related guidance**: The migration framework covers the same ground for existing
  workloads. <LinkChip href="/migration/">Migration Framework</LinkChip>
- **Outside sources** keep the amber, dashed treatment of the card, so leaving the
  framework is visible mid-sentence too.
  <LinkChip href="https://www.google.com/">Research library</LinkChip>

Several chips in one sentence stay legible because each one is labelled by its
destination: the SDKs exist for
<LinkChip href="https://github.com/stackitcloud/stackit-sdk-go">Go</LinkChip>,
<LinkChip href="https://github.com/stackitcloud/stackit-sdk-python">Python</LinkChip> and
<LinkChip href="https://github.com/stackitcloud/stackit-sdk-java">Java</LinkChip>.

Inline badge: <Badge text="New" variant="tip" />

## Code block

```bash
# a shell snippet with syntax highlighting
export FOO=bar
echo "hello $FOO"
```

## Table

| Layer   | Component                | Sovereign option        |
| ------- | ------------------------ | ----------------------- |
| Data    | S3-compatible storage    | STACKIT Object Storage  |
| Compute | Managed Kubernetes       | STACKIT SKE             |
| Metadata| Managed PostgreSQL       | STACKIT PostgreSQL      |

## Lists and quote

- Unordered item one
- Unordered item two

1. Ordered item one
2. Ordered item two

> A blockquote to check quote styling in the deck.