Components

Asides

Each aside type uses the ::: fence syntax with its default title.

Note

This is a note aside. It draws attention to supplementary information the reader should be aware of.

Tip

This is a tip aside. It highlights a best practice or useful shortcut.

Caution

This is a caution aside. It warns about a potential pitfall or non-obvious behavior.

Danger

This is a danger aside. It flags a destructive or irreversible action.

Custom Titles

Custom Note Title

This aside uses the <Aside> component with a custom title override.

Pro Tip

You can nest bold, italic, and inline code inside aside components.

Watch Out

Be careful when upgrading dependencies — check the changelog first.

Destructive Action

Running git reset --hard will permanently discard uncommitted changes.

Rich Content Inside Asides

Aside with mixed content

Here is a code block inside an aside:

npm install @astrojs/starlight

A list of items:

• First item with bold text
• Second item with inline code
• Third item with a link to Starlight docs

Aside CSS

Starlight’s built-in aside components get rounded corners and a layered shadow:

.starlight-aside {
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.12);
}

Tabs

Basic Tabs

Overview

This is the overview tab content. It contains plain text to verify basic tab rendering.

Details

This is the details tab. Switching between tabs should be instant with no page reload.

Tabs with Mixed Content

Text

Plain paragraph content in the first tab.

Code

const greeting = "Hello from a code block inside a tab!";
console.log(greeting);

List

• Item one inside a tab
• Item two with bold text
• Item three with inline code

Synced Tabs

These two tab groups share syncKey="pkg". Selecting a tab in one group should update the other.

Install command:

npm

npm install @f5xc-salesdemos/docs-theme

pnpm

pnpm add @f5xc-salesdemos/docs-theme

yarn

yarn add @f5xc-salesdemos/docs-theme

Run command:

npm

npm run dev

pnpm

pnpm dev

yarn

yarn dev

Steps

1. Clone the repository

   git clone https://github.com/example/repo.git
   cd repo

2. Install dependencies

   npm install

3. Start the dev server

   npm run dev

   The site will be available at http://localhost:4321.

Cards

Single Card

Single Card

This is a standalone card with an icon. Cards are useful for highlighting key information or features.

Card Grid

Performance

Astro delivers zero-JS by default for fast page loads.

Customizable

Starlight provides extensive theming and plugin options.

Accessible

Built-in accessibility features ensure content reaches everyone.

Documented

Comprehensive documentation makes getting started straightforward.

Stagger Layout

Step One

Configure your project settings and environment variables.

Step Two

Create your content pages using MDX format.

Step Three

Preview locally with the development server.

Step Four

Deploy to your hosting platform of choice.

Link Cards

The theme provides a LinkCard component that works with or without icons. Import it from the theme:

import LinkCard from '@f5xc-salesdemos/docs-theme/components/LinkCard.astro';

Starlight Documentation Learn how to build documentation sites with Starlight.

Astro Documentation Explore the Astro framework for content-driven websites.

With Icons

Add an icon prop using prefix:name syntax. All eight icon packs are supported — see the Icon Packages documentation for the full catalog.

Lucide (lucide:)

Web App Firewall Firewall policies and configuration.

Multi-Cloud Networking Site connectivity across clouds.

Carbon (carbon:)

Security Services IBM Carbon security icon set.

Cloud Services IBM Carbon cloud icon set.

Material Design Icons (mdi:)

Access Control Material Design shield lock icon.

Data Management Material Design database icon.

Phosphor (phosphor:)

Threat Defense Phosphor shield icon.

Global Network Phosphor globe icon.

Tabler (tabler:)

Cloud Platform Tabler cloud icon.

Deployment Tabler rocket icon.

F5 Brand (f5-brand:)

Cloud Security F5 branded cloud shield icon.

Firewall F5 branded firewall icon.

F5 Distributed Cloud (f5xc:)

These icons are multi-color and use CSS custom properties for light/dark mode color adaptation.

App & API Protection F5 XC web app and API protection icon.

Bot Defense F5 XC bot defense icon.

HashiCorp Flight (hashicorp-flight:)

Terraform HashiCorp Terraform icon.

Consul HashiCorp Consul icon.

Badges

Inline Badge Variants

All six badge variants rendered inline:

Default Note Danger Success Tip Caution

Badge Sizes

Small Medium Large

Each size with a variant:

Small Tip Medium Danger Large Success

Heading Badges

The following headings use the starlight-heading-badges plugin syntax.

Feature Complete Stable

This heading has a success badge indicating the feature is stable.

Experimental API Beta

This heading has a caution badge indicating the API is experimental.

Legacy System Deprecated

This heading has a danger badge indicating deprecation.

New Feature New

This heading has a tip badge indicating a new feature.

Documentation Updated

This heading has a note badge indicating recent updates.

Default Badge Info

This heading has a default badge with no variant specified.

Sidebar Badge

Check the sidebar: this page has a “New” badge with the tip variant applied via frontmatter.

Tables

Simple Table

Feature	Status	Priority
Dark mode	Supported	High
Image zoom	Supported	Medium
Mermaid diagrams	Supported	Medium
Heading badges	Supported	Low

Table with Alignment and Code

Property	Type	Default	Description
title	string	—	Page title displayed in the header
description	string	""	Meta description for SEO
sidebar.order	number	0	Sort order in the sidebar
sidebar.badge	object	null	Badge shown next to sidebar label
template	"doc" | "splash"	"doc"	Page layout template

Images

The image below tests the starlight-image-zoom plugin. Click to zoom.

File Tree

• Directorysrc/

  • Directorycontent/

    • Directorydocs/

      • index.mdx
      • 01-environment-variables.mdx
      • 02-build-pipeline.mdx
      • 03-astro-config.mdx
      • 04-logo.mdx
      • 05-colors.mdx
      • 07-typography.mdx
      • 08-code-blocks.mdx
      • 09-components.mdx This page
      • 10-mermaid.mdx
      • 11-footer.mdx
      • 12-style-enhancement-guide.mdx
  • Directoryplugins/

    • remark-mermaid.mjs
• Directorystyles/

  • custom.css
• astro.config.mjs
• package.json

Theme Checks

• Border-left color differs per aside variant (blue, purple, yellow, red)
• Aside background tint is visible in both light and dark modes
• Box-shadow is subtle but visible around each aside
• Rounded corners (0.75rem) on all asides
• Tab active indicator color uses the accent color
• Step connector line is visible between numbered steps
• Synced tabs stay in sync when switching between groups
• Code blocks inside tabs render with proper syntax highlighting
• Card border color adapts between light and dark modes
• Hover background effect is visible on cards
• LinkCard arrow icon color matches the accent color
• Stagger layout offsets alternate cards vertically
• Icons render correctly inside card headers
• Badge background colors per variant differ between dark and light modes
• Dark mode badges use deep tones (red-4, jade-4, tangerine-4, eggplant-4, bay-4)
• Light mode badges use light tones (red-1, jade-1, tangerine-1, eggplant-1, bay-1)
• Heading badges align inline with heading text
• Sidebar badge renders next to the page label
• Table border colors adapt between light and dark modes
• Table header row has a distinct background
• Image zoom overlay works on click (starlight-image-zoom)
• FileTree background uses theme-appropriate colors
• Icons inherit the current text color