🌱 Component basics
...
Guide
...
...
Description
Component will be managed manually
...
by an admin in the CMS.
| Info |
|---|
Accordions can be saved and reused throughout the site.
|
🧐 Specifications
...
Usage
...
Contents
| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Requirements
There will be no limit to how many items can be added to this component.
When included on a detail page, the accordion's width will match the width of the rich text column.
...
Behavior
Clicking the plus icon will expand each accordion item to show content.
Clicking the
...
minus icon will cause it to contract to display only title.
User can open as many accordions on the page (opening 1 does not close a previously opened one).
User can add an anchor within the accordion by using class jump-link
CMS Fields
Field Label | Field Type | Required? | Notes | |
|---|---|---|---|---|
| 1 | Eyebrow | single-line text | no |
|
| 2 | Accordion Title | single-line text | yes | optional title of component |
| 3 | Description | multi-line text | no |
|
| 4 | Add Accordion Item | select | yes | when clicked will allow admins to add another item (title and content) |
| 5 | Accordion Item Title | single-line text | yes | renders in bold |
| 6 | Accordion Item Content | rich-text editor | yes |
|
| 7 | Accordion Item Image | image upload | no | images will be part of RTE |
📐 Additional guidance
Content
Accessibility
Mobile
Best practices
https://styleguide.asce.org/section-components.html#asgref-components-accordion