Design
Guide

OXD Introduction Design Thinking UX Standards
UX Guidelines Form Design Patterns UX Rules & Lows
Visual Design
Colors Typograpy Images Icons Motion Animations
Grid & Layout
Main Layouts Grid System
Navigations
Sidebar Topbar
Componets
Buttons Text-box Check-box Radio Radio Pils Switch Search-box Multi Select Dropdown Nested Dropdown Upload Inputs Date picker Time picker Labels Help Lable Status lable Grupe Input Grupe Overlay Comment-box Paginations Divider Progress Circle Progress Slider Upload-box Segments Folder accordion
Tables & List View Cards & Shaps Modals & Popups Advance Componets Charts
QA Standards
Developer
Folder Accordion
List of options that are stacked vertically and that can be expanded/collapsed to show or hide additional related content. 



                    //Accordion Item//
                    icon-color : #64728c;
                    background-color: rgba(100, 114, 140, 0.1);
                    min-width: 36px;
                    min-height: 36px;
                    padding: 6px;

                    //Accordion Item card-header//
                    color: #64728c;
                    font-family: "Nunito", sans-serif;
                    font-size: 16px;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0.5rem 0.5rem;
                    background-color: #fafafc;
                    border-radius: 1.2rem;
                    border: 1px solid #efeff0;

                    //OXD icon //
                    background-color: rgba(100, 114, 140, 0.1);
                    icon-color : #64728c;
                    min-width: 36px;
                    min-height: 36px;
                    padding: 6px;

                    //View all Item // chip-button-text //
                    color: #76bc21;
                    font-size: 0.9rem;
                    font-weight: 700;
                    padding-left: 5px;
                    padding: 6px;

                    //chip-button//
                    border-radius: 0.6em;
                    line-height: 1;
                    font-weight: 700;
                    font-size: 14px;
                    padding: 5px 9px;
                    background-color: #76bc21;
                    text-color: #ffff
                    align-items: center;
behavior
If multiple Accordions are used, the expanded state needs to be highlighted. By this, we help the user understand which Accordion element is opened.Caret/ Arrow symbol could be placed both at the left or right side. Icon symbol for the expanded, collapsed state may vary. In the situations when the Accordion is right-sided, you can use additional symbols to emphasize the meaning. But be careful, as it is possible to overload the contents of the component.
Spacing and Alignment