Markdown WC Doc Elements

Pre-built, styled Web Components for common documentation patterns. Drop them into any markdown-wc document without writing CSS.

Installation

npm install @opral/markdown-wc-doc-elements

Or use directly from CDN:

---
imports:
  - https://cdn.jsdelivr.net/npm/@opral/markdown-wc-doc-elements/dist/doc-card.js
  - https://cdn.jsdelivr.net/npm/@opral/markdown-wc-doc-elements/dist/doc-columns.js
---

<doc-columns cols="2">
  <doc-card title="Get started" icon="lucide:rocket">
    Set up your project with our quickstart guide.
  </doc-card>
  <doc-card title="API reference" icon="lucide:code">
    Explore endpoints, parameters, and examples.
  </doc-card>
</doc-columns>

Elements

doc-columns

Show elements side by side in a responsive grid.

The doc-columns component lets you group multiple doc-card components together. It's most often used to put cards in a grid by specifying the number of columns. Columns are responsive and automatically adjust for smaller screens.

Example

<doc-columns cols="2">
  <doc-card title="Get started" icon="lucide:rocket">
    Set up your project with our quickstart guide.
  </doc-card>
  <doc-card title="API reference" icon="lucide:code">
    Explore endpoints, parameters, and examples.
  </doc-card>
</doc-columns>

Set up your project with our quickstart guide.

Explore endpoints, parameters, and examples.

Three columns

<doc-columns cols="3">
  <doc-card title="Guides" icon="lucide:book-open">
    Step-by-step tutorials.
  </doc-card>
  <doc-card title="Examples" icon="lucide:file-code">
    Code samples and demos.
  </doc-card>
  <doc-card title="FAQ" icon="lucide:help-circle">
    Common questions answered.
  </doc-card>
</doc-columns>

Step-by-step tutorials.

Code samples and demos.

Common questions answered.

Attributes

Attribute	Type	Default	Description
`cols`	number	2	The number of columns per row. Accepts values from 1 to 4.

doc-card

Highlight main points or links with customizable layouts and icons.

Basic card

<doc-card title="Card title" icon="lucide:rocket" href="/getting-started">
  This is how you use a card with an icon and a link.
</doc-card>

This is how you use a card with an icon and a link.

Horizontal layout

<doc-card title="Horizontal card" icon="lucide:layout-list" horizontal>
  This is an example of a horizontal card.
</doc-card>

This is an example of a horizontal card.

Image card

<doc-card title="Image card" img="https://mintlify-assets.b-cdn.net/yosemite.jpg">
  This is an example of a card with an image.
</doc-card>

This is an example of a card with an image.

Link card with custom CTA

<doc-card title="Link card" icon="lucide:link" href="https://example.com" arrow cta="Learn more">
  Clicking this card opens an external link.
</doc-card>

Clicking this card opens an external link.

Attributes

Attribute	Type	Description
`title`	string	Required. The title displayed on the card.
`icon`	string	Iconify icon name (e.g., `lucide:rocket`, `mdi:home`).
`href`	string	URL to navigate when the card is clicked.
`horizontal`	boolean	Display the card in a compact horizontal layout.
`img`	string	URL to an image displayed at the top of the card.
`cta`	string	Custom text for the action button.
`arrow`	boolean	Show or hide the link arrow icon. Defaults to true for external links.
`color`	string	Icon color as a hex code (e.g., `#FF6B6B`).

Media

doc-video

The <doc-video> element is used to display a video with controls.

Attributes

src: The source URL of the video.

Example

<doc-video src="https://youtu.be/vJ3jGgCrz2I"></doc-video>

<doc-video src="https://www.loom.com/share/cc29f05291d2414c9f134d68bfe7b8f1"></doc-video>

Usage with markdown-wc

Import individual elements as needed:

---
imports:
  - https://cdn.jsdelivr.net/npm/@opral/markdown-wc-doc-elements/dist/doc-card.js
  - https://cdn.jsdelivr.net/npm/@opral/markdown-wc-doc-elements/dist/doc-columns.js
  - https://cdn.jsdelivr.net/npm/@opral/markdown-wc-doc-elements/dist/doc-video.js
---

# My Documentation

<doc-columns cols="2">
  <doc-card title="Quick start" icon="lucide:rocket" href="/docs/intro">
    Get up and running in minutes.
  </doc-card>
  <doc-card title="Examples" icon="lucide:code" href="/docs/examples">
    Browse code samples.
  </doc-card>
</doc-columns>

<doc-video src="https://youtu.be/example"></doc-video>

License

MIT