Combinations

Combining multiple options together for real-world use cases.

Typed Accordion

An accordion group where each section has a different type:

Overview

Start with a high-level overview of the feature. This section is open by default.

Known Issues

Current limitations and known bugs.

Best Practices

Recommended approaches for common use cases.

Migration Guide

Breaking changes when upgrading from v1 to v2.

Icon + Type + Open

Release Notes

Version 2.0 brings major improvements:

• Faster build times
• New gradient presets
• Improved dark mode

Accordion with Icons

Getting Started

Quick start instructions for new users.

Configuration

Detailed configuration reference.

Deployment

Deploy your site to GitHub Pages, Netlify, or Vercel.

Troubleshooting

Common issues and their solutions.

Gradient Theme

The gradient type uses your site’s animated theme gradient on the summary bar and a subdued tint in the body:

Animated Gradient

This details section uses the site’s accent gradient colors with a smooth shifting animation.

Gradient (open)

A gradient section that starts expanded, with a custom icon.

• The summary bar has a vivid animated gradient
• The body has a subtle, subdued version
• Respects dark mode automatically

Gradient Accordion A

First gradient accordion panel.

Gradient Accordion B

Second gradient accordion panel.

Nested Accordion

An outer accordion with nested content:

Frontend

Frontend technologies used:

HTML/CSS

Quarto generates semantic HTML with SCSS theming.

JavaScript

Custom JS for interactive features like accordion groups, dark mode toggle, and keyboard navigation.

Backend

Backend technologies used:

Python

Core logic for parsing, rendering, and configuration.

Lua

Quarto shortcode extensions for custom components.