Details
Provides additional information or explanations that users can reveal by expanding the section. It is used in forms, modals, pages, or articles to display more details without cluttering the interface.
- Header text.
- Body text.
- Chevron right opaque default at rotation: 0 deg
- Chevron right opaque rotation: 90 deg
State
- Click trigger area (Header)
- Hover state: Underline the Header text
- Closed state (Default): Hide Body text (Opacity:0%)
- Opened state: Click on trigger area (Head) to open accordion showing Body text.