Skip to main content

This page has been translated using TexTra by NICT. Please note that the translation may not be completely accurate.
If you find any mistranslations, we appreciate your feedback on the "Request form for improving the automatic translation ".

[Version 1.3.3] Added new components, fixed and updated styles, assets, etc.

*Added version to title

Added new components that make up the header area

Added UI components needed to configure the header area in the desktop and mobile views.
It includes the following components:

Added new [Component] header container

Overview

  • A header container is a container that contains components such as a logo, global menu, utility links, language selector, search box, and login (logout / sign-up).

Screen capture of a dadercontainer

New Component global menu added

Overview

  • It is displayed consistently throughout the site and acts as a go-around navigation at the category level. It is a component used only in the desktop view.

Global menu Screen Capture

Added a new Component dropdown (container)

Overview

  • A dropdown is a container for a menu list, etc. It is also used to add a link to a lower level as a menu in a global menu, or to display a filter in a search box.

Dropdown (Container) Screen Capture

New Component mega menu added

Overview

  • This is a drop-down variation that can be called from the global menu and has a wide range of display contents that can include content other than the menu list. As a rule, this component is expanded only in the desktop view.

Mega menu Screen Capture

Added new Components menu list

Overview

  • A bundled component of a menu item that can be placed in a content area as a local menu or contained within a drop-down or mega menu.

Screen capture of the menu list

Added a new [Component] hamburger menu button.

Overview

  • It is mainly used in the mobile view, and is the starting point for opening and closing the drawer with displays such as overlay.

Hamburger Menu Button Screen Capture

Added new [Component] drawer

Overview

  • This container expands from the four sides (top, bottom, left, and right) of the browser screen and can store components such as mobile menus. Opening and closing are controlled by a starting component such as a hamburger menu button. There are three expansion patterns: pane expansion, overlay expansion (modal), and overlay (modeless) expansion.

Drawer screen capture

Added new [Component] mobile menu

Overview

  • Used primarily in the mobile view, it provides a starting point for opening and closing the drawer in overlay view.

Mobile Menu Screen Capture

Added new [Component] divider

Overview

  • A divider is a visual separation between different sections, components, or groups of content. It is equivalent to the & lt; hr & gt; element in HTML. A divider improves readability by providing clear separation between related or unrelated elements.

Screen capture of the divider

[Style] "Focused" color modified

Changes

  • From the viewpoint of accessibility, the color of the "Focused" color defined in Wood-600 was changed to the color of Wood-500 to maintain a sufficient Trust ratio.

The changes in the

Changed handling of icons on Component Figma

Changes

  • With the release of the Illustration Icons asset, the treatment of icons in Figma has changed. The old icons used in form controls have been replaced with new treatment icons. However, there are no visual changes, such as styles.

The change of the icon on the Figma is introduced. The changed part is surrounded by a red frame.

[Template] The "Read" "Authentication" template has been deleted

Changes

  • Removed templates that are no longer in use.

ReadScreen capture showing that the Authentication template has been deleted

[Illustration / Icon Materials] The elements on the back of "My Number Card" have been changed.

Changes

  • I changed the number.

It introduces the changed parts on the back of' My Number Card.' The changed part is surrounded by a red frame.

[Illustration / Icon Materials] The description of "Precautions for implementation" has been corrected.

Changes

  • The description of "implementation precautions" has been corrected.

The caption correction of

Design Data

You can view design Figma from the Data Community provided by the design tool Figma.

Figma Community

Related Links