Component Active
C057 Full-Width Accordion
Use for product FAQs or product troubleshooting information. Multiple accordions can be stacked on a page.
Component Detail
Expandable/collapsible full-width information container, used to progressively disclose information. Typically used for product FAQs or product troubleshooting information. Multiple accordions can be stacked on a page. Accordions can be organized in alpha order by title, or in order of priority. There is no limit to the amount of body content that can be displayed in an accordion, but all body content is contained on a single page. Inline mages as well as text can be added to the body content of an accordion.
While the accordion component can be used to present many types of content, Frequently Asked Questions (FAQs) is a very common use case. In order to maximize search results ranking with this keyword-rich content, this component also includes the ability to enable an FAQ Schema markup when applicable.
FAQ Schema markup allows search engines to easily understand questions and answers. Properly marked up FAQ pages may be eligible to have a rich result on Search and Markup Action for the Google Assistant, which can help your site reach the right users and improve Google ranking for your pages.
Interactions
Accordions open and close on click (desktop); Accordions open and close on tap (tablet and mobile)
Specifications
Max Characters
Main Headline: 150 characters (2 rows max)
Main Body Copy: Unlimited, but aim for less than 2 paragraphs of intro copy; alternatively, if you are using this area for a subhead, limit to two rows of copy on desktop
Accordion Headline: 150 characters (1 row max)
Accordion Body Copy: Unlimited, but group copy into bullets when possible, and add supplemental images and/or diagrams to support answers.