Components

Components, or content elements, are blocks of content that can be added to a page to create content pages.

When you're in edit mode, you see the following icons on the top left. Clicking the last icon lets you customize the available content elements.

When you click on an empty line on the page, the "+" icon becomes active. Click the icon to select a component, or start typing to add text. We suggest you check the best practices for using these components effectively.

Kadanza allows you to customize settings from each component in order to make your page content match your company's design guidelines.

Important to know is that these settings are applied per space, and each space can have a completely different look and feel.


The following components are available:


Page background

You can drag the slider on the color panel, or add any of the color values.

The color defined is used for all pages in the selected space.

We recommend using light colors for optimal readability.

The main navigation, placed horizontally at the top of the page. You can update the styling of the bar (size, color,...), change your logo (image, size,...), and style your buttons & links (regular and hover state). 

Use an svg logo to ensure optimal quality.

Please keep in mind that the active state of the page navigation is the same color as the hover status.


These are the dropdowns containing sub-pages of the main navigation.

You can change the styling of the dropdown (background, button, stroke) and the links, both for the regular and hover state.


A banner is an edge-to-edge component in which other components can be placed. It allows you to enrich the pages with more graphical content to create more engaging pages.

In the component settings, you can define the background color and default size of the banner.

After placing a banner on a page, you can edit the banner by clicking the settings bar below the selected banner.

Here you can

  • Change the background color (for this banner only)
  • Add or change the background image
  • Position the image by defining the fixed anchor point
  • Set on image size
    • Cover: the entire banner area is covered by the image (make sure your image is large enough for optimal quality)
    • Contain: the image will be scaled to fit inside the banner
  • Reset all to default settings (as defined in the component settings)

Paragraph

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


Headline 1-6

Six headline options allow you to create a decent text hierarchy to use across pages. You can change the font, style, color, spacing, and size of the headlines. 


Lead text

An introductory type of text that looks different from the body text, and is often used as the introduction to page content. You can change the font, style, color, spacing, and size of the lead text.


Quote text

A text style used for quotes. You can change the font, style, color, spacing, and size of the quote text.


Ordered List

An ordered, or numbered, list that has the same text style as the paragraph text. You can change line height, bullet indentation, list items (alpha, number,...), and top/bottom margin.


Unordered List

An unordered, or bullet, list that has the same text style as the paragraph text. You can change line height, bullet indentation, list items (alpha, number,...), and top/bottom margin.


An element that links to a URL, email address, entry point, or page. It can also be used to link to a file (that will be downloaded on click). The link uses the same text style as the paragraph style, but you can change the color and underline options, both for the default and the hover state.

Using a different color for your links makes them pop out in texts.


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 (font, style, color, spacing, size).

After placing an image, you can change specific settings per image with the settings bar below the selected image.

  • Interactivity:
    • Allow zoom: the image will be enlarged when the image is clicked
    • Image link: opens the configured link when the image is clicked.
  • Caption:
    • Show/hide the image caption. When hidden, the white space of the caption is also removed.

Card

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

You can add a title and subtitle to a card. In the configuration, you can

  • Set card background color (default and hover state)
  • Set text panel background color (default and hover state)
  • Change the corner radius
  • Set title and subtitle style (font, style, color, spacing, size)

Color

An element to describe and visualize a color palette.

In the component settings, you can set the text panel padding, color, and corner radius, as well as the text style of the name and value rows.

When placed on a page, you can add separate color values for different color systems (RGB, CMYK, PMS, HEX,...)

There can be 4 color cards next to each other, the 5th and following will be placed on a new line. You can reorder the cards per component, but you can not add text in between color cards. If you want to add text between different color components, use multiple components.


Button

A visual item that can be used to link to another page, site, modal,... In the configuration, you can define the button color, roundness, and text style (default and hover state)

Divider

Simple dividing line to separate components. You can use it to separate the titles or content in general. In the settings you can define the color and size of the divider.


GraFx Studio

An element to add the GraFx Studio template and project list on a page. In the component settings, you can change the top and bottom spacing.


Embedded video

Video links from Vimeo, YouTube, and Dailymotion can be added. In the component settings, you can change the top and bottom spacing.

Embedded Figma

Your Figma designs can easily be added to your installation. In the component settings, you can change the top and bottom spacing.

Keep in mind that the visibility of the Figma file inside the component depends on the settings inside Figma.


Embedded Storybook

Storybook can host detailed UI/UX guidelines that can be used while creating apps or websites. Admins. Similar to Figma, you can embed Storybook projects on a Kadanza page. In the component settings, you can change the top and bottom spacing.

Keep in mind that the visibility of the Storybook file inside the component depends on the settings inside Storybook.

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