# 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. > [!NOTE] This page is internal > It is excluded from the sitemap, marked `noindex,nofollow`, and is not linked > from any navigation. It renders only in the `union` variant and is intended > for preview builds only — it is never merged to production. Reach it by direct > URL only. 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](https://union.ai), 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 | Component | Type | Container? | Typical use | | -------------- | ---------- | ---------- | --------------------------------- | | `note` | Notice | Yes | Informational callouts | | `warning` | Notice | Yes | Cautionary callouts | | `tabs` / `tab` | Layout | Yes | Alternate instructions | | `grid` | Layout | Yes | Card layouts on landing pages | | `badge` | Inline | Yes | Status labels inside tables | | `code` | Code | No | Embed a runnable example file | ### 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 ```text > [!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. ``` > [!NOTE] This is a note > Body of the note. Supports **markdown**, `inline code`, and > [links](https://union.ai). It can span multiple paragraphs. > [!WARNING] This is a warning > Use this for operations that need care — for example, an action that is > **irreversible**. > [!CAUTION] This is a caution > The strongest emphasis level, for destructive or dangerous actions. ### Notice shortcodes ```text {{}} Body of the note. {{}} {{}} Body of the warning. {{}} ``` > **📝 Note** > > If you have [`uv`](https://docs.astral.sh/uv/) installed, run > `uvx flyte --version` to invoke the CLI without a local install. > **⚠️ Warning** > > This operation is **irreversible**. Double-check the target before continuing. --- ## Code ### Fenced code block Standard fenced blocks are rendered with syntax highlighting, a filename-less header, and a copy button. ```python import flyte env = flyte.TaskEnvironment(name="hello_env") @env.task def main(x: int) -> int: return x * 2 ``` ```bash 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. ```text {{}} ``` ```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 ``` *Source: https://github.com/unionai/unionai-examples/blob/main/v2/user-guide/getting-started/hello.py* ### `code` shortcode — fragment with highlight Pulls only the lines between named `docs-fragment` markers, and emphasizes a line range. ```text {{}} ``` ```python 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" ``` *Source: https://github.com/unionai/unionai-examples/blob/main/v2/user-guide/task-configuration/resources/resources.py* --- ## Tabs Use tabs for alternate sets of instructions (for example, programmatic vs. CLI). Fenced code inside a tab must be wrapped in a `{{}}` container. ```text {{}} {{}} {{}} ​```python flyte.init(endpoint="dns:///your-endpoint") ​``` {{}} {{}} {{}} {{}} ​```bash flyte create config --endpoint https://your-endpoint ​``` {{}} {{}} {{}} ``` ### Programmatic ```python import flyte flyte.init(endpoint="dns:///your-endpoint") ``` ### CLI ```bash flyte create config --endpoint https://your-endpoint ``` --- ## Grid and link cards `link-card`s are clickable cards, usually arranged in a `grid`. The `cols` parameter sets the number of columns. ```text {{}} {{}} Get running fast. {{}} {{}} ``` ### [Typography](#typography) Headings, body text, lists, tables. ### [Notices](#notices) Notes, warnings, and cautions. ### [Code](#code) Fenced blocks and the code shortcode. A two-column grid (the default when `cols` is omitted): ### [Tabs](#tabs) Alternate instruction sets. ### [Inline components](#callouts-and-inline-components) Badges, buttons, dropdowns, icons. --- ## Callouts and inline components ### Badges Status labels, most often used inside tables. The positional argument selects a Shoelace variant. ```text {{}}Primary{{}} {{}}Success{{}} {{}}Neutral{{}} {{}}Warning{{}} {{}}Danger{{}} ``` {{< badge "primary" >}}Primary{{< /badge >}} {{< badge "success" >}}Success{{< /badge >}} {{< badge "neutral" >}}Neutral{{< /badge >}} {{< badge "warning" >}}Warning{{< /badge >}} {{< badge "danger" >}}Danger{{< /badge >}} ### Button link An external call-to-action button (opens in a new tab). ```text {{}} ``` {{< button-link text="Get started" variant="primary" target="https://union.ai" >}} {{< button-link text="Learn more" variant="default" target="https://union.ai" >}} ### Dropdown A collapsible `` disclosure. The `icon` is an emoji shortcode name. ```text {{}} {{}} Hidden content, revealed on click. {{}} {{}} ```
Show the full example This content is hidden until the disclosure is expanded. It can hold any markdown, including fenced code: ```python print("revealed") ```
### Icons Any [Shoelace icon](https://shoelace.style/components/icon) by name. ```text {{}} {{}} {{}} ``` [book]   [rocket]   [gear]   [cloud-download]   [terminal] ### Download link A download affordance. The target must live under `/_static/public/` or a Union.ai GitHub repository. ```text {{}} ``` 📥 [hello.py](https://github.com/unionai/unionai-examples/blob/main/v2/user-guide/getting-started/hello.py) - A minimal runnable example --- ## Layout helpers ### Right-aligned block ```text {{}} [Next →](#) {{}} ``` {{< right >}} Back to top → {{< /right >}} ### Multiline block Forces `
`-separated lines — handy inside tight table cells. ```text {{}} Line one Line two {{}} ``` Line one Line two Line three ### 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. ```text {{}} {{}} Union-only content. {{}} {{}} ``` This paragraph appears only in the **union** build — which is what you are viewing now. ### Product-name keys Inline `key` lookups resolve to variant-specific product terminology. - Product name: **Union.ai** - CLI: **union** - Docs home (root): /docs/v2/root/ --- ## Media An audio player (the `src` below is a placeholder, so the transport controls render but no audio loads). ```text {{}} ``` {{< 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. {{< py_class_ref flyte.TaskEnvironment "TaskEnvironment" >}}. --- **Source**: https://github.com/unionai/unionai-docs/blob/main/content/component-gallery-7fa3c1/_index.md **HTML**: https://www.union.ai/docs/v2/union/component-gallery-7fa3c1/