Create a Sage branded help project using MadCap Flare.
Product help
Under ReviewUpdated May 12, 2026
Description
The Sage help template contains components, styles, and layouts to help you create a Sage branded help project using MadCap Flare.
Landing page
Home page| Section | Description | | --- | --- | | Global header | Product global headerHide the product name or switcher. | | Special advice | Information you want to share with the user. For example, a planned update or release. | | Hero | Hero banner from the Web Design System. It contains the following.Heading/title ( [Product name] help).Optional introduction text.Highly engaging graphic illustration or animation.Multi-action buttons to switch the region, language, version.Link to the product switcher section.Search text input. | | Links section | Section containing 3 to 6 links.Quick links, common links, recent links, popular links, or any links you want to promote. | | Navigation section | Section containing the most used or important Help categories.The user can expand the section to see all remaining categories.A card opens a category page with the menu open. | | Product switcher section | Section containing a button for each related product.A button opens the related product home page. | | Contact banner | Section containing a call to action (CTA) to access contact information.Use a light banner layout and style if you do not want to promote contact information. | | Footer | Official Sage footer. |
Content page
Content page| Section | Description | | --- | --- | | Global header | Product global header containing at least the following.Heading/title ( [product name] help).Optional pills describing region, language, version of related product.Search buttonLogin access | | Navigation | Product Navigation: left | | Content area | Area containing breadcrumbs, content title, content.Optional elements on the right side remain sticky when scrolling. For example, anchor navigation, related pages, feedback.Feedback has a solid background and covers other elements on a reduced screen. |
Search
- MadCap Flare has a basic search engine, called MadCap Search, that cannot display suggestions in real-time or apply any Natural Language Processing functionality.
- Search also does not support faceted search, which would allow users to refine results based on multiple filters or facets simultaneously.
Proposal 1
- The Search button opens a panel containing a Search text input and a Filter dropdown select.
- The user enters a search term and selects a filter. The user can use the clear (X) option on the Filter dropdown select to remove the filter.
- The use selects the Search button to trigger the search and open the Search results page.
- The user can create a new search.
- The user can select Show menu to display the left menu and navigate content pages.
Proposal 2
Resources
- Download the current Sage branded Flare template.
- For details of template changes and how to upgrade, see Template changes - Sage rebrand phase 2 (Q2 FY23) - 13th February 2023.
Accessibility requirements
Tab order
- Make sure the tab order is logical and intuitive. When navigating with a keyboard, the tab order should move from top to bottom.
- Make sure all interactive elements can be accessed using the keyboard.
Skip to content
Make a skip to content link the first element in the tab order. This allows a keyboard user to navigate past the menu items and go directly to the main content of the page. (Note. Skip-to-content link is coming soon.)
Testing
We tested the button component using the following software.
Computer
| Operating System | Version |
|---|---|
| MacOS Monterey | 13.3.1 (a) |
| --- | --- |
| Safari | 16.4 |
| Chrome | 105.0.5195.102 |
Assistive technology
| Type | Name |
|---|---|
| Screen reader | VoiceOver (Mac) |
| Screen reader | NVDA (Windows) |
| Speech recognition | Voice Control (Mac) |
Resources
| Date | Changes |
|---|---|
| September 2024 | Copied information from Product design system. |