Overview

Lists are a fundamental part of documentation content. This page demonstrates all list types and nesting patterns.

Unordered Lists

  • First item
  • Second item
  • Third item
  • Fourth item

With Nested Items

  • Parent item one
    • Child item A
    • Child item B
      • Grandchild item
      • Another grandchild
    • Child item C
  • Parent item two
    • Child item D

With Inline Formatting

  • Bold list item
  • Italic list item
  • Code in a list item
  • Item with a link
  • Strikethrough item

Ordered Lists

  1. First step
  2. Second step
  3. Third step
  4. Fourth step

With Nested Ordered Items

  1. Install dependencies
    1. Install Node.js
    2. Install package manager
    3. Run npm install
  2. Configure the project
    1. Create qwik-docs.config.ts
    2. Set up content directories
  3. Start developing
    1. Run npm run dev
    2. Open browser

Starting from a Different Number

  1. This list starts at three
  2. Continues to four
  3. And five

Mixed Lists

  1. First ordered item
    • Unordered child
    • Another unordered child
  2. Second ordered item
    • More unordered children
      1. Deeply nested ordered
      2. Another ordered
  3. Third ordered item

Task Lists

  • Set up project structure
  • Create component library
  • Port Astro Starlight components to Qwik-docs
  • Add search integration
  • Write documentation
  • Publish to npm

Lists with Paragraphs

  • First item with a paragraph.

    This is a continuation paragraph under the first item. It should be indented and visually associated with the item above.

  • Second item with a paragraph.

    Another continuation paragraph.

Lists with Code Blocks

  • Install the package:

    npm install @qwik-docs/framework
  • Configure your site:

    import { defineConfig } from '@qwik-docs/framework';
    
    export default defineConfig({
      title: 'My Docs',
    });
  • Start the dev server:

    npm run dev

Definition-Style Lists

Using bold terms with descriptions:

  • Hero — Landing page section with title, tagline, and actions
  • Banner — Full-width notification bar at the top of the page
  • Sidebar — Left navigation panel with grouped links
  • TOC — Table of contents generated from page headings