Component gallery

An internal, un-indexed reference of every typographic element and content component available on the Union.ai docs site, rendered in the live theme. It exists so design can review the full component set in one place.

For each component the raw markup is shown first, followed by its live rendering.

Typography

Headings

The page title above is styled as an h1. Headings h2–h6 render as follows:

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Hover any h2–h6 to reveal its # anchor affordance.

Body text and inline elements

A standard paragraph mixing bold text, italic text, bold italic, inline code, an inline link, and strikethrough. Sentences wrap and flow at the site’s default measure and line height. Inline API identifiers such as flyte.init() and flyte.io.File are auto-linked at runtime by the inline-code linker.

A hard line break can be forced with a trailing backslash or two spaces.
This sentence sits on the line directly below the previous one.

Unordered list

• First item
• Second item, with a longer line of text so you can see how list items wrap onto a second line and how the hanging indent behaves
  • Nested item one
  • Nested item two
    • Third-level item
• Third item

Ordered list

1. Install the CLI
2. Authenticate against your endpoint
3. Submit your first run
   1. Define a TaskEnvironment
   2. Decorate a task with @env.task
   3. Call flyte.run(...)

Blockquote

This is a plain blockquote. Use it for pulled-out asides or quoted material. It can span multiple lines and continues with the same left border and padding treatment throughout.

Table

Horizontal rule

Content above the rule.

Content below the rule.

Notices

Two mechanisms produce the same notice component: the markdown-native GitHub alert blockquote (preferred house style) and the note / warning shortcodes.

Native alert blockquotes

> [!NOTE] Optional title
> Body of the note. Supports **markdown** and multiple lines.

> [!WARNING] Optional title
> Body of the warning.

> [!CAUTION] Optional title
> Body of the caution.

Notice shortcodes

{{< note "Optional title" >}}
Body of the note.
{{< /note >}}

{{< warning "Optional title" >}}
Body of the warning.
{{< /warning >}}

Code

Fenced code block

Standard fenced blocks are rendered with syntax highlighting, a filename-less header, and a copy button.

import flyte

env = flyte.TaskEnvironment(name="hello_env")

@env.task
def main(x: int) -> int:
    return x * 2

uv run flyte run hello.py main --x 10

code shortcode — whole file

Embeds a runnable example straight from the unionai-examples repo, with a filename header, GitHub source link, and copy buttons.

{{< code file="/unionai-examples/v2/user-guide/getting-started/hello.py" lang="python" >}}

# hello.py

import flyte

# The `hello_env` TaskEnvironment is assigned to the variable `env`.
# It is then used in the `@env.task` decorator to define tasks.
# The environment groups configuration for all tasks defined within it.
env = flyte.TaskEnvironment(name="hello_env")

# We use the `@env.task` decorator to define a task called `fn`.
@env.task
def fn(x: int) -> int: # Type annotations are required
    slope, intercept = 2, 5
    return slope * x + intercept

# We also use the `@env.task` decorator to define another task called `main`.
# This is the entrypoint task of the workflow.
# It calls the `fn` task defined above multiple times using `flyte.map`.
@env.task
def main(x_list: list[int] = list(range(10))) -> float:
    y_list = list(flyte.map(fn, x_list)) # flyte.map is like Python map, but runs in parallel.
    y_mean = sum(y_list) / len(y_list)
    return y_mean

code shortcode — fragment with highlight

Pulls only the lines between named docs-fragment markers, and emphasizes a line range.

{{< code file="/unionai-examples/v2/user-guide/task-configuration/resources/resources.py" lang="python" fragment="task-env" highlight="2-3" >}}

import flyte

# Define a TaskEnvironment for ML training tasks
env = flyte.TaskEnvironment(
    name="ml-training",
    resources=flyte.Resources(
        cpu=("2", "4"),        # Request 2 cores, allow up to 4 cores for scaling
        memory=("2Gi", "12Gi"), # Request 2 GiB, allow up to 12 GiB for large datasets
        disk="50Gi",           # 50 GiB ephemeral storage for checkpoints
        shm="8Gi"              # 8 GiB shared memory for efficient data loading
    )
)

# Use the environment for tasks
@env.task
async def train_model(dataset_path: str) -> str:
    # This task will run with flexible resource allocation
    return "model trained"

Tabs

Use tabs for alternate sets of instructions (for example, programmatic vs. CLI). Fenced code inside a tab must be wrapped in a {{< markdown >}} container.

{{< tabs "gallery-demo" >}}
{{< tab "Programmatic" >}}
{{< markdown >}}
​```python
flyte.init(endpoint="dns:///your-endpoint")
​```
{{< /markdown >}}
{{< /tab >}}
{{< tab "CLI" >}}
{{< markdown >}}
​```bash
flyte create config --endpoint https://your-endpoint
​```
{{< /markdown >}}
{{< /tab >}}
{{< /tabs >}}

import flyte

flyte.init(endpoint="dns:///your-endpoint")

flyte create config --endpoint https://your-endpoint

Grid and link cards

link-cards are clickable cards, usually arranged in a grid. The cols parameter sets the number of columns.

{{< grid cols="3" >}}
{{< link-card target="#" icon="rocket" title="Quickstart" >}}
Get running fast.
{{< /link-card >}}
{{< /grid >}}

A two-column grid (the default when cols is omitted):

Callouts and inline components

Badges

Status labels, most often used inside tables. The positional argument selects a Shoelace variant.

{{< badge "primary" >}}Primary{{< /badge >}}
{{< badge "success" >}}Success{{< /badge >}}
{{< badge "neutral" >}}Neutral{{< /badge >}}
{{< badge "warning" >}}Warning{{< /badge >}}
{{< badge "danger" >}}Danger{{< /badge >}}

Primary Success Neutral Warning Danger

Button link

An external call-to-action button (opens in a new tab).

{{< button-link text="Get started" variant="primary" target="https://union.ai" >}}

Dropdown

A collapsible <sl-details> disclosure. The icon is an emoji shortcode name.

{{< dropdown title="Show the full example" icon="bento" >}}
{{< markdown >}}
Hidden content, revealed on click.
{{< /markdown >}}
{{< /dropdown >}}

print("revealed")

Icons

Any Shoelace icon by name.

{{< icon "book" >}} {{< icon "rocket" >}} {{< icon "gear" >}}

Download link

A download affordance. The target must live under /_static/public/ or a Union.ai GitHub repository.

{{< download "https://github.com/unionai/unionai-examples/blob/main/v2/user-guide/getting-started/hello.py" "hello.py" "A minimal runnable example" >}}

Layout helpers

Right-aligned block

{{< right >}}
[Next →](#)
{{< /right >}}

Multiline block

Forces <br>-separated lines — handy inside tight table cells.

{{< multiline >}}
Line one
Line two
{{< /multiline >}}

Variant-conditional content

The variant shortcode shows its body only in the listed variants. This page is built as union, so the union block renders and a flyte-only block would be omitted.

{{< variant union >}}
{{< markdown >}}
Union-only content.
{{< /markdown >}}
{{< /variant >}}

Product-name keys

Inline key lookups resolve to variant-specific product terminology.

• Product name: Union.ai
• CLI: union
• Docs home (root): https://www.union.ai/docs/v2

Media

An audio player (the src below is a placeholder, so the transport controls render but no audio loads).

{{< audio "/_static/public/example.mp3" >}}

Not rendered here

A few components are structural or side-effecting and are intentionally not rendered on this page:

• redirect — performs a client-side redirect, so rendering it would navigate away from this page.
• llm-readable-list / llm-bundle-note — depend on section-bundle frontmatter (llm_readable_bundle: true) and are only meaningful on real section index pages.
• py_class_ref / py_func_ref — render an identifier as inline code, e.g. TaskEnvironment (flyte.TaskEnvironment).