Components

Explore the UI components available in Helios for creating rich documentation. Showcases callouts, code blocks, tabs, tables, and other elements.

Callouts

Callouts Callouts (also known as alerts or admonitions) help highlight important information in your documentation. Helios uses the github-markdown-alerts plugin for callouts support, so please install it first. Available Types Five callout types are available, each with a distinct color and...

Code Blocks

Server-Side Syntax Highlighting Codesh for Grav is a plugin that provides server-side syntax highlighting for code blocks in your Grav site. Codesh provides server-side syntax highlighting using Phiki, a PHP port of Shiki that uses TextMate grammars and VS Code themes. All highlighting happen...

Tables

Tables Helios provides clean, responsive table styling for presenting data in your documentation. Basic Tables Use standard markdown table syntax: Feature Description Status Dark Mode System preference with manual toggle Available Search Full-text search with...

Cards

Cards Cards display content in a box matching the documentation theme's styles. Use them to highlight related information or group content visually. Basic Card A simple card with a title and content: Moons Io, Europa, Ganymede, and...

Card Grids

Card Grids Use the doc-grid shortcode to display multiple cards in a responsive grid layout. Basic Grid By default, grids display cards in 2 columns on larger screens: Stars Sirius,...

Link Cards

Link Cards Link preview cards for external resources, further reading, or related pages. Each card displays a title, optional description, and an arrow indicator. Basic Link Card Grav CMS Modern open-source flat-file CMS [doc-link-card href="https:...

Steps

Steps Steps display a numbered list of tasks or instructions with a visual timeline connecting them. Basic Steps 1 Create a new Grav project: bin/gpm install helios 2 Configure your sit...

File Tree

File Tree The file tree component displays directory structures with appropriate file icons. It's useful for showing project layouts, explaining folder organization, or documenting file hierarchies. Basic Usage Use markdown list syntax inside the [doc-file-tree] shortcode. Use 4-space inden...

Tabs

Tabs Tabs organize content into switchable panels. With the sync-labels feature, tabs with matching labels stay synchronized across your entire documentation site. Basic Tabs Simple tabs without synchronization: Preview ...

Accordions

Accordions Accordions let you organize content into collapsible sections. They're ideal for FAQs, long reference lists, and any content where users need to scan headings before diving into details. Basic Accordion By default, only one item can be open at a time. Clicking a new item closes the...

Details

Details A simple collapsible section using the native HTML element. Lighter than the full accordion shortcode — ideal for one-off toggles. Basic Usage Click to expand This content is hidden by default and revealed when the user click...

Buttons

Buttons Styled buttons for calls-to-action, navigation links, and interactive triggers. Buttons support color variants, sizes, icons, and can render as links or button elements. Basic Button A default primary filled button with a link: Get Started [doc-button label="Get Started" link="/v3...

Badges

Badges Inline status pills for labels, tags, version indicators, and status markers. Badges render as elements and flow naturally within prose text. Basic Badge A default primary-colored badge: New [doc-badge label="New"] Inline Usage Badges work inline within text. The Helio...

Tooltips

Tooltips Inline hover/focus tooltips for defining terms, abbreviations, and providing contextual help. Tooltips are accessible via keyboard (Tab key) and display a popup above the term. Basic Tooltip Hover over the term to see the definition: The Grav CMSGrav is a modern flat-file CMS buil...

Keyboard Keys

Keyboard Keys Styled keyboard keys for documenting shortcuts and key combinations. Each key gets a raised appearance with a subtle border and shadow. Single Key Enter [doc-kbd key="Enter"] Key Combinations Separate keys with + to render compound shortcuts: Press Ctrl+C to copy...

Copy Text

Copy Text Inline copyable text with a one-click clipboard button. Works anywhere — inside paragraphs, tables, lists, or on its own line. Use it for commands, config values, file paths, or any text a reader might want to copy. Basic Usage Install the theme with composer require getgrav/grav-th...

Icons

Icons The Helios theme includes access to over 30,000 SVG icons through the svg-icons plugin. Icons can be used in content via shortcodes or in templates via Twig functions. Available Icon Sets Set Icons Description tabler 5,736 Default set - clean, consistent icons ...

Images

Images Styled images with optional borders, shadows, captions, and a click-to-zoom lightbox. The doc-image shortcode wraps images in a element with consistent styling. Basic Image A simple image with lightbox enabled by default (click to zoom): ...

Videos

Videos Responsive video embeds for YouTube, Vimeo, and local video files. Videos maintain their aspect ratio and scale to fill the available width. YouTube Embed a YouTube video by providing the URL: [doc-video url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="E...