UI Components

UI Components

Displays collapsible content panels for presenting information in a limited amount of space.

5.6.1 Guideline

Certain guideline must be taken care while adopting Accordion Component which are listed as below.

  • The accordion is a vertically stacked list of panels, such as open panel and closed panel group. Each panel can be "expanded" or "stretched" to reveal the content associated with that item. Click headers to expand/collapse content that is broken into logical sections, much like tabs.
  • Each panel will have 2 sections same as in panel design header & container section.
  • Title in the header will be placed 15PX margin from the left side border & container wil have 15PX padding from all four side.
  • Label can be in one line or max 2 line. For the single line, character lenght of the lable should be 50 character, anything more will wrap the text and label will start from new second line.
  • Lable height in case label in one line will be 30PX. For the label in two line, height will adjust accordingly. It can be achived using min-height CSS feature.
Parameter of Accordion
Fig 5.6.1 Parameter of Accordion

5.6.2 Behaviour

Certain guideline must be taken care while adopting Accordion which are listed as below.

  • Normal State

In normal state, header section will have background color LighterGray(#f6f6f6)   & border 1PX with color Gray(#d8d8d8)  . The container section will not be visible. It will have icon based action on right side pointing downward side. Title will have font size 12PX, style bold and color DarkGray(#5c5c5c)  .

  • Hover State

When user mouse over on closed panel header, the only behavior change is Its title color will change to SkyBlue(#2991d6)  .

  • Active State

When user click on header section panel will be expanded and open panel, header section will have background White(#ffffff)   and border 1PX with color Gray(#d8d8d8)  , it will have icon on the right side pointing upward side. Conainer section will have background White(#ffffff)   & 1PX border with color Gray(#d8d8d8)  . The title will have font size 12PX, style bold and color SkyBlue(#2991d6)  .

  • Disable State

Disable panel will have background color LightGray(#e6e6e6)   & lable color will be DimGray(#c5c5c5)  . Border will be 1PX with color Gray(#d8d8d8)  .

Different state of Accordion
Fig 5.6.2a Different state of Accordion
  • Responsive Behavior

In the mobile, there will not be hover state, while for other states design specification will remain same as in web desktop. Only behavior it will srink and fit to the size of the device, as shown in the Fig 5.6.2a.

Responsive behavior
Fig 5.6.2a Responsive behavior

5.6.3 Usage

  • In a page that's broken into dozens of paragraphs, links, images, or just too many blocks of co ntent... accordion menus to be used when have a less space.
  • In navigation where if categorized modules have sub modules which needs to be displayed on th e same page, accordion can be used as open/close men u.
  • Accordions are more suitable when people need onl y a few key pieces of content on a single page. By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter.
  • Another situation in which accordions are helpful is when the information is restricted to very small spaces, such as on mobile devices. Tab on the desktop can act as an accordion in the mobile devices.