Here's a test of the new callout

Let me know if there are any changes or improvements you'd like!

FAQ Callout Preview

This page demonstrates Moore's new FAQ List callout. Use the sidebar on the left to jump between sections, or scroll through to explore the layout. Have feedback, ideas, or feature requests? Reach out to me if you have any suggestions for features and tweaks on this.

What This Callout Does

The FAQ List is a flexible, fully-customizable component for organizing question-and-answer content with a navigable sidebar. It's ideal for help pages, policies, admissions questions, program details, or any structured content readers might want to scan.

  • What kinds of content work well in this callout?

    Anything organized as questions and answers — admissions FAQs, policy summaries, "before you apply" checklists, course details, event guidelines. Each section can have an optional intro paragraph above its Q&As, so it also works for grouped reference content (not just literal questions).

  • Can I have multiple FAQ callouts on the same page?

    Yes. Each one builds its own sidebar from its sections, and the anchor IDs are automatically kept unique. You could have one FAQ for "Before You Apply" and another for "After You're Admitted" on the same page.

Layout & Navigation

The callout adapts to screen size automatically. On desktop you get a sticky sidebar; on mobile you get a dropdown menu. The active section is always highlighted as you scroll.

  • What happens on mobile?

    The desktop sidebar is hidden and replaced with a clean dropdown menu at the top of the FAQ. Choosing a section from the dropdown smoothly scrolls you to that content. The dropdown matches your section labels exactly. I think there could be a cleaner approach to this- any suggestions help!

  • Does the sidebar stay visible while I scroll?

    Yes. The sidebar sticks to the top of the viewport as you scroll through the FAQ. If you scroll past the FAQ entirely into a related callout below, the sidebar continues floating so you can navigate back at any time. It tucks away cleanly before reaching the page footer.

  • How does the highlighted "active" link work?

    As you scroll, the FAQ tracks which section is currently in view and highlights the matching sidebar link. Click any link to smooth-scroll directly to that section.

Customization

Every visible color in the callout is admin-controlled — backgrounds, headings, sidebar links, dividers, link colors inside answers, the active highlight bar. Sixteen color fields total. Leave any field blank to use the site's default theme.

  • Can I add links, bold text, or lists inside an answer?

    Yes — answers use the same rich text editor as the rest of the site. Since my most recent update, we can finally center divs, format text, insert links, embed lists, and apply colors directly from the editor toolbar.

  • Can the FAQ match a specific page or program's color theme?

    Absolutely. Set the background, title color, sidebar link color, and any other colors directly on the callout. You can also use the Page Color Theme callout to apply site-wide color overrides that the FAQ will inherit.

Linking to Other Content

The sidebar can do more than jump between FAQ sections — it can also link to other callouts on the same page using the companion Anchor Marker callout. This is useful for sending readers from the FAQ down to a related contact card, donation CTA, or program details section.

  • How do I make a sidebar link jump to another callout?

    Add an "Anchor Marker" callout above the destination callout and give it a memorable ID (like <code>contact-admissions</code>). Then in the FAQ List, create a section with that same ID in the "Custom Anchor ID" field. The section will appear in the sidebar but won't render an empty heading in the FAQ — clicking it scrolls directly to the linked callout.

    This is the cleanest way we can approach sending a user to a separate callout. The issue is that the left menu nav ends before the next callout starts, see below for example.

  • Can a sidebar link both name a section AND link out?

    Yes. If the section has its own intro or Q&A items, those will display normally. Add a Custom Anchor ID only when you want the sidebar link to jump elsewhere on the page.

Feedback & Feature Requests

This callout is brand new and ready to evolve based on how you use it. If something feels off, missing, or could work better — let me know.

 

  • What kinds of improvements might be possible?

    A few examples of ideas:

    • Expand/collapse Q&A items (accordion-style answers)
    • Custom colors for specific selected section on the left
    • Built-in search/filter across all questions on the page
    • Embedded videos or images inside answers
    • Print-friendly "save as PDF" version of the FAQ
    • "Was this helpful?" feedback buttons on each answer
    • Auto-generated table of contents linking to specific questions (not just sections)

    If any of these would be useful — or if there's something else entirely — please share!

Linking to a callout

We're able to link to other callouts on the page too using the "Anchor Marker" callout. However, linking to them cuts off the menu on the left.

Example text

Example text

Example text

Example text