# VaraPress > A clean, fast, and responsive all-in-one theme for Zola This file contains the LLM-readable Markdown content for the full site. --- Source: https://press.varavel.com/ Markdown: https://press.varavel.com/index.md Content file: content/_index.md # VaraPress > A clean, fast, and responsive all-in-one theme for Zola Canonical HTML: https://press.varavel.com/ Markdown: https://press.varavel.com/index.md {{ header_base( container="lg", menu="Docs|/docs,Shortcodes|/docs/shortcodes,GitHub|https://github.com/varavelio/varapress", cta_text="Install", cta_url="/docs/getting-started/installation/" ) }} {{ hero_split( container="lg", eyebrow="A Varavel project", title="Build docs and landing pages in Zola", description="VaraPress is a bundled Zola theme for teams that want structured documentation, sharp landing pages, and zero frontend setup in the consuming project.", action_1_text="Install VaraPress", action_1_url="/docs/getting-started/installation/", action_2_text="Browse shortcodes", action_2_url="/docs/shortcodes/", panel_label="Why it works", panel_title="Theme code stays out of your content", panel_desc="Write Markdown, choose templates, and compose pages with shortcodes. VaraPress brings the layout, typography, bundled assets, and small Alpine interactions.", check_1="Docs layout with sidebar, TOC, and anchors", check_2="Landing sections with per-section containers", check_3="Bundled CSS and JavaScript for consuming sites" ) }} {{ features_grid( container="lg", title="A theme that does the boring work well", description="The defaults are intentionally strict, so your site stays coherent as it grows.", item_1_icon="book-open", item_1_title="Documentation that scales", item_1_desc="Use the docs shell for sidebar navigation, table of contents, heading anchors, and readable technical content.", item_2_icon="mouse-pointer-click", item_2_title="Landing pages from Markdown", item_2_desc="Compose heroes, features, CTAs, pricing, comparisons, forms, and proof sections with focused shortcodes.", item_3_icon="shield-check", item_3_title="Bundled for real projects", item_3_desc="No frontend dependency install is required in the consuming Zola site. Assets are already compiled and ready." ) }} {{ cta_banner( container="lg", title="Start with the installation guide", description="Add the theme, enable it in Zola, then build docs and landing pages from Markdown.", action_1_text="Install VaraPress", action_1_url="/docs/getting-started/installation/", action_2_text="Read the shortcode reference", action_2_url="/docs/shortcodes/" ) }} {{ footer_simple(container="lg", links="Docs|/docs,Shortcodes|/docs/shortcodes,GitHub|https://github.com/varavelio/varapress") }} --- Source: https://press.varavel.com/docs/ Markdown: https://press.varavel.com/docs/index.md Content file: content/docs/_index.md # Documentation Canonical HTML: https://press.varavel.com/docs/ Markdown: https://press.varavel.com/docs/index.md --- Source: https://press.varavel.com/docs/getting-started/ Markdown: https://press.varavel.com/docs/getting-started/index.md Content file: content/docs/getting-started/_index.md # Getting Started > Install and configure VaraPress in your Zola project. Canonical HTML: https://press.varavel.com/docs/getting-started/ Markdown: https://press.varavel.com/docs/getting-started/index.md --- Source: https://press.varavel.com/docs/getting-started/installation/ Markdown: https://press.varavel.com/docs/getting-started/installation/index.md Content file: content/docs/getting-started/installation.md # Installation > How to install the VaraPress theme in your Zola project. Canonical HTML: https://press.varavel.com/docs/getting-started/installation/ Markdown: https://press.varavel.com/docs/getting-started/installation/index.md VaraPress is a Zola theme. You install it inside an existing Zola site, enable it in `zola.toml`, and then let the theme provide the templates, assets, and shortcodes. ## Requirements - Zola `>= 0.22.1` - Git, if you install the theme as a submodule ## Add the Theme From the root of your Zola project, add VaraPress under `themes/varapress`: ```bash git submodule add https://github.com/varavelio/varapress.git themes/varapress ``` If you do not use Git submodules, copy or vendor the theme into the same `themes/varapress` directory. The directory name matters because it is the value Zola reads from `theme = "varapress"`. ## Enable the Theme Set the theme in your site's `zola.toml`: ```toml theme = "varapress" ``` Keep your own site content in the root project's `content/` directory. The theme files in `themes/varapress/` should be treated as upstream theme code. ## Bundled Assets VaraPress includes its frontend assets already bundled in `static/`. A project consuming the theme does not need a frontend package manager, an asset build step, or additional dependencies. Zola can serve and build the site directly after the theme is enabled. If you are contributing to the theme itself, use the repository development workflow. That is separate from consuming VaraPress in a normal Zola project. ## Verify the Site Run Zola from your project root: ```bash zola serve ``` For production checks, use: ```bash zola check ``` ## Next Steps After installation, configure your metadata, logos, highlighting, and content strategy in [Configuration](/docs/getting-started/configuration/). --- Source: https://press.varavel.com/docs/getting-started/configuration/ Markdown: https://press.varavel.com/docs/getting-started/configuration/index.md Content file: content/docs/getting-started/configuration.md # Configuration > Configure VaraPress metadata, theme options, syntax highlighting, and page defaults. Canonical HTML: https://press.varavel.com/docs/getting-started/configuration/ Markdown: https://press.varavel.com/docs/getting-started/configuration/index.md VaraPress uses standard Zola configuration plus a small set of theme-specific options under `[extra]`. Keep configuration explicit and boring: site metadata in `zola.toml`, content structure in `content/`, and theme customizations in `[extra]`. ## Minimal Configuration Start with the project metadata and theme setting: ```toml title = "My Project" description = "A brief description of your project" base_url = "https://example.com" theme = "varapress" compile_sass = false # Your other config options.. ``` `compile_sass = false` is intentional. VaraPress uses TailwindCSS and compiled CSS assets, not Sass. ## Page Defaults VaraPress is designed around three page surfaces: | Surface | Template | Use it for | | ------------------- | -------------- | -------------------------------------------------- | | Site index | `landing.html` | The home page at `content/_index.md` | | Regular content | `blog.html` | Standard pages and future article/blog surfaces | | Documentation pages | `docs.html` | Structured docs with sidebar and table of contents | The site index uses `landing.html` by default through `templates/index.html`; you do not need to set it on `content/_index.md`. Treat landing pages as a blank canvas composed from shortcodes. All other pages use `blog.html` by default for convenience. Override `template = "..."` in front matter whenever a page or section needs a different shell, for example `template = "docs.html"` for documentation content or `template = "blog.html"` for blog content. ## Theme Options Add theme-specific values under `[extra]`: ```toml [extra] varapress_logo_light = "/brand/logo-black.svg" varapress_logo_dark = "/brand/logo-white.svg" varapress_favicon = "/favicon.svg" ``` If these values are omitted, VaraPress falls back to the official Varavel brand assets. ## Syntax Highlighting VaraPress includes the VDL grammar and is designed for GitHub-style dark code theme. Configure highlighting in `zola.toml`: ```toml [markdown.highlighting] theme = "github-dark" extra_grammars = ["themes/varapress/grammars/vdl.json"] ``` If your site is the theme repository itself, paths may differ because the grammar lives at the repository root. ## LLM-Ready Builds VaraPress ships a Node.js script that can run a full Zola build and then generate LLM-readable files. Authors do not need to install frontend packages or Node dependencies in their site; they only need Node.js for the script and Zola for the site build. Run it from the root of a project that uses the theme: ```bash # See all options node themes/varapress/llms.mjs --help # Run this instead of zola build node themes/varapress/llms.mjs ``` This produces: - `llms.txt` at the site root and inside every section. - `llms-full.txt` at the site root with all included Markdown content concatenated. - `index.md` files next to every included section and page URL. Use a normal Zola build when you do not need these files: ```bash zola build ``` Control the generated files with `[extra]`: ```toml [extra] varapress_llms = true varapress_llms_full = true varapress_llms_description_chars = 100 ``` When either LLM option is enabled, documentation pages expose a compact Markdown menu for copying, opening, or downloading the generated `index.md`. The docs sidebar also adds an `Agents` section with links to the generated `llms.txt` and/or `llms-full.txt` files that are active for the site. Exclude a single page or section from the generated LLM files with front matter: ```toml +++ title = "Internal Notes" [extra] varapress_llms = false +++ ``` If you already have a built `public/` directory and only want to regenerate the LLM files, skip the Zola step: ```bash node themes/varapress/scripts/varapress-llms.mjs --skip-zola ``` ## Content Structure A practical site usually starts with this shape: ```txt content/ _index.md docs/ _index.md getting-started/ _index.md installation.md ``` Use documentation pages for long-lived product docs and landing pages for marketing surfaces. Shortcodes are available in both contexts; the complete reference lives at [Shortcodes](/docs/shortcodes/). ## Next Steps Continue with [Documentation Pages](/docs/getting-started/documentation/) to create docs content, then [Landing Pages](/docs/getting-started/landing-pages/) to compose marketing pages. --- Source: https://press.varavel.com/docs/getting-started/documentation/ Markdown: https://press.varavel.com/docs/getting-started/documentation/index.md Content file: content/docs/getting-started/documentation.md # Documentation > Create structured documentation pages with the VaraPress docs layout. Canonical HTML: https://press.varavel.com/docs/getting-started/documentation/ Markdown: https://press.varavel.com/docs/getting-started/documentation/index.md Documentation pages are for durable product knowledge: installation guides, API notes, tutorials, architecture explanations, and reference material. VaraPress gives these pages a dedicated docs shell with sidebar navigation, table of contents, heading anchors, syntax highlighting, and theme switching. ## When to Use Docs Pages Use docs pages when the reader is trying to understand or operate the product. Good docs content is specific, linkable, and organized into sections. Use `docs.html` for this surface: ```toml +++ title = "Install My Project" description = "Install and verify the project locally." template = "docs.html" # Optional, this is the default +++ ``` ## Create a Docs Section Create a section index at `content/docs/_index.md`: ```toml +++ title = "Documentation" template = "docs.html" sort_by = "weight" +++ ``` Then create subsections for groups of related pages: ```toml +++ title = "Getting Started" template = "docs.html" weight = 1 +++ ``` The sidebar is generated from your Zola section tree. Use `weight` to control ordering and keep page titles short enough to scan. ## Write Pages for Navigation Each docs page should have a clear title, a concise description, and an explicit weight: ```toml +++ title = "Configuration" description = "Configure project metadata and theme options." template = "docs.html" weight = 2 +++ ``` Headings inside the page become table-of-contents entries. Keep heading levels meaningful and avoid skipping from `##` to `####` unless the structure genuinely requires it. ## Markdown and Code Blocks Write normal Markdown. VaraPress styles rich text through the docs layout and supports highlighted code blocks: ````markdown ```toml theme = "varapress" ``` ```` Use fenced code blocks for commands, configuration, and examples. This makes docs easier to scan and keeps long instructions copyable. ## Shortcodes in Docs Shortcodes are available inside documentation pages, use them sparingly for callouts, actions, or compact visual sections when they make the explanation clearer. Use the [Shortcodes](/docs/shortcodes/) reference when you need exact parameters, examples, and live previews. --- Source: https://press.varavel.com/docs/getting-started/landing-pages/ Markdown: https://press.varavel.com/docs/getting-started/landing-pages/index.md Content file: content/docs/getting-started/landing-pages.md # Landing Pages > How to create landing pages with VaraPress. Canonical HTML: https://press.varavel.com/docs/getting-started/landing-pages/ Markdown: https://press.varavel.com/docs/getting-started/landing-pages/index.md Landing pages are conversion surfaces: home pages, launch pages, product pages, waitlists, comparison pages, and campaign pages. In VaraPress, a landing page is intentionally a blank canvas. The layout comes from shortcodes, not from a fixed page template. ## The Default Home Page The site index at `content/_index.md` uses `landing.html` by default through `templates/index.html`. That means the home page starts as a full-width canvas with no docs sidebar and no table of contents. Create a home page like this: ```toml +++ title = "My Product" description = "A clear one-line product description." +++ ``` Then compose the page body with shortcodes: ```markdown {{/* header_base( container="lg", menu="Docs|/docs", cta_text="Start", cta_url="/docs" ) */}} {{/* hero_split( container="lg", title="Launch a precise product site", description="Compose a landing page from focused sections instead of writing one-off templates.", action_1_text="Get started", action_1_url="/docs" ) */}} {{/* footer_simple(container="lg", links="Docs|/docs") */}} ``` ## Compose with Sections Landing shortcodes are full-width by design so borders and backgrounds can span the viewport. Their content is centered by each shortcode's `container` parameter. Use this pattern: ```markdown {{/* features_grid(container="lg", title="Why teams choose us") */}} ``` Do not wrap standard landing sections in the block `container` shortcode just to constrain width. Use the section's own `container` parameter instead. Save the block `container` shortcode for custom Markdown or custom HTML. Shortcodes are available throughout landing pages. Use the [Shortcodes](/docs/shortcodes/) reference as the catalog for every landing building block. --- Source: https://press.varavel.com/docs/shortcodes/ Markdown: https://press.varavel.com/docs/shortcodes/index.md Content file: content/docs/shortcodes/_index.md # Shortcodes > Reference for every VaraPress shortcode with guidance, usage snippets, and live examples. Canonical HTML: https://press.varavel.com/docs/shortcodes/ Markdown: https://press.varavel.com/docs/shortcodes/index.md --- Source: https://press.varavel.com/docs/shortcodes/announcement-bar/ Markdown: https://press.varavel.com/docs/shortcodes/announcement-bar/index.md Content file: content/docs/shortcodes/announcement-bar.md # Announcement Bar > Render a compact launch, promo, or update strip. Canonical HTML: https://press.varavel.com/docs/shortcodes/announcement-bar/ Markdown: https://press.varavel.com/docs/shortcodes/announcement-bar/index.md `announcement_bar` renders a compact bordered strip for important updates without taking over the page. ## When to Use Use it above or between sections for launches, limited-time notices, migration messages, or release updates. ## Usage ```markdown {{/* announcement_bar(label="New", text="Version 2 is available", href="/docs", link_text="Read docs") */}} ``` ## Live Example {{ announcement_bar( label="New", text="The landing shortcode library now includes production-ready proof, product, and conversion sections.", href="/docs/shortcodes/", link_text="Browse shortcodes" ) }} ## Parameters | Parameter | Description | | ----------- | ----------------------------------------------- | | `container` | Inner content width. | | `icon` | Optional leading icon. Defaults to `megaphone`. | | `label` | Short emphasized label before the copy. | | `text` | Announcement copy. | | `href` | Optional URL for the trailing link. | | `link_text` | Link label. Defaults to `Learn more`. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/app-screenshot/ Markdown: https://press.varavel.com/docs/shortcodes/app-screenshot/index.md Content file: content/docs/shortcodes/app-screenshot.md # App Screenshot > Render a bordered product screenshot or UI placeholder. Canonical HTML: https://press.varavel.com/docs/shortcodes/app-screenshot/ Markdown: https://press.varavel.com/docs/shortcodes/app-screenshot/index.md `app_screenshot` presents a product view inside a clean browser-style frame with optional badges and caption. ## When to Use Use it after a hero or feature section when the product surface itself is the strongest proof. ## Usage ```markdown {{/* app_screenshot(title="See the product", badge_1="Responsive", badge_2="Dark mode") */}} ``` ## Live Example {{ app_screenshot( container="md", eyebrow="Product", title="A clean product frame", description="Use a real screenshot when available, or let the shortcode render a neutral system mock.", caption="The placeholder keeps unfinished pages presentable.", badge_1="Responsive", badge_2="Dark mode", badge_3="Tokenized" ) }} ## Parameters | Parameter | Description | | ------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy below the heading. | | `image_src` | Optional screenshot URL. | | `image_alt` | Optional screenshot alt text. | | `caption` | Caption shown below the frame. | | `badge_N` | Supporting badge text, up to 3. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/benefits-checklist/ Markdown: https://press.varavel.com/docs/shortcodes/benefits-checklist/index.md Content file: content/docs/shortcodes/benefits-checklist.md # Benefits Checklist > Render persuasive copy beside a dense checklist panel. Canonical HTML: https://press.varavel.com/docs/shortcodes/benefits-checklist/ Markdown: https://press.varavel.com/docs/shortcodes/benefits-checklist/index.md `benefits_checklist` combines a left/right narrative with a compact checklist for scannable value props. ## When to Use Use it when the section must explain a core benefit and quickly prove coverage across several requirements. ## Usage ```markdown {{/* benefits_checklist(title="Built for teams", panel_title="Included", check_1="Docs", check_2="Landing sections") */}} ``` ## Live Example {{ benefits_checklist( container="md", eyebrow="Benefits", title="Ship polished landing pages faster", description="Compose production-ready sections with consistent spacing, dark mode, and structural borders.", panel_title="Included out of the box", check_1="Clean responsive layouts", check_2="Reusable conversion sections", check_3="Proof and trust patterns", check_4="Minimal JavaScript" ) }} ## Parameters | Parameter | Description | | --------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `action_1_text` | Primary button label. | | `action_1_url` | Primary button URL. | | `action_2_text` | Secondary button label. | | `action_2_url` | Secondary button URL. | | `panel_title` | Checklist card title. | | `check_N` | Checklist items, up to 8. | | `reverse` | Use `true` to place the checklist first. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/button-base/ Markdown: https://press.varavel.com/docs/shortcodes/button-base/index.md Content file: content/docs/shortcodes/button-base.md # Button Base > Render a single Varavel-styled button or link inline. Canonical HTML: https://press.varavel.com/docs/shortcodes/button-base/ Markdown: https://press.varavel.com/docs/shortcodes/button-base/index.md `button_base` renders one button-style element using the shared button macro. Use it for inline actions inside documentation pages, compact CTAs, or custom Markdown sections. ## When to Use Use `button_base` when you need one action and do not need a full CTA section. It can render as an `` when `href` is provided or as a button-style element when it is not. ## Usage ```markdown {{/* button_base( text="Open documentation", href="/docs/", variant="solid", color="neutral", icon_right="arrow-right" ) */}} ``` ## Live Example {{ button_base( text="Open documentation", href="/docs/", variant="solid", color="neutral", icon_right="arrow-right" ) }} ## Parameters | Parameter | Description | | ------------ | -------------------------------------------------------------------- | | `text` | Button label. Required. | | `href` | Optional URL. When present, the shortcode renders a link. | | `target` | Optional link target, such as `_blank`. | | `variant` | Visual style: `solid`, `outline`, or `ghost`. | | `color` | Semantic color: `neutral`, `info`, `success`, `warning`, or `error`. | | `size` | Button size: `sm`, `md`, or `lg`. | | `icon` | Optional icon rendered before the label. | | `icon_right` | Optional icon rendered after the label. | | `radius` | Border radius: `sm`, `md`, `lg`, or `full`. | | `wide` | Set to `true` to make the button full width. | | `disabled` | Set to `true` to disable interaction. | | `type` | Button type when no `href` is provided. Defaults to `button`. | | `class` | Additional CSS classes appended to the rendered element. | --- Source: https://press.varavel.com/docs/shortcodes/case-studies-grid/ Markdown: https://press.varavel.com/docs/shortcodes/case-studies-grid/index.md Content file: content/docs/shortcodes/case-studies-grid.md # Case Studies Grid > Render outcome-focused customer story cards. Canonical HTML: https://press.varavel.com/docs/shortcodes/case-studies-grid/ Markdown: https://press.varavel.com/docs/shortcodes/case-studies-grid/index.md `case_studies_grid` renders three story cards with customer context, summary copy, and a prominent outcome. ## When to Use Use it when customers, segments, or use cases can prove value better than feature copy alone. ## Usage ```markdown {{/* case_studies_grid(title="Customer outcomes", item_1_customer="SaaS", item_1_title="Faster launches") */}} ``` ## Live Example {{ case_studies_grid( container="md", eyebrow="Stories", title="Built for real landing pages", description="Show how different teams use the same theme primitives.", item_1_customer="Startup", item_1_title="Launch page in a day", item_1_desc="A compact set of sections carried the first public release.", item_1_result="1 day", item_2_customer="Docs", item_2_title="Cleaner onboarding", item_2_desc="Guides and landing pages now share the same visual language.", item_2_result="-32% support", item_3_customer="Agency", item_3_title="Reusable client kit", item_3_desc="The same shortcode catalog adapts to multiple verticals.", item_3_result="24 sections" ) }} ## Parameters | Parameter | Description | | ----------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `item_N_customer` | Customer, segment, or category label. | | `item_N_title` | Story title. | | `item_N_desc` | Story summary. | | `item_N_result` | Prominent result or metric. | | `item_N_href` | Optional story URL. | | `item_N_link` | Optional link label. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/comparison-cards/ Markdown: https://press.varavel.com/docs/shortcodes/comparison-cards/index.md Content file: content/docs/shortcodes/comparison-cards.md # Comparison Cards > Render compact positioning cards without a table. Canonical HTML: https://press.varavel.com/docs/shortcodes/comparison-cards/ Markdown: https://press.varavel.com/docs/shortcodes/comparison-cards/index.md `comparison_cards` compares options, audiences, or approaches using equal cards and point lists. ## When to Use Use it when a full matrix is too heavy but visitors still need clear decision framing. ## Usage ```markdown {{/* comparison_cards(title="Choose your path", card_1_title="Manual", card_2_title="Composable") */}} ``` ## Live Example {{ comparison_cards( container="md", title="Choose the right section style", description="Use cards when each option needs narrative context.", card_1_label="Manual", card_1_title="Start from scratch", card_1_desc="Maximum control, but every spacing and state decision is repeated.", card_1_point_1="Useful for one-off experiments", card_2_label="Composable", card_2_title="Use shortcodes", card_2_desc="Production-ready sections keep pages aligned by default.", card_2_point_1="Consistent spacing", card_2_point_2="Shared tokens", card_3_label="Hybrid", card_3_title="Extend carefully", card_3_desc="Use classes only when a specific page needs extra tuning.", card_3_point_1="Preserves the system" ) }} ## Parameters | Parameter | Description | | ---------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `card_N_label` | Card eyebrow label, up to 3 cards. | | `card_N_title` | Card title. | | `card_N_desc` | Card description. | | `card_N_point_N` | Supporting points, up to 4 per card. | | `card_N_icon` | Optional icon name. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/comparison-table/ Markdown: https://press.varavel.com/docs/shortcodes/comparison-table/index.md Content file: content/docs/shortcodes/comparison-table.md # Comparison Table > Compare your product against an alternative in a structured table. Canonical HTML: https://press.varavel.com/docs/shortcodes/comparison-table/ Markdown: https://press.varavel.com/docs/shortcodes/comparison-table/index.md `comparison_table` renders a bordered comparison table for positioning pages, alternative pages, and buyer enablement sections. ## When to Use Use it when a visitor is comparing options and needs a quick, scannable answer. Keep row labels concrete and avoid turning the table into a generic feature dump. ## Usage ```markdown {{/* comparison_table( title="Why VaraPress", primary_label="VaraPress", secondary_label="Custom templates", row_1_feature="Markdown composition", row_1_primary="true", row_1_secondary="false" ) */}} ``` ## Live Example {{ comparison_table( container="md", title="A clearer way to launch", description="Use rows that map directly to buyer concerns.", primary_label="VaraPress", secondary_label="Custom templates", row_1_feature="Markdown composition", row_1_primary="true", row_1_secondary="false", row_2_feature="Bundled assets", row_2_primary="true", row_2_secondary="Manual setup" ) }} ## Parameters | Parameter | Description | | ----------------- | ----------------------------------------------------------------- | | `container` | Inner content width. Use `xs`, `sm`, `md`, `lg`, `xl`, or `full`. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy below the heading. | | `primary_label` | Label for the primary comparison column. | | `secondary_label` | Label for the alternative comparison column. | | `row_N_feature` | Feature or capability name for row `N`. | | `row_N_primary` | Primary value for row `N`. Use `true`, `false`, or custom text. | | `row_N_secondary` | Secondary value for row `N`. Use `true`, `false`, or custom text. | | `bg` | Section background token. Usually `base-100` or `base-200`. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/contact-split/ Markdown: https://press.varavel.com/docs/shortcodes/contact-split/index.md Content file: content/docs/shortcodes/contact-split.md # Contact Split > Render contact details beside a minimal form card. Canonical HTML: https://press.varavel.com/docs/shortcodes/contact-split/ Markdown: https://press.varavel.com/docs/shortcodes/contact-split/index.md `contact_split` creates a conversion-ready contact block with structured details and an accessible form. ## When to Use Use it near the end of sales pages, service pages, partner pages, or high-intent lead flows. ## Usage ```markdown {{/* contact_split(title="Talk to us", email="hello@example.com") */}} ``` ## Live Example {{ contact_split( container="md", eyebrow="Contact", title="Talk to the team", description="Use a form action in production, or rely on the inline success state for static demos.", email="hello@example.com", location="Remote-first", response_time="Replies within one business day" ) }} ## Parameters | Parameter | Description | | ----------------- | --------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `email` | Optional contact email. | | `location` | Optional location text. | | `response_time` | Optional response-time text. | | `form_action` | Optional form action URL. | | `method` | Form method. Defaults to `post`. | | `button_text` | Submit button label. | | `success_message` | Inline success message when no action exists. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/container/ Markdown: https://press.varavel.com/docs/shortcodes/container/index.md Content file: content/docs/shortcodes/container.md # Container > Constrain custom Markdown or HTML content to a predictable width. Canonical HTML: https://press.varavel.com/docs/shortcodes/container/ Markdown: https://press.varavel.com/docs/shortcodes/container/index.md `container` is a block shortcode for custom content. Standard landing sections already expose their own `container` parameter, so you usually do not wrap section shortcodes with this. ## When to Use Use `container` for arbitrary Markdown, custom HTML, or one-off content that should align with the same width scale as landing sections. ## Usage ```markdown {%/* container(max_width="sm") */%} Custom content goes here. {%/* end */%} ``` ## Live Example {% container(max_width="sm") %}
This custom block is constrained with the container shortcode.
{% end %} ## Parameters | Parameter | Description | | ----------- | --------------------------------------------------------------- | | `max_width` | Maximum content width: `xs`, `sm`, `md`, `lg`, `xl`, or `full`. | | `padded` | Set to `true` to add horizontal `px-4` padding. | | `align` | Horizontal alignment: `left`, `center`, or `right`. | | `class` | Additional CSS classes on the container. | --- Source: https://press.varavel.com/docs/shortcodes/content-split/ Markdown: https://press.varavel.com/docs/shortcodes/content-split/index.md Content file: content/docs/shortcodes/content-split.md # Content Split > Render a general-purpose split copy and visual section. Canonical HTML: https://press.varavel.com/docs/shortcodes/content-split/ Markdown: https://press.varavel.com/docs/shortcodes/content-split/index.md `content_split` is a flexible section for any copy-plus-visual landing page moment. ## When to Use Use it for product explanations, feature deep-dives, service descriptions, and image-supported claims. ## Usage ```markdown {{/* content_split(title="Explain the system", bullet_1="Simple", bullet_2="Responsive") */}} ``` ## Live Example {{ content_split( container="md", eyebrow="Flexible", title="Explain any product detail", description="Pair narrative copy with either a real image or a neutral system panel.", panel_title="System panel", panel_desc="Fallback visuals keep pages usable before final imagery is ready.", bullet_1="Supports images or placeholder panels", bullet_2="Works in either visual order", bullet_3="Keeps card padding compact on mobile" ) }} ## Parameters | Parameter | Description | | --------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `image_src` | Optional visual image URL. | | `image_alt` | Optional image alt text. | | `panel_title` | Fallback panel title. | | `panel_desc` | Fallback panel description. | | `bullet_N` | Bullet items, up to 4. | | `action_N_text` | Optional button labels. | | `action_N_url` | Optional button URLs. | | `reverse` | Use `true` to place visual first. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/cta-banner/ Markdown: https://press.varavel.com/docs/shortcodes/cta-banner/index.md Content file: content/docs/shortcodes/cta-banner.md # CTA Banner > Render a prominent bordered call-to-action section. Canonical HTML: https://press.varavel.com/docs/shortcodes/cta-banner/ Markdown: https://press.varavel.com/docs/shortcodes/cta-banner/index.md `cta_banner` renders a full-width CTA section with a centered bordered card. It is designed for final conversion blocks and major page transitions. ## When to Use Use it near the end of a landing page when the visitor has enough context to act. Keep the copy short and choose one primary action. ## Usage ```markdown {{/* cta_banner( title="Ready to build?", description="Start with the docs and compose your first page.", action_1_text="Read the docs", action_1_url="/docs/" ) */}} ``` ## Live Example {{ cta_banner( container="md", title="Ready to build?", description="Start with the docs and compose your first page.", action_1_text="Read the docs", action_1_url="/docs/", action_2_text="View shortcodes", action_2_url="/docs/shortcodes/" ) }} ## Parameters | Parameter | Description | | ------------------ | ----------------------------------------------------- | | `container` | Inner content width for the CTA card. | | `eyebrow` | Small uppercase label above the title. | | `title` | Main CTA heading. | | `description` | Supporting copy below the heading. | | `action_1_text` | Primary action label. | | `action_1_url` | Primary action URL. | | `action_1_variant` | Primary action style: `solid`, `outline`, or `ghost`. | | `action_1_color` | Primary action color token. | | `action_2_text` | Optional secondary action label. | | `action_2_url` | Optional secondary action URL. | | `action_2_variant` | Secondary action style. | | `action_2_color` | Secondary action color token. | | `caption` | Small note below the actions. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/cta-inline/ Markdown: https://press.varavel.com/docs/shortcodes/cta-inline/index.md Content file: content/docs/shortcodes/cta-inline.md # CTA Inline > Render a compact horizontal call-to-action section. Canonical HTML: https://press.varavel.com/docs/shortcodes/cta-inline/ Markdown: https://press.varavel.com/docs/shortcodes/cta-inline/index.md `cta_inline` is a compact CTA for mid-page prompts. It keeps copy and actions in one bordered row on desktop and stacks cleanly on mobile. ## When to Use Use it between larger sections when you want to offer a next step without interrupting the page rhythm. ## Usage ```markdown {{/* cta_inline( title="Need the full reference?", action_1_text="Open shortcodes", action_1_url="/docs/shortcodes/" ) */}} ``` ## Live Example {{ cta_inline( container="md", title="Need the full reference?", description="Every shortcode has a dedicated page with examples.", action_1_text="Open shortcodes", action_1_url="/docs/shortcodes/" ) }} ## Parameters | Parameter | Description | | ------------------ | ----------------------------------------------------- | | `container` | Inner content width for the inline CTA. | | `eyebrow` | Small uppercase label above the title. | | `title` | CTA heading. | | `description` | Supporting copy next to the actions. | | `action_1_text` | Primary action label. | | `action_1_url` | Primary action URL. | | `action_1_variant` | Primary action style: `solid`, `outline`, or `ghost`. | | `action_1_color` | Primary action color token. | | `action_2_text` | Optional secondary action label. | | `action_2_url` | Optional secondary action URL. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/faq-accordion/ Markdown: https://press.varavel.com/docs/shortcodes/faq-accordion/index.md Content file: content/docs/shortcodes/faq-accordion.md # FAQ Accordion > Render an Alpine-powered FAQ accordion. Canonical HTML: https://press.varavel.com/docs/shortcodes/faq-accordion/ Markdown: https://press.varavel.com/docs/shortcodes/faq-accordion/index.md `faq_accordion` renders a bordered FAQ section with small Alpine.js state for expanding answers. ## When to Use Use it for objections, pricing questions, implementation details, or any set of questions that would otherwise take too much vertical space. ## Usage ```markdown {{/* faq_accordion( title="Questions", q_1="Do I need a frontend build step?", a_1="No. VaraPress ships bundled assets for consuming sites." ) */}} ``` ## Live Example {{ faq_accordion( container="md", title="Common questions", q_1="Do I need a frontend build step?", a_1="No. VaraPress ships bundled assets for consuming sites.", q_2="Can I use shortcodes in docs?", a_2="Yes. Use them when they make the explanation clearer." ) }} ## Parameters | Parameter | Description | | ------------- | ---------------------------------------------------------- | | `container` | Inner content width for the FAQ section. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy below the heading. | | `q_N` | Question text for item `N`. Supports `q_1` through `q_10`. | | `a_N` | Answer text for item `N`. Supports `a_1` through `a_10`. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/faq-grid/ Markdown: https://press.varavel.com/docs/shortcodes/faq-grid/index.md Content file: content/docs/shortcodes/faq-grid.md # FAQ Grid > Render static FAQ cards in a responsive grid. Canonical HTML: https://press.varavel.com/docs/shortcodes/faq-grid/ Markdown: https://press.varavel.com/docs/shortcodes/faq-grid/index.md `faq_grid` renders concise question-and-answer cards without Alpine.js. ## When to Use Use it when all FAQ answers should remain visible for scanning, SEO, and quick objection handling. ## Usage ```markdown {{/* faq_grid(title="Questions", q_1="Does it need JavaScript?", a_1="No.") */}} ``` ## Live Example {{ faq_grid( container="md", title="Common questions", q_1="Does this require custom CSS?", a_1="No. The shortcode uses the theme tokens and spacing scale.", q_2="Can answers be short?", a_2="Yes. Keep FAQ copy direct and practical.", q_3="When should I use the accordion?", a_3="Use faq_accordion when the page needs a more compact interaction." ) }} ## Parameters | Parameter | Description | | ------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `q_N` | Question text, up to 8. | | `a_N` | Answer text. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/feature-bento-grid/ Markdown: https://press.varavel.com/docs/shortcodes/feature-bento-grid/index.md Content file: content/docs/shortcodes/feature-bento-grid.md # Feature Bento Grid > Render mixed-priority feature cards in a bento layout. Canonical HTML: https://press.varavel.com/docs/shortcodes/feature-bento-grid/ Markdown: https://press.varavel.com/docs/shortcodes/feature-bento-grid/index.md `feature_bento_grid` creates an editorial feature block with one dominant card and smaller supporting cards. ## When to Use Use it when one capability is clearly the lead story and the rest should reinforce it. ## Usage ```markdown {{/* feature_bento_grid(title="Platform", item_1_title="Core workflow") */}} ``` ## Live Example {{ feature_bento_grid( container="md", eyebrow="Bento", title="Feature hierarchy without visual noise", description="Lead with the strongest capability, then surround it with secondary proof.", item_1_icon="workflow", item_1_title="Structured workflow", item_1_desc="A large card provides enough room for the primary narrative.", item_1_meta="Primary", item_2_icon="zap", item_2_title="Fast", item_2_desc="Static output stays quick.", item_3_icon="shield-check", item_3_title="Safe", item_3_desc="Borders and tokens stay predictable." ) }} ## Parameters | Parameter | Description | | -------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `item_N_icon` | Optional icon for feature `N`. | | `item_N_title` | Feature title, up to 5. | | `item_N_desc` | Feature description. | | `item_N_meta` | Optional metadata label. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/feature-cards-compact/ Markdown: https://press.varavel.com/docs/shortcodes/feature-cards-compact/index.md Content file: content/docs/shortcodes/feature-cards-compact.md # Feature Cards Compact > Render dense secondary feature cards. Canonical HTML: https://press.varavel.com/docs/shortcodes/feature-cards-compact/ Markdown: https://press.varavel.com/docs/shortcodes/feature-cards-compact/index.md `feature_cards_compact` is a tighter grid for long capability lists that should stay visually calm. ## When to Use Use it after a main feature section when you need to show breadth without large cards. ## Usage ```markdown {{/* feature_cards_compact(title="Also included", item_1_title="Search") */}} ``` ## Live Example {{ feature_cards_compact( container="md", title="Also included", columns="4", item_1_icon="search", item_1_title="Search", item_1_desc="Find content quickly.", item_2_icon="file-text", item_2_title="Docs", item_2_desc="Reference-ready pages.", item_3_icon="code", item_3_title="Code", item_3_desc="Developer-friendly output.", item_4_icon="globe", item_4_title="Global", item_4_desc="Works across landing use cases." ) }} ## Parameters | Parameter | Description | | -------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `columns` | Desktop columns. Use `2`, `3`, or `4`. | | `item_N_icon` | Optional icon for item `N`. | | `item_N_title` | Item title, up to 8. | | `item_N_desc` | Item description. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/feature-matrix/ Markdown: https://press.varavel.com/docs/shortcodes/feature-matrix/index.md Content file: content/docs/shortcodes/feature-matrix.md # Feature Matrix > Render a compact capability matrix. Canonical HTML: https://press.varavel.com/docs/shortcodes/feature-matrix/ Markdown: https://press.varavel.com/docs/shortcodes/feature-matrix/index.md `feature_matrix` creates a horizontally scrollable matrix for tiers, editions, or implementation paths. ## When to Use Use it when users need to compare multiple structured values across the same feature rows. ## Usage ```markdown {{/* feature_matrix(title="Matrix", col_1="Starter", col_2="Pro", row_1_feature="Sections") */}} ``` ## Live Example {{ feature_matrix( container="md", title="Capability matrix", col_1="Starter", col_2="Pro", col_3="Enterprise", row_1_feature="Landing sections", row_1_col_1="Core", row_1_col_2="Extended", row_1_col_3="Custom", row_2_feature="Support", row_2_col_1="Docs", row_2_col_2="Priority", row_2_col_3="Dedicated", row_3_feature="Branding", row_3_col_1="Theme tokens", row_3_col_2="Advanced", row_3_col_3="Governed" ) }} ## Parameters | Parameter | Description | | --------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `col_1..3` | Matrix column labels. | | `row_N_feature` | Feature label, up to 6 rows. | | `row_N_col_N` | Row value for each column. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/feature-tabs/ Markdown: https://press.varavel.com/docs/shortcodes/feature-tabs/index.md Content file: content/docs/shortcodes/feature-tabs.md # Feature Tabs > Render a tabbed feature showcase powered by Alpine.js. Canonical HTML: https://press.varavel.com/docs/shortcodes/feature-tabs/ Markdown: https://press.varavel.com/docs/shortcodes/feature-tabs/index.md `feature_tabs` renders a compact product tour where visitors can switch between related feature panels. ## When to Use Use it when several ideas share the same visual space: workflows, personas, product modules, or before/after narratives. ## Usage ```markdown {{/* feature_tabs( title="Explore the workflow", tab_1_label="Build", tab_1_title="Compose pages", tab_1_desc="Use shortcodes directly in Markdown." ) */}} ``` ## Live Example {{ feature_tabs( container="md", title="Explore the workflow", tab_1_label="Build", tab_1_icon="zap", tab_1_title="Compose pages", tab_1_desc="Use shortcodes directly in Markdown.", tab_1_bullet_1="Local parameters", tab_1_bullet_2="Responsive sections", tab_2_label="Publish", tab_2_icon="rocket", tab_2_title="Ship static output", tab_2_desc="Build with Zola and deploy the generated site anywhere." ) }} ## Parameters | Parameter | Description | | ---------------- | ----------------------------------------------------------- | | `container` | Inner content width for the tabbed section. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy below the heading. | | `tab_N_label` | Button label for tab `N`. Supports `tab_1` through `tab_4`. | | `tab_N_icon` | Optional icon for tab `N`. | | `tab_N_title` | Panel heading for tab `N`. | | `tab_N_desc` | Panel description for tab `N`. | | `tab_N_meta` | Small metadata line above the panel title. | | `tab_N_bullet_1` | First bullet for tab `N`. | | `tab_N_bullet_2` | Second bullet for tab `N`. | | `tab_N_bullet_3` | Third bullet for tab `N`. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/features-grid/ Markdown: https://press.varavel.com/docs/shortcodes/features-grid/index.md Content file: content/docs/shortcodes/features-grid.md # Features Grid > Render equal feature cards in a responsive grid. Canonical HTML: https://press.varavel.com/docs/shortcodes/features-grid/ Markdown: https://press.varavel.com/docs/shortcodes/features-grid/index.md `features_grid` renders compact feature cards with optional icons, badges, and links. ## When to Use Use it when each feature has similar importance and similar copy length. It is ideal for landing page benefit sections. ## Usage ```markdown {{/* features_grid( title="Everything you need", item_1_icon="zap", item_1_title="Fast", item_1_desc="Static output with minimal JavaScript." ) */}} ``` ## Live Example {{ features_grid( container="md", title="Everything you need", item_1_icon="zap", item_1_title="Fast", item_1_desc="Static output with minimal JavaScript.", item_2_icon="shield-check", item_2_title="Structured", item_2_desc="Design-system tokens keep pages consistent.", item_3_icon="workflow", item_3_title="Composable", item_3_desc="Build pages from focused sections." ) }} ## Parameters | Parameter | Description | | -------------- | -------------------------------------------- | | `container` | Inner content width for the feature grid. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy below the heading. | | `columns` | Desktop column count. Use `2`, `3`, or `4`. | | `item_N_icon` | Optional icon for feature `N`. | | `item_N_title` | Feature title for item `N`. | | `item_N_desc` | Feature description for item `N`. | | `item_N_badge` | Optional badge text for item `N`. | | `item_N_href` | Optional link URL for item `N`. | | `item_N_link` | Optional link label for item `N`. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/features-list/ Markdown: https://press.varavel.com/docs/shortcodes/features-list/index.md Content file: content/docs/shortcodes/features-list.md # Features List > Render a split feature section with a supporting panel. Canonical HTML: https://press.varavel.com/docs/shortcodes/features-list/ Markdown: https://press.varavel.com/docs/shortcodes/features-list/index.md `features_list` combines one explanatory panel with a vertical list of feature rows. ## When to Use Use it when the section needs more explanation than a grid allows, or when one concept supports several detailed capabilities. ## Usage ```markdown {{/* features_list( title="Designed for maintainers", item_1_icon="workflow", item_1_title="Local configuration", item_1_desc="Keep each section configured where it is used." ) */}} ``` ## Live Example {{ features_list( container="md", title="Designed for maintainers", description="Keep pages explicit and easy to review.", panel_title="Locality of behavior", panel_desc="Shortcode parameters live with the content that uses them.", item_1_icon="workflow", item_1_title="Local configuration", item_1_desc="Keep each section configured where it is used.", item_2_icon="layout-dashboard", item_2_title="Predictable layout", item_2_desc="Use the same container scale across sections." ) }} ## Parameters | Parameter | Description | | -------------- | ------------------------------------------------------ | | `container` | Inner content width for the split feature section. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy in the side panel. | | `panel_title` | Title inside the supporting panel. | | `panel_desc` | Description inside the supporting panel. | | `panel_icon` | Icon shown at the top of the supporting panel. | | `item_N_icon` | Optional icon for list item `N`. | | `item_N_title` | Title for list item `N`. | | `item_N_desc` | Description for list item `N`. | | `reverse` | Set to `true` to swap panel and list order on desktop. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/footer-simple/ Markdown: https://press.varavel.com/docs/shortcodes/footer-simple/index.md Content file: content/docs/shortcodes/footer-simple.md # Footer Simple > Render a full-width footer with centered content. Canonical HTML: https://press.varavel.com/docs/shortcodes/footer-simple/ Markdown: https://press.varavel.com/docs/shortcodes/footer-simple/index.md `footer_simple` renders the standard landing footer with copyright text, optional links, and an optional GitHub icon. ## When to Use Use it at the end of landing pages and simple marketing pages. Keep footer links minimal so the primary conversion path stays clear. ## Usage ```markdown {{/* footer_simple( container="lg", links="Docs|/docs,GitHub|https://github.com/varavelio/varapress" ) */}} ``` ## Live Example {{ footer_simple( container="md", links="Docs|/docs,Shortcodes|/docs/shortcodes", show_github="false" ) }} ## Parameters | Parameter | Description | | ------------- | -------------------------------------------- | | `container` | Inner content width for the footer. | | `copyright` | Optional custom copyright text. | | `links` | Comma-separated `label | | `show_github` | Set to `false` to hide the GitHub icon link. | | `class` | Additional CSS classes on the footer. | --- Source: https://press.varavel.com/docs/shortcodes/header-base/ Markdown: https://press.varavel.com/docs/shortcodes/header-base/index.md Content file: content/docs/shortcodes/header-base.md # Header Base > Render a full-width landing header with centered navigation. Canonical HTML: https://press.varavel.com/docs/shortcodes/header-base/ Markdown: https://press.varavel.com/docs/shortcodes/header-base/index.md `header_base` renders the standard landing header with logo, optional title, desktop navigation, mobile menu, CTA, and theme toggle. ## When to Use Use it at the top of landing pages that need lightweight navigation. Keep the menu short and reserve the CTA for the page's primary action. ## Usage ```markdown {{/* header_base( container="lg", menu="Docs|/docs,Shortcodes|/docs/shortcodes", cta_text="Start", cta_url="/docs" ) */}} ``` ## Live Example {{ header_base( container="md", menu="Docs|/docs,Shortcodes|/docs/shortcodes", cta_text="Start", cta_url="/docs" ) }} ## Parameters | Parameter | Description | | ------------- | -------------------------------------------------- | | `container` | Inner content width for the header. | | `logo_light` | Logo URL used in light mode. | | `logo_dark` | Logo URL used in dark mode. | | `show_title` | Set to `false` to hide the site title. | | `menu` | Comma-separated `label | | `cta_text` | Optional header CTA label. | | `cta_url` | Optional header CTA URL. | | `cta_variant` | CTA style: `solid`, `outline`, or `ghost`. | | `cta_color` | CTA color token. | | `show_theme` | Set to `false` to hide the theme toggle. | | `sticky` | Set to `true` to keep the header fixed at the top. | | `class` | Additional CSS classes on the header. | --- Source: https://press.varavel.com/docs/shortcodes/hero-centered/ Markdown: https://press.varavel.com/docs/shortcodes/hero-centered/index.md Content file: content/docs/shortcodes/hero-centered.md # Hero Centered > Render a centered hero section for direct landing pages. Canonical HTML: https://press.varavel.com/docs/shortcodes/hero-centered/ Markdown: https://press.varavel.com/docs/shortcodes/hero-centered/index.md `hero_centered` renders a focused hero with announcement, heading, description, actions, and caption. ## When to Use Use it when the page needs a clean, direct opening without a visual panel. It is best for simple product pages, docs home pages, and compact launch pages. ## Usage ```markdown {{/* hero_centered( title="Build faster with VaraPress", description="Compose landing pages directly in Markdown.", action_1_text="Get started", action_1_url="/docs" ) */}} ``` ## Live Example {{ hero_centered( container="md", announcement="Shortcodes included", announcement_url="/docs/shortcodes/", title="Build faster with VaraPress", description="Compose landing pages directly in Markdown.", action_1_text="Get started", action_1_url="/docs", action_2_text="View reference", action_2_url="/docs/shortcodes/" ) }} ## Parameters | Parameter | Description | | ------------------ | -------------------------------------------- | | `container` | Inner content width for the hero. | | `title` | Main hero heading. Supports HTML. | | `description` | Supporting hero copy. Supports HTML. | | `announcement` | Optional pill link text above the heading. | | `announcement_url` | URL for the announcement link. | | `action_1_text` | Primary action label. | | `action_1_url` | Primary action URL. | | `action_1_variant` | Primary action style. | | `action_1_color` | Primary action color token. | | `action_2_text` | Optional secondary action label. | | `action_2_url` | Optional secondary action URL. | | `action_2_variant` | Secondary action style. | | `action_2_color` | Secondary action color token. | | `caption` | Small note below the actions. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/hero-split/ Markdown: https://press.varavel.com/docs/shortcodes/hero-split/index.md Content file: content/docs/shortcodes/hero-split.md # Hero Split > Render a split hero with copy and a proof panel. Canonical HTML: https://press.varavel.com/docs/shortcodes/hero-split/ Markdown: https://press.varavel.com/docs/shortcodes/hero-split/index.md `hero_split` renders a two-column hero with messaging on one side and a visual or proof panel on the other. ## When to Use Use it when the first viewport needs both positioning and evidence. It works well for product launches, platform pages, and pages with strong proof points. ## Usage ```markdown {{/* hero_split( title="Launch a precise product site", description="Use shortcodes to compose the page.", action_1_text="Get started", action_1_url="/docs", panel_title="Launch checklist" ) */}} ``` ## Live Example {{ hero_split( container="md", eyebrow="Landing builder", title="Launch a precise product site", description="Use shortcodes to compose the page.", action_1_text="Get started", action_1_url="/docs", panel_label="Theme kit", panel_title="Launch checklist", panel_desc="Static output, bundled assets, and focused sections.", metric_1_value="20", metric_1_label="shortcodes", check_1="Full-width sections", check_2="Centered containers" ) }} ## Parameters | Parameter | Description | | ---------------- | ------------------------------------------------------- | | `container` | Inner content width for the split hero. | | `eyebrow` | Small label above the heading. | | `title` | Main hero heading. Supports HTML. | | `description` | Supporting hero copy. Supports HTML. | | `action_1_text` | Primary action label. | | `action_1_url` | Primary action URL. | | `action_2_text` | Optional secondary action label. | | `action_2_url` | Optional secondary action URL. | | `caption` | Small note below the actions. | | `image_src` | Optional image URL for the visual panel. | | `image_alt` | Alt text for `image_src`. | | `panel_label` | Small label inside the proof panel. | | `panel_title` | Proof panel heading. | | `panel_desc` | Proof panel supporting copy. | | `metric_N_value` | Metric value for panel metric `N`. | | `metric_N_label` | Metric label for panel metric `N`. | | `check_N` | Checklist item inside the proof panel. | | `bg` | Full-width section background token. | | `reverse` | Set to `true` to put the visual panel first on desktop. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/icon/ Markdown: https://press.varavel.com/docs/shortcodes/icon/index.md Content file: content/docs/shortcodes/icon.md # Icon > Render an inline SVG icon from the bundled icon library. Canonical HTML: https://press.varavel.com/docs/shortcodes/icon/ Markdown: https://press.varavel.com/docs/shortcodes/icon/index.md `icon` renders one SVG from `static/icons/`. It is the Markdown-facing wrapper around the icon macro used by templates. ## When to Use Use it inline in docs or marketing copy when a small visual cue improves scanability. Only reference icons that already exist in the theme. ## Usage ```markdown {{/* icon(name="sparkles", class="inline size-5 text-content") */}} ``` ## Live Example Varavel-ready {{ icon(name="sparkles", class="inline size-5 text-content") }} and bundled with the theme. ## Parameters | Parameter | Description | | --------- | ------------------------------------------ | | `name` | Icon filename without `.svg`. Required. | | `class` | Additional CSS classes on the SVG element. | --- Source: https://press.varavel.com/docs/shortcodes/integration-cards/ Markdown: https://press.varavel.com/docs/shortcodes/integration-cards/index.md Content file: content/docs/shortcodes/integration-cards.md # Integration Cards > Render integration, partner, or stack cards. Canonical HTML: https://press.varavel.com/docs/shortcodes/integration-cards/ Markdown: https://press.varavel.com/docs/shortcodes/integration-cards/index.md `integration_cards` renders linked or static cards for tools, platforms, and ecosystem integrations. ## When to Use Use it to show compatible tools, deployment targets, data sources, or technical stack components. ## Usage ```markdown {{/* integration_cards(title="Works with", item_1_icon="github", item_1_name="GitHub") */}} ``` ## Live Example {{ integration_cards( container="md", title="Works with your stack", description="Show integrations without leaving the monochrome design system.", item_1_icon="github", item_1_name="GitHub", item_1_desc="Source control and workflows.", item_1_status="Native", item_2_icon="terminal", item_2_name="CLI", item_2_desc="Local-first build commands.", item_2_status="Built in", item_3_icon="globe", item_3_name="Static hosts", item_3_desc="Deploy anywhere static files work.", item_3_status="Portable" ) }} ## Parameters | Parameter | Description | | --------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `columns` | Desktop columns. Use `2` or `3`. | | `item_N_icon` | Optional icon name. | | `item_N_name` | Integration name, up to 6. | | `item_N_desc` | Integration description. | | `item_N_status` | Optional status badge. | | `item_N_href` | Optional card URL. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/lead-capture-card/ Markdown: https://press.varavel.com/docs/shortcodes/lead-capture-card/index.md Content file: content/docs/shortcodes/lead-capture-card.md # Lead Capture Card > Render a compact lead capture form section. Canonical HTML: https://press.varavel.com/docs/shortcodes/lead-capture-card/ Markdown: https://press.varavel.com/docs/shortcodes/lead-capture-card/index.md `lead_capture_card` renders a bordered form section for newsletters, waitlists, demo requests, and lightweight lead capture. ## When to Use Use it when the desired conversion is an email or contact submission. If `form_action` is omitted, the shortcode uses a local Alpine confirmation instead of submitting to a backend. ## Usage ```markdown {{/* lead_capture_card( title="Join the waitlist", description="Get notified when the next release ships.", button_text="Join" ) */}} ``` ## Live Example {{ lead_capture_card( container="md", eyebrow="Stay updated", title="Join the waitlist", description="Get notified when the next release ships.", button_text="Join", note="No backend is required for this local preview." ) }} ## Parameters | Parameter | Description | | ------------------- | ------------------------------------------------------------------------- | | `container` | Inner content width for the lead capture section. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Form section heading. | | `description` | Supporting copy beside the form. | | `form_action` | Optional form action URL. If omitted, Alpine shows a local success state. | | `method` | Form method. Defaults to `post`. | | `show_name` | Set to `true` to show a name field. | | `name_label` | Label for the optional name field. | | `name_placeholder` | Placeholder for the optional name field. | | `email_label` | Label for the email field. | | `email_placeholder` | Placeholder for the email field. | | `button_text` | Submit button label. | | `button_color` | Submit button color token. | | `note` | Small note below the form. | | `success_message` | Message shown after local submission when no `form_action` is set. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/logo-cloud-grid/ Markdown: https://press.varavel.com/docs/shortcodes/logo-cloud-grid/index.md Content file: content/docs/shortcodes/logo-cloud-grid.md # Logo Cloud Grid > Render a trusted-by logo grid with text fallback. Canonical HTML: https://press.varavel.com/docs/shortcodes/logo-cloud-grid/ Markdown: https://press.varavel.com/docs/shortcodes/logo-cloud-grid/index.md `logo_cloud_grid` renders a bordered grid for customer logos, partner marks, or text-only trust signals. ## When to Use Use it when recognizable names reduce uncertainty. Prefer fewer, stronger logos over a crowded wall of weak proof. ## Usage ```markdown {{/* logo_cloud_grid( title="Trusted by builders", logo_1_name="Varavel", logo_2_name="Zola" ) */}} ``` ## Live Example {{ logo_cloud_grid( container="md", title="Trusted by builders", logo_1_name="Varavel", logo_2_name="Zola", logo_3_name="Tailwind", logo_4_name="Alpine" ) }} ## Parameters | Parameter | Description | | ------------- | ----------------------------------------------------- | | `container` | Inner content width for the logo grid. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy below the heading. | | `columns` | Desktop column count. Use `2`, `3`, `4`, `5`, or `6`. | | `logo_N_name` | Logo name for item `N`. Used as text fallback. | | `logo_N_src` | Optional image URL for logo item `N`. | | `logo_N_alt` | Optional alt text for logo item `N`. | | `logo_N_href` | Optional link URL for logo item `N`. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/logo-cloud-marquee/ Markdown: https://press.varavel.com/docs/shortcodes/logo-cloud-marquee/index.md Content file: content/docs/shortcodes/logo-cloud-marquee.md # Logo Cloud Marquee > Render a left-moving trusted-by logo rail. Canonical HTML: https://press.varavel.com/docs/shortcodes/logo-cloud-marquee/ Markdown: https://press.varavel.com/docs/shortcodes/logo-cloud-marquee/index.md `logo_cloud_marquee` renders a horizontally scrolling logo cloud that moves left and pauses on hover. ## When to Use Use it when the landing page benefits from a broad trust signal but a static grid would consume too much vertical space. ## Usage ```markdown {{/* logo_cloud_marquee(title="Trusted by teams", logo_1_name="Varavel", logo_2_name="Zola") */}} ``` ## Live Example {{ logo_cloud_marquee( container="md", eyebrow="Trusted by", title="A moving logo cloud", description="Text fallbacks make the component useful even before final logo assets are ready.", logo_1_name="Varavel", logo_2_name="Zola", logo_3_name="Tailwind", logo_4_name="Alpine", logo_5_name="Geist", logo_6_name="GitHub" ) }} ## Parameters | Parameter | Description | | ------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `duration` | CSS animation duration. Defaults to `36s`. | | `logo_N_name` | Logo name for item `N`, up to 8. | | `logo_N_src` | Optional logo image URL. | | `logo_N_alt` | Optional logo alt text. | | `logo_N_href` | Optional logo URL. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/metrics-panel/ Markdown: https://press.varavel.com/docs/shortcodes/metrics-panel/index.md Content file: content/docs/shortcodes/metrics-panel.md # Metrics Panel > Render narrative proof beside a metric card grid. Canonical HTML: https://press.varavel.com/docs/shortcodes/metrics-panel/ Markdown: https://press.varavel.com/docs/shortcodes/metrics-panel/index.md `metrics_panel` pairs explanatory copy with a bordered metric grid for stronger quantitative proof. ## When to Use Use it when metrics need context and should not be reduced to a simple strip. ## Usage ```markdown {{/* metrics_panel(title="Proof", metric_1_value="99%", metric_1_label="Uptime") */}} ``` ## Live Example {{ metrics_panel( container="md", eyebrow="Proof", title="Quantify the outcome", description="Use metrics beside checklist details to connect numbers with product behavior.", check_1="Designed for static performance", check_2="Uses semantic design tokens", metric_1_value="24", metric_1_label="New shortcodes", metric_2_value="1", metric_2_label="Breakpoint", metric_3_value="0", metric_3_label="External UI dependencies", metric_4_value="100%", metric_4_label="Theme integrated" ) }} ## Parameters | Parameter | Description | | ---------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `metric_N_value` | Metric value, up to 4. | | `metric_N_label` | Metric label. | | `check_N` | Checklist item, up to 4. | | `reverse` | Use `true` to place metrics first. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/metrics-strip/ Markdown: https://press.varavel.com/docs/shortcodes/metrics-strip/index.md Content file: content/docs/shortcodes/metrics-strip.md # Metrics Strip > Render a compact horizontal proof strip. Canonical HTML: https://press.varavel.com/docs/shortcodes/metrics-strip/ Markdown: https://press.varavel.com/docs/shortcodes/metrics-strip/index.md `metrics_strip` renders a dense row of statistics for mid-page proof without a full section header. ## When to Use Use it between landing sections when visitors need a quick confidence boost. ## Usage ```markdown {{/* metrics_strip(label="Proof", stat_1_value="10k", stat_1_label="Downloads") */}} ``` ## Live Example {{ metrics_strip( container="md", label="Theme proof", stat_1_value="24", stat_1_label="New sections", stat_2_value="4px", stat_2_label="Spacing grid", stat_3_value="64rem", stat_3_label="Single breakpoint", stat_4_value="0", stat_4_label="Heavy effects" ) }} ## Parameters | Parameter | Description | | -------------- | -------------------------------------------- | | `container` | Inner content width. | | `label` | Optional leading label. | | `stat_N_value` | Statistic value, up to 4. | | `stat_N_label` | Statistic label. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/newsletter-split/ Markdown: https://press.varavel.com/docs/shortcodes/newsletter-split/index.md Content file: content/docs/shortcodes/newsletter-split.md # Newsletter Split > Render newsletter or waitlist copy beside a compact form. Canonical HTML: https://press.varavel.com/docs/shortcodes/newsletter-split/ Markdown: https://press.varavel.com/docs/shortcodes/newsletter-split/index.md `newsletter_split` renders a clean email capture section with optional inline success behavior. ## When to Use Use it for newsletters, early access lists, product update subscriptions, or campaign-specific lead capture. ## Usage ```markdown {{/* newsletter_split(title="Stay updated", button_text="Join") */}} ``` ## Live Example {{ newsletter_split( container="md", eyebrow="Updates", title="Stay close to the release", description="Collect subscribers without adding backend-specific assumptions to the theme.", button_text="Join the list", note="No spam. Use a real form action for production submissions." ) }} ## Parameters | Parameter | Description | | ------------------- | --------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `form_action` | Optional form action URL. | | `method` | Form method. Defaults to `post`. | | `email_placeholder` | Input placeholder. | | `button_text` | Submit button label. | | `note` | Small note below the form. | | `success_message` | Inline success message when no action exists. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/pricing-cards/ Markdown: https://press.varavel.com/docs/shortcodes/pricing-cards/index.md Content file: content/docs/shortcodes/pricing-cards.md # Pricing Cards > Render responsive pricing cards for plans or packages. Canonical HTML: https://press.varavel.com/docs/shortcodes/pricing-cards/ Markdown: https://press.varavel.com/docs/shortcodes/pricing-cards/index.md `pricing_cards` renders up to three plan cards with price, description, CTA, features, badges, and featured state. ## When to Use Use it on product pages where visitors need to compare packages. Keep plan names clear and feature lists short. ## Usage ```markdown {{/* pricing_cards( plan_1_name="Starter", plan_1_price="$19", plan_1_period="/month", plan_1_cta_text="Start" ) */}} ``` ## Live Example {{ pricing_cards( container="md", title="Simple pricing", plan_1_name="Starter", plan_1_price="$19", plan_1_period="/month", plan_1_cta_text="Start", plan_1_feat_1="Landing sections", plan_1_feat_2="Docs layout", plan_2_name="Pro", plan_2_price="$49", plan_2_period="/month", plan_2_badge="Popular", plan_2_featured="true", plan_2_cta_text="Upgrade", plan_2_cta_variant="solid", plan_2_feat_1="Everything in Starter", plan_2_feat_2="Priority workflows" ) }} ## Parameters | Parameter | Description | | -------------------- | ------------------------------------------------------------------- | | `container` | Inner content width for the pricing section. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy below the heading. | | `plan_N_name` | Plan name for card `N`. Supports `plan_1` through `plan_3`. | | `plan_N_price` | Price text for plan `N`, such as `$19`. | | `plan_N_period` | Billing period text for plan `N`, such as `/month`. | | `plan_N_desc` | Short description for plan `N`. | | `plan_N_badge` | Optional badge text for plan `N`. | | `plan_N_featured` | Set to `true` to highlight plan `N`. | | `plan_N_cta_text` | CTA label for plan `N`. | | `plan_N_cta_url` | CTA URL for plan `N`. | | `plan_N_cta_variant` | CTA style for plan `N`. | | `plan_N_cta_color` | CTA color token for plan `N`. | | `plan_N_feat_1` | First feature for plan `N`. Supports feature slots `1` through `5`. | | `plan_N_footnote` | Optional small note below the price. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/problem-solution/ Markdown: https://press.varavel.com/docs/shortcodes/problem-solution/index.md Content file: content/docs/shortcodes/problem-solution.md # Problem Solution > Render a pain-versus-solution narrative pair. Canonical HTML: https://press.varavel.com/docs/shortcodes/problem-solution/ Markdown: https://press.varavel.com/docs/shortcodes/problem-solution/index.md `problem_solution` frames the before state and the after state as two balanced cards. ## When to Use Use it when visitors need to recognize the current pain before understanding the proposed solution. ## Usage ```markdown {{/* problem_solution(title="From chaos to system", problem_title="Before", solution_title="After") */}} ``` ## Live Example {{ problem_solution( container="md", eyebrow="Positioning", title="From inconsistent pages to a system", description="Make the contrast explicit without introducing decorative color.", problem_title="Before", problem_desc="Every landing page invents its own spacing and component structure.", problem_1="Repeated one-off sections", problem_2="Unclear mobile behavior", solution_title="After", solution_desc="A consistent shortcode catalog gives teams clean defaults.", solution_1="Shared section rhythm", solution_2="Reusable proof patterns" ) }} ## Parameters | Parameter | Description | | ---------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `problem_title` | Problem card title. | | `problem_desc` | Problem card description. | | `problem_N` | Problem points, up to 4. | | `solution_title` | Solution card title. | | `solution_desc` | Solution card description. | | `solution_N` | Solution points, up to 4. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/product-showcase/ Markdown: https://press.varavel.com/docs/shortcodes/product-showcase/index.md Content file: content/docs/shortcodes/product-showcase.md # Product Showcase > Render product narrative beside a structured UI mock. Canonical HTML: https://press.varavel.com/docs/shortcodes/product-showcase/ Markdown: https://press.varavel.com/docs/shortcodes/product-showcase/index.md `product_showcase` presents capabilities beside a product-style card with a metric and system rows. ## When to Use Use it when explaining what a product does and why the interface supports the promise. ## Usage ```markdown {{/* product_showcase(title="Product", panel_title="Dashboard", panel_metric="99%") */}} ``` ## Live Example {{ product_showcase( container="md", eyebrow="Showcase", title="Explain the product clearly", description="Use the mock panel for abstract products, services, or internal platforms.", panel_label="Dashboard", panel_title="Launch readiness", panel_metric="96%", item_1_icon="workflow", item_1_title="Clear workflow", item_1_desc="Turn process into visible structure.", item_2_icon="chart-line", item_2_title="Outcome focused", item_2_desc="Anchor the visual around measurable progress." ) }} ## Parameters | Parameter | Description | | -------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `panel_label` | Mock panel label. | | `panel_title` | Mock panel title. | | `panel_metric` | Prominent metric text. | | `item_N_icon` | Capability icon, up to 3. | | `item_N_title` | Capability title. | | `item_N_desc` | Capability description. | | `reverse` | Use `true` to place mock first. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/quote-spotlight/ Markdown: https://press.varavel.com/docs/shortcodes/quote-spotlight/index.md Content file: content/docs/shortcodes/quote-spotlight.md # Quote Spotlight > Render a large testimonial or editorial quote. Canonical HTML: https://press.varavel.com/docs/shortcodes/quote-spotlight/ Markdown: https://press.varavel.com/docs/shortcodes/quote-spotlight/index.md `quote_spotlight` gives a single quote enough space to act as a trust-building section. ## When to Use Use it when one quote is stronger than a grid of shorter testimonials. ## Usage ```markdown {{/* quote_spotlight(quote="This changed our launch process.", name="A. Founder") */}} ``` ## Live Example {{ quote_spotlight( container="md", quote="The shortcode catalog gives us enough structure to move fast without making every landing page look improvised.", name="A. Founder", role="Product lead", metric_value="3x", metric_label="Faster page assembly" ) }} ## Parameters | Parameter | Description | | -------------- | -------------------------------------------- | | `container` | Inner content width. | | `quote` | Quote text. | | `name` | Author name. | | `role` | Author role or company. | | `avatar` | Optional avatar URL. | | `metric_value` | Optional supporting metric. | | `metric_label` | Optional metric label. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/resource-cards/ Markdown: https://press.varavel.com/docs/shortcodes/resource-cards/index.md Content file: content/docs/shortcodes/resource-cards.md # Resource Cards > Render linked resource, article, or documentation cards. Canonical HTML: https://press.varavel.com/docs/shortcodes/resource-cards/ Markdown: https://press.varavel.com/docs/shortcodes/resource-cards/index.md `resource_cards` renders a clean grid for related content and next-step resources. ## When to Use Use it at the end of pages to direct readers to docs, articles, downloads, or playbooks. ## Usage ```markdown {{/* resource_cards(title="Keep reading", item_1_type="Guide", item_1_title="Setup") */}} ``` ## Live Example {{ resource_cards( container="md", title="Keep building", description="Point visitors to practical next steps.", item_1_type="Guide", item_1_title="Installation", item_1_desc="Start using the theme in a Zola site.", item_1_href="/docs/getting-started/installation/", item_2_type="Reference", item_2_title="Shortcodes", item_2_desc="Browse every reusable landing section.", item_2_href="/docs/shortcodes/", item_3_type="Config", item_3_title="Theme options", item_3_desc="Tune the site for your project.", item_3_href="/docs/getting-started/configuration/" ) }} ## Parameters | Parameter | Description | | -------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `item_N_type` | Resource type label, up to 4. | | `item_N_title` | Resource title. | | `item_N_desc` | Resource description. | | `item_N_href` | Resource URL. | | `item_N_meta` | Optional link metadata text. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/security-badges/ Markdown: https://press.varavel.com/docs/shortcodes/security-badges/index.md Content file: content/docs/shortcodes/security-badges.md # Security Badges > Render trust, compliance, and reliability badges. Canonical HTML: https://press.varavel.com/docs/shortcodes/security-badges/ Markdown: https://press.varavel.com/docs/shortcodes/security-badges/index.md `security_badges` renders uniform cards for trust claims without introducing decorative color. ## When to Use Use it for security, privacy, compliance, infrastructure, or reliability proof points. ## Usage ```markdown {{/* security_badges(title="Trust by default", item_1_icon="shield-check", item_1_title="Secure") */}} ``` ## Live Example {{ security_badges( container="md", eyebrow="Trust", title="Trust signals without noise", description="Keep claims structured and easy to scan.", item_1_icon="shield-check", item_1_title="Secure defaults", item_1_desc="Clear structure and no external UI dependencies.", item_2_icon="lock-keyhole", item_2_title="Private by design", item_2_desc="Use static forms with explicit backend choices.", item_3_icon="server", item_3_title="Portable output", item_3_desc="Deploy generated files on standard static hosts." ) }} ## Parameters | Parameter | Description | | -------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `item_N_icon` | Badge icon, up to 6. | | `item_N_title` | Badge title. | | `item_N_desc` | Badge description. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/social-proof-strip/ Markdown: https://press.varavel.com/docs/shortcodes/social-proof-strip/index.md Content file: content/docs/shortcodes/social-proof-strip.md # Social Proof Strip > Render compact ratings, avatars, and trust labels. Canonical HTML: https://press.varavel.com/docs/shortcodes/social-proof-strip/ Markdown: https://press.varavel.com/docs/shortcodes/social-proof-strip/index.md `social_proof_strip` is a compact proof component for ratings, customers, and credibility labels. ## When to Use Use it near heroes or CTAs when social proof should support conversion without becoming a full section. ## Usage ```markdown {{/* social_proof_strip(text="Loved by teams", label_1="5-star") */}} ``` ## Live Example {{ social_proof_strip( container="md", text="Used to assemble clean landing pages without custom layout work.", rating="5", label_1="5-star feedback", label_2="Production ready", label_3="Mobile first" ) }} ## Parameters | Parameter | Description | | ----------- | -------------------------------------------- | | `container` | Inner content width. | | `text` | Proof copy. | | `rating` | Number of filled stars. Defaults to `5`. | | `avatar_N` | Optional avatar image URL, up to 4. | | `label_N` | Optional proof labels, up to 3. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/stats-grid/ Markdown: https://press.varavel.com/docs/shortcodes/stats-grid/index.md Content file: content/docs/shortcodes/stats-grid.md # Stats Grid > Render numerical stats in a responsive grid. Canonical HTML: https://press.varavel.com/docs/shortcodes/stats-grid/ Markdown: https://press.varavel.com/docs/shortcodes/stats-grid/index.md `stats_grid` renders key numbers with labels and optional descriptions. ## When to Use Use it when numbers provide real proof: performance, adoption, reliability, coverage, or time saved. Avoid vanity metrics that do not help the visitor decide. ## Usage ```markdown {{/* stats_grid( stat_1_value="10x", stat_1_label="Faster launches" ) */}} ``` ## Live Example {{ stats_grid( container="md", title="Built for static speed", stat_1_value="0", stat_1_label="runtime server", stat_2_value="20", stat_2_label="shortcodes", stat_3_value="1", stat_3_label="breakpoint" ) }} ## Parameters | Parameter | Description | | -------------- | -------------------------------------------- | | `container` | Inner content width for the stats section. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy below the heading. | | `columns` | Desktop column count. Use `2`, `3`, or `4`. | | `stat_N_value` | Main numeric value for stat `N`. | | `stat_N_label` | Label for stat `N`. | | `stat_N_desc` | Optional description for stat `N`. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/steps-cards/ Markdown: https://press.varavel.com/docs/shortcodes/steps-cards/index.md Content file: content/docs/shortcodes/steps-cards.md # Steps Cards > Render numbered process steps in cards. Canonical HTML: https://press.varavel.com/docs/shortcodes/steps-cards/ Markdown: https://press.varavel.com/docs/shortcodes/steps-cards/index.md `steps_cards` renders a sequence of numbered cards with optional icons and links. ## When to Use Use it for onboarding, implementation flows, launch checklists, or any process where order matters. ## Usage ```markdown {{/* steps_cards( item_1_title="Install", item_1_desc="Add the theme to your Zola project." ) */}} ``` ## Live Example {{ steps_cards( container="md", title="From install to launch", item_1_icon="download", item_1_title="Install", item_1_desc="Add the theme to your Zola project.", item_2_icon="settings", item_2_title="Configure", item_2_desc="Set metadata, theme options, and page structure.", item_3_icon="rocket", item_3_title="Launch", item_3_desc="Build with Zola and deploy static output." ) }} ## Parameters | Parameter | Description | | -------------- | ------------------------------------------------------------------- | | `container` | Inner content width for the steps section. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy below the heading. | | `columns` | Desktop column count. Use `2`, `3`, or `4`. | | `item_N_step` | Optional step number for item `N`. Defaults to automatic numbering. | | `item_N_title` | Step title for item `N`. | | `item_N_desc` | Step description for item `N`. | | `item_N_icon` | Optional icon for item `N`. | | `item_N_href` | Optional link URL for item `N`. | | `item_N_link` | Optional link label for item `N`. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/team-grid/ Markdown: https://press.varavel.com/docs/shortcodes/team-grid/index.md Content file: content/docs/shortcodes/team-grid.md # Team Grid > Render team, advisor, or expert profile cards. Canonical HTML: https://press.varavel.com/docs/shortcodes/team-grid/ Markdown: https://press.varavel.com/docs/shortcodes/team-grid/index.md `team_grid` renders four profile cards with image fallbacks, role text, short bios, and optional links. ## When to Use Use it for founder sections, service teams, advisory boards, expert rosters, or community pages. ## Usage ```markdown {{/* team_grid(title="Meet the team", member_1_name="Alex", member_1_role="Founder") */}} ``` ## Live Example {{ team_grid( container="md", eyebrow="Team", title="Built by focused operators", description="Use image URLs when available or rely on clean initial fallbacks.", member_1_name="Alex Rivera", member_1_role="Product", member_1_bio="Turns strategy into shippable sections.", member_2_name="Maya Chen", member_2_role="Design", member_2_bio="Keeps the system minimal and precise.", member_3_name="Jon Bell", member_3_role="Engineering", member_3_bio="Protects performance and maintainability." ) }} ## Parameters | Parameter | Description | | ----------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `member_N_name` | Member name, up to 4. | | `member_N_role` | Member role. | | `member_N_bio` | Short bio. | | `member_N_avatar` | Optional avatar image URL. | | `member_N_href` | Optional profile URL. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/testimonials-grid/ Markdown: https://press.varavel.com/docs/shortcodes/testimonials-grid/index.md Content file: content/docs/shortcodes/testimonials-grid.md # Testimonials Grid > Render testimonial cards with author metadata and ratings. Canonical HTML: https://press.varavel.com/docs/shortcodes/testimonials-grid/ Markdown: https://press.varavel.com/docs/shortcodes/testimonials-grid/index.md `testimonials_grid` renders quotes in bordered cards with optional avatar, role, company, and star rating. ## When to Use Use it when customer proof helps reduce risk. Keep quotes specific and tied to outcomes rather than generic praise. ## Usage ```markdown {{/* testimonials_grid( item_1_quote="VaraPress made our launch page simple to ship.", item_1_name="Ada Lovelace", item_1_role="Engineer" ) */}} ``` ## Live Example {{ testimonials_grid( container="md", title="What builders say", item_1_quote="VaraPress made our launch page simple to ship.", item_1_name="Ada Lovelace", item_1_role="Engineer", item_1_rating="5", item_2_quote="The docs and landing sections feel like one coherent system.", item_2_name="Grace Hopper", item_2_role="Maintainer", item_2_rating="5" ) }} ## Parameters | Parameter | Description | | ---------------- | ------------------------------------------------- | | `container` | Inner content width for the testimonials section. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy below the heading. | | `columns` | Desktop column count. Use `2` or `3`. | | `item_N_quote` | Quote text for testimonial `N`. | | `item_N_name` | Author name for testimonial `N`. | | `item_N_role` | Optional author role for testimonial `N`. | | `item_N_company` | Optional company name for testimonial `N`. | | `item_N_avatar` | Optional avatar image URL for testimonial `N`. | | `item_N_rating` | Optional star rating from `1` to `5`. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. | --- Source: https://press.varavel.com/docs/shortcodes/timeline-vertical/ Markdown: https://press.varavel.com/docs/shortcodes/timeline-vertical/index.md Content file: content/docs/shortcodes/timeline-vertical.md # Timeline Vertical > Render roadmap, process, or milestone items. Canonical HTML: https://press.varavel.com/docs/shortcodes/timeline-vertical/ Markdown: https://press.varavel.com/docs/shortcodes/timeline-vertical/index.md `timeline_vertical` renders a structured timeline with date/step labels and optional icons. ## When to Use Use it for roadmaps, project plans, onboarding flows, implementation timelines, or launch sequences. ## Usage ```markdown {{/* timeline_vertical(title="Roadmap", item_1_date="Step 1", item_1_title="Plan") */}} ``` ## Live Example {{ timeline_vertical( container="md", eyebrow="Plan", title="A clear launch sequence", description="Pair high-level copy with a structured milestone list.", item_1_date="Step 01", item_1_icon="search", item_1_title="Audit the page", item_1_desc="Identify the sections and proof points needed.", item_2_date="Step 02", item_2_icon="blocks", item_2_title="Compose shortcodes", item_2_desc="Assemble clean sections with consistent spacing.", item_3_date="Step 03", item_3_icon="rocket", item_3_title="Ship and iterate", item_3_desc="Run the build and refine copy against the result." ) }} ## Parameters | Parameter | Description | | -------------- | -------------------------------------------- | | `container` | Inner content width. | | `eyebrow` | Small uppercase label above the heading. | | `title` | Section heading. | | `description` | Supporting copy. | | `item_N_date` | Timeline date or step label, up to 5. | | `item_N_title` | Timeline item title. | | `item_N_desc` | Timeline item description. | | `item_N_icon` | Optional icon name. | | `bg` | Full-width section background token. | | `class` | Additional CSS classes on the outer section. |