Component Usage Guide

This guide is designed specifically to understand how to incorporate and use new components within articles effectively. This resource is not publicly available and can only be accessed through direct links shared within our editorial team.

Important Notes on Using MDX

To use Astro components like Card and Image in your articles, you will need to ensure a couple of things:

File Extension: Change the file extension from .md to .mdx. This change allows the Astro framework to process the file as an MDX document, enabling the embedding of interactive components directly within the content.
Import Components: At the beginning of your .mdx file, import each component you plan to use. Here is an example of how to import components:

import Card from 'src/ink/core/Card.astro';
import Image from 'src/ink/core/Image.astro';

Components usage

Card

The Card component displays content in a card format, suitable for highlights, features, or related topics.

Example Title

Example description of the feature.

<Card
	title="Example Title"
	description="Example description of the feature."
	imgSrc="/docs/img/octopus-deploy-logo.png"
	imgAlt="Example Alt Text"
	link="/docs/deployments/kubernetes"
/>

Watch Our Tutorial

Watch Video

<Card
	imgAlt="Example Alt Text"
	imgSrc="/docs/img/octopus-deploy-logo.png"
	link="https://www.youtube.com/watch?v=example"
	title="Watch Our Tutorial"
	variant="related-topics"
/>

Watch Our Tutorial

Learn More

<Card
	imgAlt="Example Alt Text"
	imgSrc="/docs/img/octopus-deploy-logo.png"
	link="/docs/deployments/kubernetes"
	title="Watch Our Tutorial"
	variant="related-topics"
/>

Card padded

Padded Example Title

Example description with added padding for emphasis.

<Card
	description="Example description with added padding for emphasis."
	imgAlt="Example Alt Text"
	imgSrc="/docs/img/octopus-deploy-logo.png"
	link="/docs/deployments/kubernetes"
	title="Padded Example Title"
	variant="padded"
/>

Image

<Image
	src="/docs/img/octopus.svg"
	alt="Example Alt Text"
/>

Image with caption

<Image
	src="/docs/img/octopus.svg"
	alt="Example Alt Text"
	caption="Example caption"
/>

Layout

Grid

2 columns

Watch Our Tutorial

Watch Video

Watch Our Tutorial

Watch Video

<div class="docs-home simple-grid">
	<Card
		imgAlt="Example Alt Text"
		imgSrc="/docs/img/octopus-deploy-logo.png"
		link="https://www.youtube.com/watch?v=example"
		title="Watch Our Tutorial"
		variant="related-topics"
	/>
	<Card
		imgAlt="Example Alt Text"
		imgSrc="/docs/img/octopus-deploy-logo.png"
		link="https://www.youtube.com/watch?v=example"
		title="Watch Our Tutorial"
		variant="related-topics"
	/>
</div>

3 columns

Deployments

Learn more about deploying

Deployments

Learn more about deploying

Deployments

Learn more about deploying

<div class="docs-home simple-grid-3">
	<Card
		description="Learn more about deploying"
		imgSrc="/docs/img/octopus-deploy-logo.png"
		imgAlt="Example Alt Text"
		link="/docs/deployments/kubernetes"
		title="Deployments"
	/>
	<Card ... />
	<Card ... />
</div>