# cards URL: /api/rendering/plugins/directives/cards/ Section: directives -------------------------------------------------------------------------------- cards - Bengal window.BENGAL_THEME_DEFAULTS = { appearance: 'dark', palette: 'snow-lynx' }; // Progressive Enhancement System Configuration window.Bengal = window.Bengal || {}; window.Bengal.enhanceBaseUrl = '/bengal/assets/js/enhancements'; window.Bengal.watchDom = true; window.Bengal.debug = false; (function () { try { var defaults = window.BENGAL_THEME_DEFAULTS || { appearance: 'system', palette: '' }; var defaultAppearance = defaults.appearance; if (defaultAppearance === 'system') { defaultAppearance = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light'; } var storedTheme = localStorage.getItem('bengal-theme'); var storedPalette = localStorage.getItem('bengal-palette'); var theme = storedTheme ? (storedTheme === 'system' ? defaultAppearance : storedTheme) : defaultAppearance; var palette = storedPalette ?? defaults.palette; document.documentElement.setAttribute('data-theme', theme); if (palette) { document.documentElement.setAttribute('data-palette', palette); } } catch (e) { document.documentElement.setAttribute('data-theme', 'light'); } })(); Skip to main content Magnifying Glass ESC Recent Clear Magnifying Glass No results for "" Try different keywords or check your spelling Start typing to search... ↑↓ Navigate ↵ Open ESC Close Powered by Lunr ᓚᘏᗢ Documentation Info About Arrow Clockwise Get Started Note Tutorials File Text Content Palette Theming Settings Building Starburst Extending Bookmark Reference Learning Tracks Releases Dev GitHub API Reference bengal CLI Magnifying Glass Search ⌘K Palette Appearance Chevron Down Mode Monitor System Sun Light Moon Dark Palette Snow Lynx Brown Bengal Silver Bengal Charcoal Bengal Blue Bengal List ᓚᘏᗢ Magnifying Glass Search X Close Documentation Info About Arrow Clockwise Get Started Note Tutorials File Text Content Palette Theming Settings Building Starburst Extending Bookmark Reference Learning Tracks Releases Dev GitHub API Reference bengal CLI Palette Appearance Chevron Down Mode Monitor System Sun Light Moon Dark Palette Snow Lynx Brown Bengal Silver Bengal Charcoal Bengal Blue Bengal API Reference __main__ bengal Caret Right Folder Analysis community_detection graph_analysis graph_reporting graph_visualizer knowledge_graph link_suggestions link_types page_rank path_analysis performance_advisor results Caret Right Folder Assets manifest pipeline Caret Right Folder Autodoc base config docstring_parser utils virtual_orchestrator Caret Right Folder Extractors cli openapi python Caret Right Folder Models cli common openapi python Caret Right Folder Cache asset_dependency_map cache_store cacheable compression dependency_tracker page_discovery_cache query_index query_index_registry taxonomy_index utils Caret Right Folder Build Cache autodoc_tracking core file_tracking fingerprint parsed_content_cache rendered_output_cache taxonomy_index_mixin validation_cache Caret Right Folder Indexes author_index category_index date_range_index section_index Caret Right Folder Cli __main__ base site_templates utils Caret Right Folder Commands assets build clean collections config debug explain fix health init perf project serve site skeleton sources theme utils validate Caret Right Folder Graph __main__ bridges communities orphans pagerank report suggest Caret Right Folder New config presets scaffolds site wizard Caret Right Folder Helpers cli_app_loader cli_output config_validation error_handling menu_config metadata progress site_loader traceback validation Caret Right Folder Skeleton hydrator schema Caret Right Folder Templates base registry Caret Right Folder Blog template Caret Right Folder Changelog template Caret Right Folder Default template Caret Right Folder Docs template Caret Right Folder Landing template Caret Right Folder Portfolio template Caret Right Folder Resume template Caret Right Folder Collections errors loader schemas validator Caret Right Folder Config defaults deprecation directory_loader env_overrides environment feature_mappings hash loader merge origin_tracker validators Caret Right Folder Content Layer entry loaders manager source Caret Right Folder Sources github local notion rest Caret Right Folder Content Types base registry strategies Caret Right Folder Core build_context cascade_engine menu section theme Caret Right Folder Asset asset_core css_transforms Caret Right Folder Page computed content metadata navigation operations page_core proxy relationships utils Caret Right Folder Site core data discovery factories page_caches properties section_registry theme Caret Right Folder Debug base config_inspector content_migrator delta_analyzer dependency_visualizer explainer incremental_debugger models reporter shortcode_sandbox Caret Right Folder Discovery asset_discovery content_discovery Caret Right Folder Fonts downloader generator Caret Right Folder Health autofix base health_check report Caret Right Folder Linkcheck async_checker ignore_policy internal_checker models orchestrator Caret Right Folder Validators anchors assets cache config connectivity cross_ref fonts links menu navigation output performance rendering rss sitemap taxonomy tracks Caret Right Folder Directives analysis checkers constants Caret Right Folder Orchestration asset content full_to_incremental incremental menu postprocess related_posts render section static streaming taxonomy Caret Right Folder Postprocess html_output redirects rss sitemap special_pages Caret Right Folder Output Formats index_generator json_generator llm_generator lunr_index_generator txt_generator utils Caret Right Folder Rendering api_doc_enhancer asset_extractor errors jinja_utils link_transformer link_validator pygments_cache renderer template_context template_profiler validator Caret Right Folder Parsers base factory mistune native_html pygments_patch python_markdown Caret Right Folder Pipeline core output thread_local toc transforms Caret Right Folder Plugins badges cross_references inline_icon term variable_substitution Caret Right Folder Directives _icons admonitions badge base button cache cards checklist code_tabs container contracts data_table dropdown embed errors example_label fenced figure glossary icon include list_table literalinclude marimo navigation options rubric steps tabs target term terminal tokens utils validator video Caret Right Folder Template Engine asset_url core environment manifest menu url_helpers Caret Right Folder Template Functions advanced_collections advanced_strings autodoc collections content crossref data dates debug files get_page i18n icons images math_functions navigation pagination_helpers seo strings tables taxonomies theme urls Caret Right Folder Server build_handler component_preview constants dev_server live_reload pid_manager reload_controller request_handler request_logger resource_manager utils Caret Right Folder Services validation Caret Right Folder Themes config Caret Right Folder Utils atomic_write autodoc build_context build_stats build_summary cli_output css_minifier dates dotdict error_handlers file_io file_lock hashing incremental_constants js_bundler live_progress logger metadata observability page_initializer pagination path_resolver paths performance_collector performance_report profile progress retry rich_console sections swizzle text theme_registry theme_resolution thread_local traceback_config traceback_renderer url_normalization url_strategy Plugins Directives ᗢ Caret Down Link Copy URL External Open LLM text Copy Copy LLM text Share with AI Ask Claude Ask ChatGPT Ask Gemini Ask Copilot Module rendering.plugins.directives.cards Cards directive for Bengal SSG. Provides a modern, simple card grid system with auto-layout and responsive columns. Architecture: Migrated to BengalDirective base class with DirectiveContract validation. CardsDirective: allows card children CardDirective: requires_parent=["cards_grid"] (optional, not enforced) Syntax (preferred - named closers): :::{cards} :columns: 3 :gap: medium :::{card} Card Title :icon: book :link: /docs/ :description: Brief summary shown below the title :badge: New Card content with **markdown** support. :::{/card} :::{/cards} Card Options: :icon: - Icon name displayed in card header :link: - URL or page reference (makes card clickable) :description: - Brief summary shown below the title :badge: - Badge text (e.g., "New", "Beta", "Pro") :color: - Color theme (blue, green, red, yellow, etc.) :image: - Header image URL :footer: - Footer content :pull: - Fields to pull from linked page (title, description, icon) :layout: - Layout override (default, horizontal, portrait, compact) View source 8 Classes 17 Functions Classes CardsOptions dataclass Options for cards grid directive. 0 Caret Right Options for cards grid directive. Inherits from DirectiveOptions Attributes Name Type Description columns str Column layout ("auto", "1-6", or responsive "1-2-3") gap str Grid gap (small, medium, large) style str Visual style (default, minimal, bordered) variant str Card variant (navigation, info, concept) layout str Card layout (default, horizontal, portrait, compact) _allowed_values ClassVar[dict[str, list[str]]] CardsDirective Cards grid container directive. Creates a responsive grid of cards with sensible defaults. Syntax… 2 Caret Right Cards grid container directive. Creates a responsive grid of cards with sensible defaults. Syntax: ::::{cards} :columns: 3 :gap: medium :style: default :variant: navigation :layout: default :::{card} Title Content ::: :::: Columns accept: "auto" - Auto-fit layout "2", "3", "4" - Fixed columns "1-2-3" - Responsive (mobile-tablet-desktop) Inherits from BengalDirective Attributes Name Type Description NAMES ClassVar[list[str]] TOKEN_TYPE ClassVar[str] OPTIONS_CLASS ClassVar[type[DirectiveOptions]] CONTRACT ClassVar[DirectiveContract] DIRECTIVE_NAMES ClassVar[list[str]] Methods 2 parse_directive Build cards grid token. 5 DirectiveToken Caret Right def parse_directive(self, title: str, options: CardsOptions, content: str, children: list[Any], state: Any) -> DirectiveToken Build cards grid token. Parameters 5 title str options CardsOptions content str children list[Any] state Any Returns DirectiveToken render Render cards grid container to HTML. 2 str Caret Right def render(self, renderer: Any, text: str, **attrs: Any) -> str Render cards grid container to HTML. Parameters 2 renderer Any text str Returns str CardOptions dataclass Options for individual card directive. 0 Caret Right Options for individual card directive. Inherits from DirectiveOptions Attributes Name Type Description icon str Icon name link str URL or page reference description str Brief summary shown below the title badge str Badge text (e.g., "New", "Beta", "Pro") color str Color theme (blue, green, red, etc.) image str Header image URL footer str Footer content pull str Fields to pull from linked page (comma-separated) layout str Layout override (default, horizontal, portrait, compact) _allowed_values ClassVar[dict[str, list[str]]] CardDirective Individual card directive (nested in cards). Syntax: :::{card} Card Title :icon: book … 2 Caret Right Individual card directive (nested in cards). Syntax: :::{card} Card Title :icon: book :link: /docs/ :color: blue :image: /hero.jpg :footer: Updated 2025 :pull: title, description Card content with **markdown** support. ::: Footer separator: :::{card} Title Body content +++ Footer content ::: Contract: Typically nested inside :::{cards}, but can be standalone. Inherits from BengalDirective Attributes Name Type Description NAMES ClassVar[list[str]] TOKEN_TYPE ClassVar[str] OPTIONS_CLASS ClassVar[type[DirectiveOptions]] CONTRACT ClassVar[DirectiveContract] DIRECTIVE_NAMES ClassVar[list[str]] Methods 2 parse_directive Build card token, handling footer separator. 5 DirectiveToken Caret Right def parse_directive(self, title: str, options: CardOptions, content: str, children: list[Any], state: Any) -> DirectiveToken Build card token, handling footer separator. Parameters 5 title str options CardOptions content str children list[Any] state Any Returns DirectiveToken render Render individual card to HTML. 2 str Caret Right def render(self, renderer: Any, text: str, **attrs: Any) -> str Render individual card to HTML. Parameters 2 renderer Any text str Returns str GridDirective Grid layout compatibility layer. Converts legacy grid syntax to modern cards syntax. Not migrated … 2 Caret Right Grid layout compatibility layer. Converts legacy grid syntax to modern cards syntax. Not migrated to BengalDirective since it's a compatibility shim. Old syntax: ::::{grid} 1 2 2 2 :gutter: 1 :::: Inherits from DirectivePlugin Attributes Name Type Description DIRECTIVE_NAMES ClassVar[list[str]] Methods 1 parse Parse grid directive (compatibility mode). 3 dict[str, Any] Caret Right def parse(self, block: Any, m: Match[str], state: Any) -> dict[str, Any] Parse grid directive (compatibility mode). Parameters 3 block Any m Match[str] state Any Returns dict[str, Any] Internal Methods 1 Caret Right __call__ Register the directive with mistune. 2 None Caret Right def __call__(self, directive: Any, md: Any) -> None Register the directive with mistune. Parameters 2 directive Any md Any GridItemCardDirective Grid item card compatibility layer. Converts old syntax to modern card syntax. Not migrated to Ben… 2 Caret Right Grid item card compatibility layer. Converts old syntax to modern card syntax. Not migrated to BengalDirective since it's a compatibility shim. Inherits from DirectivePlugin Attributes Name Type Description DIRECTIVE_NAMES ClassVar[list[str]] Methods 1 parse Parse grid-item-card directive (compatibility mode). 3 dict[str, Any] Caret Right def parse(self, block: Any, m: Match[str], state: Any) -> dict[str, Any] Parse grid-item-card directive (compatibility mode). Parameters 3 block Any m Match[str] state Any Returns dict[str, Any] Internal Methods 1 Caret Right __call__ Register the directive with mistune. 2 None Caret Right def __call__(self, directive: Any, md: Any) -> None Register the directive with mistune. Parameters 2 directive Any md Any ChildCardsOptions dataclass Options for child-cards directive. 0 Caret Right Options for child-cards directive. Inherits from DirectiveOptions Attributes Name Type Description columns str Column layout gap str Grid gap include str What to include (sections, pages, all) fields str Fields to pull (comma-separated) layout str Card layout style str Visual style _allowed_values ClassVar[dict[str, list[str]]] ChildCardsDirective Auto-generate cards from current page's child sections/pages. Syntax: :::{child-cards} :co… 2 Caret Right Auto-generate cards from current page's child sections/pages. Syntax: :::{child-cards} :columns: 3 :include: sections :fields: title, description, icon ::: Inherits from BengalDirective Attributes Name Type Description NAMES ClassVar[list[str]] TOKEN_TYPE ClassVar[str] OPTIONS_CLASS ClassVar[type[DirectiveOptions]] DIRECTIVE_NAMES ClassVar[list[str]] Methods 2 parse_directive Build child-cards token. 5 DirectiveToken Caret Right def parse_directive(self, title: str, options: ChildCardsOptions, content: str, children: list[Any], state: Any) -> DirectiveToken Build child-cards token. Parameters 5 title str options ChildCardsOptions content str children list[Any] state Any Returns DirectiveToken render Render child cards by walking the page object tree. 2 str Caret Right def render(self, renderer: Any, text: str, **attrs: Any) -> str Render child cards by walking the page object tree. Parameters 2 renderer Any text str Returns str Functions _normalize_columns Normalize columns specification. 1 str Caret Right def _normalize_columns(columns: str) -> str Normalize columns specification. Parameters 1 Name Type Default Description columns str — Returns str _convert_legacy_columns Convert legacy column breakpoints to our format. 1 str Caret Right def _convert_legacy_columns(title: str) -> str Convert legacy column breakpoints to our format. Parameters 1 Name Type Default Description title str — Returns str _convert_legacy_gutter Convert legacy gutter to gap format. 1 str Caret Right def _convert_legacy_gutter(gutter: str) -> str Convert legacy gutter to gap format. Parameters 1 Name Type Default Description gutter str — Returns str _extract_octicon Extract octicon from title. 1 tuple[str, str] Caret Right def _extract_octicon(title: str) -> tuple[str, str] Extract octicon from title. Parameters 1 Name Type Default Description title str — Returns tuple[str, str] _pull_from_linked_page Pull metadata from a linked page. 3 dict[str, Any] Caret Right def _pull_from_linked_page(renderer: Any, link: str, fields: list[str]) -> dict[str, Any] Pull metadata from a linked page. Parameters 3 Name Type Default Description renderer Any — link str — fields list[str] — Returns dict[str, Any] _extract_page_fields Extract requested fields from a page object. 2 dict[str, Any] Caret Right def _extract_page_fields(page: Any, fields: list[str]) -> dict[str, Any] Extract requested fields from a page object. Parameters 2 Name Type Default Description page Any — fields list[str] — Returns dict[str, Any] _resolve_page Resolve a link to a page object. 3 Any Caret Right def _resolve_page(xref_index: dict[str, Any], link: str, current_page_dir: str | None = None) -> Any Resolve a link to a page object. Parameters 3 Name Type Default Description xref_index dict[str, Any] — link str — current_page_dir str | None None Returns Any _resolve_link_url Resolve a link reference to a URL. 2 str Caret Right def _resolve_link_url(renderer: Any, link: str) -> str Resolve a link reference to a URL. Parameters 2 Name Type Default Description renderer Any — link str — Returns str _render_icon Render icon using Bengal SVG icons. 2 str Caret Right def _render_icon(icon_name: str, card_title: str = '') -> str Render icon using Bengal SVG icons. Parameters 2 Name Type Default Description icon_name str — Name of the icon to render card_title str '' Title of the card (for warning context) Returns str — SVG HTML string, or empty string if not found _collect_children Collect child sections/pages from section. 3 list[dict[str, Any]] Caret Right def _collect_children(section: Any, current_page: Any, include: str) -> list[dict[str, Any]] Collect child sections/pages from section. Parameters 3 Name Type Default Description section Any — current_page Any — include str — Returns list[dict[str, Any]] _warn_mixed_weights Warn if some children have explicit weights and others don't. 2 None Caret Right def _warn_mixed_weights(children: list[dict[str, Any]], current_page: Any) -> None Warn if some children have explicit weights and others don't. Parameters 2 Name Type Default Description children list[dict[str, Any]] — current_page Any — _get_section_url Get URL for a section. 1 str Caret Right def _get_section_url(section: Any) -> str Get URL for a section. Parameters 1 Name Type Default Description section Any — Returns str _render_child_card Render a single card for a child section/page. 4 str Caret Right def _render_child_card(child: dict[str, Any], fields: list[str], layout: str, escape_html: Callable[[str], str]) -> str Render a single card for a child section/page. Parameters 4 Name Type Default Description child dict[str, Any] — fields list[str] — layout str — escape_html Callable[[str], str] — Returns str _escape_html Escape HTML special characters. 1 str Caret Right def _escape_html(text: str) -> str Escape HTML special characters. Parameters 1 Name Type Default Description text str — Returns str render_cards_grid Legacy render function for backward compatibility. 2 str Caret Right def render_cards_grid(renderer: Any, text: str, **attrs: Any) -> str Legacy render function for backward compatibility. Parameters 2 Name Type Default Description renderer Any — text str — Returns str render_card Legacy render function for backward compatibility. 2 str Caret Right def render_card(renderer: Any, text: str, **attrs: Any) -> str Legacy render function for backward compatibility. Parameters 2 Name Type Default Description renderer Any — text str — Returns str render_child_cards Legacy render function for backward compatibility. 2 str Caret Right def render_child_cards(renderer: Any, text: str, **attrs: Any) -> str Legacy render function for backward compatibility. Parameters 2 Name Type Default Description renderer Any — text str — Returns str ← Previous cache Next → checklist List © 2025 Bengal ᓚᘏᗢ window.BENGAL_LAZY_ASSETS = { tabulator: '/bengal/assets/js/tabulator.min.js', dataTable: '/bengal/assets/js/data-table.js', mermaidToolbar: '/bengal/assets/js/mermaid-toolbar.9de5abba.js', mermaidTheme: '/bengal/assets/js/mermaid-theme.344822c5.js', graphMinimap: '/bengal/assets/js/graph-minimap.cc7e42e3.js', graphContextual: '/bengal/assets/js/graph-contextual.440e59c6.js' }; window.BENGAL_ICONS = { close: '/bengal/assets/icons/close.911d4fe1.svg', enlarge: '/bengal/assets/icons/enlarge.652035e5.svg', copy: '/bengal/assets/icons/copy.3d56e945.svg', 'download-svg': '/bengal/assets/icons/download.04f07e1b.svg', 'download-png': '/bengal/assets/icons/image.c34dfd40.svg', 'zoom-in': '/bengal/assets/icons/zoom-in.237b4a83.svg', 'zoom-out': '/bengal/assets/icons/zoom-out.38857c77.svg', reset: '/bengal/assets/icons/reset.d26dba29.svg' }; Arrow Up X -------------------------------------------------------------------------------- Metadata: - Author: lbliii - Word Count: 2674 - Reading Time: 13 minutes