Accordian

Badge

Breadcrumb

Button

Icon

Menu

Modal

Tab

Text Area

Text Field

Toast

Toggle

Accordian

Badge

Breadcrumb

Button

Icon

Menu

Modal

Tab

Text Area

Text Field

Toast

Toggle

Accordian

Badge

Breadcrumb

Button

Icon

Menu

Modal

Tab

Text Area

Text Field

Toast

Toggle

VALIS

Component

\

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

Badge

Next Component →

Contents

definition

Usage Guidelines

Accessibility Standards

Content Standards

Intertaction and Animation

Code Block

Codesandbox

Related Components

to the top

Components

Accordian

Badge

Breadcrumb

Button

Icon

Menu

Modal

Tab

Text Area

Text Field

Toast

Toggle

Foundations

Accessibility

Color

Content

Iconography

Layout

Typography

Content

Alt Text

Best Practices

Grammar

Naming

Voice and Tone

Writing Style

Brand

Call to Action

Illustrations

Language

Lockups

Logo

Photography

VALIR DESIGN

Served by bamabite
© 2023 — VALIR
All rights reserved

VALIR DESIGN

© 2023 — VALIR
All rights reserved

VALIR DESIGN

Served by bamabite
© 2023 — VALIR
All rights reserved