\

Accordian

LIVE

Accordian

How often is the design system updated?
Can I use VALIS Design System for commercial projects?
Are there training materials available for new team members?
How can I learn about best practices for using the design system?
How often is the design system updated?
Can I use VALIS Design System for commercial projects?
Are there training materials available for new team members?
How can I learn about best practices for using the design system?

usage guidelines

The accordion component is a container that holds a series of panels, each of which can be expanded or collapsed. When a user clicks on a panel header, the panel content is revealed or hidden, depending on its previous state. The accordion component should have a smooth animation when expanding or collapsing panels, such as a slide-down or slide-up effect. Additionally, the component should have proper spacing between panels and adequate padding to ensure readability and usability.

Content Appropriateness

Use the accordion for content that is logically segmented into sections. It should not be used for lengthy text that requires scrolling within the panel.

Default State

Determine if the accordion should start as expanded or collapsed. By default, accordions should start collapsed to save space and encourage interaction.

Expanding and Collapsing

Only one accordion panel should be open at a time. Expanding one panel should collapse the previously open panel.

accessibility standards

The accordion component is a container that holds a series of panels, each of which can be expanded or collapsed. When a user clicks on a panel header, the panel content is revealed or hidden, depending on its previous state. The accordion component should have a smooth animation when expanding or collapsing panels, such as a slide-down or slide-up effect. Additionally, the component should have proper spacing between panels and adequate padding to ensure readability and usability.

content standards

The accordion component is a container that holds a series of panels, each of which can be expanded or collapsed. When a user clicks on a panel header, the panel content is revealed or hidden, depending on its previous state. The accordion component should have a smooth animation when expanding or collapsing panels, such as a slide-down or slide-up effect. Additionally, the component should have proper spacing between panels and adequate padding to ensure readability and usability.

interaction and animation

The accordion component is a container that holds a series of panels, each of which can be expanded or collapsed. When a user clicks on a panel header, the panel content is revealed or hidden, depending on its previous state. The accordion component should have a smooth animation when expanding or collapsing panels, such as a slide-down or slide-up effect. Additionally, the component should have proper spacing between panels and adequate padding to ensure readability and usability.

CODE

export const ToastNotification = () => {
  return (
    <StyledToastNotification>
      <div className="rectangle" />
      <div className="frame">
        <div className="frame-wrapper">
          <div className="div">
            <Icon
              className="icon-instance"
              icon={<FilledYesSize20 className="attributes-instance" color="#FF5900" />}
            />
            <div className="text-wrapper">BEEPBOOP</div>
          </div>
        </div>
      </div>
      <div className="icon-wrapper">
        <Icon className="icon-instance" icon={<FilledNoSize12 className="attributes-instance" color="#FF5900" />} />
      </div>
    </StyledToastNotification>
  );
};

CODESANDBOX

ZILKR DESIGN SYSTEM

© 2024 — ZILKR
All rights reserved

ZILKR DESIGN SYSTEM

© 2024 — ZILKR
All rights reserved

ZILKR DESIGN SYSTEM

© 2024 — ZILKR
All rights reserved