My Awesome Vendor - Integrations

Tutorials and courses on the platform can be embedded directly into vendor pages as content cards or grids.

Declaring Associated Content

Before embedding content, declare it in the index.md frontmatter under tutorials, courses, or challenges. Each key is the content slug, and the value is an options object (currently always empty {}):

tutorials:
  docker-container-management-commands: {}
  kubernetes-networking-crash-course: {}

courses:
  containerd-cli: {}
  kubernetes-for-developers: {}

Single Card

The ::card MDC component renders one piece of content as a clickable card:

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

The :content prop is a dotted path: <type>.<slug>, where <type> is one of tutorials, courses, or challenges.

The card displays the title, description, cover image, tags, and the current user's progress.

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.

Grid of Cards

The ::grid component renders multiple cards side by side:

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

The items prop is a JSON array. Each object may have:

Key	Type	Description
`content`	string	Dotted path to a tutorial, course, or skill path declared in frontmatter
`challenge`	string	Dotted path to a challenge (e.g. `challenges.my-challenge`)

Cards within a row are equal height. Rows wrap automatically at narrower viewports.

Linking to Content Directly

You can also link to content using plain Markdown links instead of embedding cards:

- [Docker Container Management Commands](/tutorials/docker-container-management-commands)
- [Containerd CLI Course](/courses/containerd-cli)

Use cards and grids when you want a rich visual embed; use plain links for inline references within prose.

← Back to Overview — return to the vendor index
Elements Reference → — full Markdown and MDC reference
Styling Guide → — CSS customization patterns