Shortcode-index
Preview#
| Shortcode | What it does | Usage |
|---|---|---|
accessibility-contract | A data-driven accessibility contract with token-derived contrast evidence and linked system rules. | {{< accessibility-contract >}} |
anchor-index | A Markdown bridge to the shared anchor-index component for same-page section links. | {{< anchor-index label="Jump to category:" ariaLabel="Cloud monitoring categories" >}} |
arrow | An inline ← or →, used as an annotation gutter beside a term. | {{< arrow left >}} |
brand-changelog | A filtered changelog for the brand system, rendered from data/brand/changelog.yml. | {{< brand-changelog topic="tokens" >}} |
callout | An admonition box. Prefer the Markdown > [!NOTE] syntax; this remains for archive. | {{< callout type="archive" title="Optional title" >}} |
card | A linked card with an icon and title. | {{< card title="Installation" icon="download" href="/docs/installation/" >}} |
cards | Responsive grid wrapper for a set of card shortcodes. | {{< cards cols="2" >}} |
code | A code block with a filename header and a copy button. | {{< code file="config/deploy.yml" lang="yaml" >}} |
colour-palette | Brand or web colour cards with token names, role groups, and generated WCAG contrast ratios. | {{< colour-palette >}} |
colour-system | A filterable explorer for public colour tokens, theme values, aliases, and declared WCAG evidence. | {{< colour-system >}} |
companion | A top-of-page pointer to one related page, with a sentence saying why. | {{< companion "/blog/rustdesk/self-hosting/" >}} |
component-preview | A framed live example of a component or shortcode in documentation. | {{< component-preview >}} |
component-relationship | A link from a dependent interface to the parent that renders its real example. | {{< component-relationship to="/docs/site-implementation/shortcodes/tabs" >}} |
content-count | An inline count from Hugo pages or site data. | {{< content-count key="blog" >}} |
definition | A glossary tooltip, resolved from data/series/ref/glossary.yml. | {{< definition "saffron" />}} |
design-process | A data-driven cycle linking design-process stages to their governing evidence and documentation. | {{< design-process >}} |
design-system-overview | A printable, data-driven overview and system flow for the six connected parts of this design system. | {{< design-system-overview >}} |
details | A collapsible accordion section. | {{< details title="Why not Kubernetes?" >}} |
documentation-scope | A compact metadata row linking governance rules and implementation details for a page. | {{< documentation-scope governance="/docs/site-governance/glossary" implementation="/docs/site-implementation/architecture/glossary-generation" >}} |
emoji | An emoji looked up by name from data/series/ref/emojis.yml. | {{< emoji "warning" >}} |
filetree/container | Wrapper for a file tree; holds filetree/folder and filetree/file entries. | {{< filetree/container >}} |
filetree/file | A file entry inside a filetree/container. | {{< filetree/file name="site.yml" >}} |
filetree/folder | A folder entry inside a filetree/container. | {{< filetree/folder name="config" >}} |
filter-row | A Markdown bridge to the shared filter-row component for controls that change visible rows or items. | {{< filter-row ariaLabel="Cloud monitoring categories" >}} |
glossary-table | A sortable glossary table rendered from data/brand/glossary.yml by default. | {{< glossary-table >}} |
implementation-status | A documented implementation state and acceptance criteria for a specified interface. | {{< implementation-status >}} |
interface-manifest | A data-driven profile of the current component or shortcode page. | {{< interface-manifest >}} |
interface-migration-matrix | A generated audit table for component interface metadata, sources, and manifests. | {{< interface-migration-matrix >}} |
kbd | A keycap, for keyboard shortcuts. | {{< kbd >}} |
mermaid | A Mermaid diagram rendered from a text definition. | {{< mermaid >}} |
missing-index | The site-wide backlog of pages declaring a missing: artifact list. | {{< missing-index >}} |
pattern-manifest | A data-driven evidence record for the current task-oriented pattern page. | {{< pattern-manifest >}} |
pullquote | A quotation set aside from the main flow. | {{< pullquote >}} |
select | A Markdown bridge to the shared native select component. | {{< select id="update-frequency" name="frequency" label="Update frequency" selected="weekly" >}} |
site-status | A Markdown bridge to the shared linked operational-status component. | {{< site-status href="https://status.example.com" label="BHDicaire.com" state="operational" status="Operational" >}} |
steps | A numbered sequence of steps. | {{< steps >}} |
tab | A single panel inside a tabs group. | {{< tab label="Ruby" >}} |
tabs | A tabbed panel group; wraps tab entries. | {{< tabs >}} |
template-preview | A compact visual anatomy preview for a documented page template. | {{< template-preview kind="landing" >}} |
theme-preview | A local light and dark theme switcher for documentation examples. | {{< theme-preview >}} |
timeline | A vertical timeline of dated milestones; each ### heading is one entry. | {{% timeline %}} |
token-table | A generated token category table rendered from data/brand/tokens.yml. | {{< token-table category="color" >}} |
tooltip | A Markdown bridge to the shared accessible tooltip component. | {{< tooltip id="response-time-tip" label="Explain response time" >}} |
version | An added, changed, or deprecated badge. | {{< version added="2.1" >}} |
video-embed | A Markdown bridge to the shared deferred video-embed component. | {{< video-embed id="M7lc1UVf-VE" title="YouTube Developers Live: Embedded Web Player Customization" thumbnail="/images/home/ben-speaking-les-affaires-2020.jpg" alt="Benoît H. Dicaire speaking on stage" >}} |
web-analytics-table | A sortable and filterable web analytics comparison table rendered from data/til/web_analytics.yml. | {{< web-analytics-table >}} |
Example
{{< shortcode-index >}}When to use
A generated table of every local shortcode, its purpose, and usage example.
Implementation
layouts/shortcodes/shortcode-index.htmlOptions
This shortcode has no named parameters in its template.
Interface manifest
- Kind
- Shortcode
- Category
- Data
- Status
- Implemented
- Implementation
- Shortcode:
layouts/shortcodes/shortcode-index.html