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 GitHub-flavored markdown alert syntax for callouts. Available Types Five callout types are available, each with a distinct color and icon. Note Use notes for gene...

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

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

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

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

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