My Awesome Vendor

This page is the canonical sample for vendor pages — every element shown here is live and editable.

What Is a Vendor Page?

A vendor page is a branded content hub: a multi-page site-within-a-site that lives at /v/uncloud. It supports rich Markdown, embedded content cards and grids, per-vendor CSS theming, and sub-pages reachable at /v/uncloud/<sub-page>.

The page you are reading right now is itself a vendor page — its frontmatter, style, and body are the sample.

Frontmatter Fields

The index.md page carries the vendor metadata:

Custom Styling

The style frontmatter field accepts raw CSS. The platform wraps it in .vendor-content { … }, so your rules are scoped to this vendor's pages only. CSS nesting is supported — the style for this page, for example, sets a gradient on headings and tints the content panel:

.content-box-container {
  background: linear-gradient(160deg, #f8f7ff 0%, #eef2ff 100%) !important;
}

h1,
h2,
h3 {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Note: The !important flag is required to override the default styles.

Markdown Elements

Standard Markdown is fully supported. Here are the most useful elements:

Bold, italic, strikethrough, and inline code.

Unordered list:

• First item
• Second item with emphasis
• Third item with a code snippet

Ordered list:

1. Install the tool
2. Configure the endpoint
3. Send your first data point

A blockquote stands out visually and is great for callouts:

Note: You can style blockquotes in your style field to match your brand. The indigo left border and tinted background on this page come from the sample style definition above.

Fenced code block with syntax highlighting:

# Example shell session
curl -X POST https://api.example.com/data \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"value": 42}'

A table:

Embedding a Single Content Card

Use the ::card MDC component to embed a single tutorial, course, or challenge inline. The :content prop takes a dotted key that matches an entry in the frontmatter tutorials / courses map:

::card
---
:content: tutorials.docker-container-management-commands
---
::

Live example:

::card

:content: tutorials.docker-container-management-commands

::

Card elements are aligned to the left, so most of the time you will want to add enough text in the following paragraph(s) to make the card look balanced and the next section start on the new logical row.

Dolores ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Embedding a Content Grid

Use ::grid to display multiple pieces of content side-by-side. Pass an array of objects via :items, each with a content key pointing to a frontmatter entry:

::grid
---
items:
  - content: tutorials.docker-container-management-commands
  - content: courses.containerd-cli
---
::

Live example:

::grid

items:

• content: tutorials.docker-container-management-commands
• content: courses.containerd-cli

::

Sub-Pages

Any .md file placed alongside index.md becomes a sub-page accessible at /v/uncloud/<filename>. Link to sub-pages with standard Markdown links:

• Elements Reference → — a deeper look at Markdown and MDC components
• Styling Guide → — advanced CSS customization patterns