Hello dear DS developer ❤

In the Design System we have developed our own smart solutions and components to handle the different types of data, layouts and styling that we need to build an awesome Design System.

These components are only used in the Design System and are therefore not public.

Typography

This component is used to control the semantic text elements on the page.

Card-link

Card link is used as a wrapper for Paper to get a card like appearance but with link functionality from Next/Link.

Link-wrapper

Animate-in-view

Animates content when in viewport for a smooth experience.

Image

Used for all images in the design system. Is an extension on next/image component.

Tabs

Used to compress heavy UX documentation sections to avoid unnecessarily long vertical scroll.

Used to showcase components that are similar to the component.

Used to generate a table of contents menu on the page.

Do and dont

Do and Dont is used in the UX docs to display how to correctly use a component, showing what you can and can't do.

Meta object

Serves as a configuration file that provides metadata components.

Demo / Display code

These components are used to display demos and code in the design system and they all share the same appearance and design.

The first choice should always be to try to use the code editor because it has the most features. But in some cases, depending on which component to show, it doesn't work based on how the component work or are structured. Then choose the code viewer that is a little more forgiving but does not have features for playing with props and live editing code.

If you need to document a component that takes up the entire screen or dims it, use Iframe to get a "smaller" screen.

Code editor

This component is used to display the different components and lets you play around with the props of the element.

Code Viewer

This component is an extension of and a slim version of code-editor.

Iframe

Useful when you need to display en example of a component that normaly fills the whole viewport, such as dialogs and drawers.