Docs
Free trial

Component Usage Guide

Detailed guide on the new interactive components for documentation articles

Component Usage Guide

This guide is designed specifically to understand how to incorporate and utilize 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 Separator in your articles, you will need to ensure a couple of things:

  1. 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.

  2. 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/components/Card.astro';
import Separator from 'src/components/Separator.astro';

Components usage

Card

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

<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"
/>

<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="/docs/deployments/kubernetes"
	title="Watch Our Tutorial"
	variant="related-topics"
/>

Card padded

<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"
/>

IconTile

The IconTile component is used for creating clickable tiles with an icon, a title, and a description.

  1. iconAlt: Alternative text for the icon (not required with font awesome icon)

  2. title: Keep it short for this component

  3. description: Keep it short for this component

Example Alt Text

Kubernetes Deployment

Learn more about deploying applications with Kubernetes using Octopus Deploy.

<IconTile
	description="Learn more about deploying applications with Kubernetes using Octopus Deploy."
	iconSrc="/docs/img/octopus.svg"
	iconAlt="Example Alt Text"
	link="/docs/deployments/kubernetes"
	title="Kubernetes Deployment"
/>
Example Alt Text

Kubernetes Deployment

<IconTile
	iconSrc="/docs/img/octopus.svg"
	iconAlt="Example Alt Text"
	link="/docs/deployments/kubernetes"
	title="Kubernetes Deployment"
/>

Image

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

Image with caption

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

The Link component is designed to provide a standardized way to display links with icons

  1. iconAlt: Alternative text for the icon (not required with font awesome icon)

  2. noFollow: Optional; Accepts true/false values. If true, adds rel="nofollow" to the link

  3. newTab: Optional;; Accepts true/false values. If true, the link opens in a new tab target="_blank".

Example Icon Description
Link with Icon Example 
<Link
	link="/docs/deployments/kubernetes"
	text="Link with Icon Example"
	icon="/docs/img/icon-example.svg"
	iconAlt="Example Icon Description"
/>

Separator

<Separator />

Layout

Grid

2 columns

<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

Example Alt Text

Deployments

Learn more about deploying
Example Alt Text

Deployments

Learn more about deploying
Example Alt Text

Deployments

Learn more about deploying

<div class="docs-home simple-grid-3">
	<IconTile
		description="Learn more about deploying applications with Kubernetes using Octopus Deploy."
		iconSrc="/docs/img/octopus.svg"
		iconAlt="Example Alt Text"
		link="/docs/deployments/kubernetes"
		title="Kubernetes Deployment"
	/>
	<IconTile
		description="Learn more about deploying applications with Kubernetes using Octopus Deploy."
		iconSrc="/docs/img/octopus.svg"
		iconAlt="Example Alt Text"
		link="/docs/deployments/kubernetes"
		title="Kubernetes Deployment"
	/>
	<IconTile
		description="Learn more about deploying applications with Kubernetes using Octopus Deploy."
		iconSrc="/docs/img/octopus.svg"
		iconAlt="Example Alt Text"
		link="/docs/deployments/kubernetes"
		title="Kubernetes Deployment"
	/>
</div>

Help us continuously improve

Please let us know if you have any feedback about this page.

Send feedback

Page updated on Tuesday, May 21, 2024

Edit on GitHub