BHDicaire

Shortcodes

Shortcodes are Hugo’s escape hatch: a way to put something in a page that Markdown has no syntax for, without dropping into raw HTML. Refer to Components for HTML templates rendered by layouts.

Every shortcode reference follows one of three documentation modes. The default, live, renders the shortcode on its own reference page, inside component-preview when a frame helps isolate the result. A dependent interface links through component-relationship to the parent or content page that can render its real state. A nonvisual interface documents its result and constraints instead of inventing a decorative mock-up.

npm run lint:interfaces checks the selected mode in both languages: a live reference must invoke the shortcode, a dependent reference must link to a target that invokes it, and a non-visual reference must contain Result and Constraints sections.

Navigation

Anchor indexA Markdown bridge to the shared anchor-index component for same-page section links
CompanionA top-of-page pointer to one related page, with a sentence saying why.
Component relationshipA link from a dependent interface to the parent that renders its real example

Action

SelectA Markdown bridge to the shared native select component

Content

CalloutsThe six callout types on this site, written as plain Markdown alerts so notes move between Bear, GitHub and Hugo unchanged
CardA linked card with an icon and title.
CardsResponsive grid wrapper for a set of card shortcodes.
CodeA code block with a filename header and a copy button.
Component previewA framed live example of a component or shortcode in documentation
DefinitionA glossary tooltip, resolved from data/series/ref/glossary.yml.
DetailsA collapsible accordion section.
File treeA nested file tree composed from container, folder, and file shortcodes.
MermaidA Mermaid diagram rendered from a text definition.
PullquoteA quotation set aside from the main flow.
Site statusA Markdown bridge to the shared linked operational-status component
StepsA numbered vertical sequence for procedural documentation
TabA single panel inside a tabs group.
TabsA tabbed panel group; wraps tab entries.
Template previewA compact visual anatomy preview for a documented page template
Theme previewA local light and dark theme switcher for documentation examples
TimelineA vertical timeline of dated milestones; each ### heading is one entry.
TooltipA Markdown bridge to the shared accessible tooltip component
Video embedA Markdown bridge to the shared deferred video-embed component

Data

Accessibility-contractA data-driven accessibility contract with token-derived contrast evidence and linked system rules.
Brand-changelogA filtered changelog for the brand system, rendered from data/brand/changelog.yml.
Colour-paletteBrand or web colour cards with token names, role groups, and generated WCAG contrast ratios.
Colour-systemAn interactive explorer for public colour tokens, theme values, aliases, and declared contrast evidence
Content-countAn inline count from Hugo pages or site data.
Design-processA data-driven cycle linking design-process stages to their governing evidence and documentation.
Design-system-overviewA printable, data-driven overview and system flow for the six connected parts of this design system.
Documentation scopeA compact metadata row between governance rules and implementation details
EmojiAn emoji looked up by name from data/series/ref/emojis.yml.
Filter rowA Markdown bridge to the shared filter-row component for controls that change visible rows or items
Glossary-tableA sortable glossary table rendered from data/brand/glossary.yml by default.
Implementation statusA documented implementation state and acceptance criteria for a specified interface
Interface-manifestA data-driven profile of the current component or shortcode page.
Interface-migration-matrixA generated audit table for component interface metadata, sources, and manifests.
Missing-indexThe site-wide backlog of pages declaring a missing: artifact list.
Pattern-manifestA data-driven evidence record for the current task-oriented pattern page.
Shortcode-indexA generated table of every local shortcode, its purpose, and usage example.
Token-tableA generated token category table rendered from data/brand/tokens.yml.
Web analytics tableA sortable and filterable web analytics comparison table rendered from data/til/web_analytics.yml

Utility

ArrowAn inline ← or →, used as an annotation gutter beside a term.
KbdA keycap, for keyboard shortcuts.
VersionAn added, changed, or deprecated badge.