Components

When you're in edit mode, you see the following icons on the top left. When you click on the last icon, you can edit your components and make them customized. 

When you click on an empty line on the page, the "+" icon that you see on the top will be activated so you can start adding the following components to provide the desired content to your stakeholders. We suggest you check the best practices for using these components effectively.

In this article:


Page background

This is the place to change the background color of the page to match your company's branding style.

Please keep in mind that this change will affect all the page colors for that space.

A fixed, horizontal interface element that consists of links. You can update the styling of the bar, change your logo preference, and style your buttons & links. Also, please make sure to upload your logo in SVG for better quality.

A dropdown list for the main navigation bar where you can change the menu background, links, and buttons. Please keep in mind that the active state of the page navigation is the same color as the hover status.

A way to enrich the pages with more graphical content and create more engaging pages.

Paragraph

A regular block of text. You can change the color, spacing, and typography of the text. 

Headline 1

Main headline where the text size is usually bigger and it is used for the main titles.

Headline 2

Secondary headline where the text size is usually smaller than Headline 1. 

Headline 3

Tertiary headline where the text size is usually small and is used for sub-titles. 

Lead text

An introductory type of text that looks different from the body text, and is often used to start an article as the introduction. 

Ordered List

Or a numbered list that the ordering is given by a numbering scheme such as decimal, alpha, and roman. It is handy for separating the titles and classifying the steps.

Unordered List

Or a bulleted list in that the order of the listed items doesn't matter. It can be specified with a disc, circle, or square. It is useful to list some items.

An element that links to an URL, email address, entry point, or page. You can also set the hover status for the links. 

Image

A visual element like a picture, drawing, or icon. You can define the roundness of the images as well as the style of the caption text.

Card

An element that can be used to create visual short links to other sections in your installation

Color

Use to describe colors. You can add the necessary information and show the color. Also, using it to inform users about your primary and secondary colors is useful. 

Button

Usually, a box-shaped computer icon initiates a specific software function where you can add links. If you want to link another URL to your page, using buttons will make it more visual than linking them directly to the text. It'll draw attention more and let people take action. 

Divider

Simple dividing line to separate components. You can use it to separate the titles or content in general.

Embedded video

Video links from Vimeo, YouTube, and Dailymotion can be added

Embedded Figma

Your Figma designs can easily be added to your installation. Just please keep in mind that users need to be logged in and have access to the file in Figma before they can see it in Kadanza.

Remember that there is a hierarchy between certain components so not every combination will work. For example, you can place an Image element in a Layout element but it is not possible to place another Layout element in there.

Embedded Storybook

Admins can use Storybook to create detailed UI/UX guidelines by embedding storybook stories media. After adding the component, a placeholder will appear, allowing easy copy and paste of the Storybook URL.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us

Related Articles