Layouts

Typography

Buttons

Media

Cards

Checklists

Flows

Full-width layout which is often the base layout for a lot of content.

You can nest View layouts within each other

View layouts have a 'Wrap down' version which is useful for creating responsive content

By default, the two columns layout provided will be of equal width but the height will expand with the content is added

Create up to 12 columns - you can use the Toolbox on the right to add more columns and adjust the proportions of each column. You can also adjust the space between each column too!

We recommend using View layouts when creating content for mobile or very small screens

Headers: Header 1 (H1) is the largest available header and Header 4 (H4) is the smallest available header.

Paragraph: Basic paragraph text, with bold, italic, underline, link, un-link, and code snippet. These options appear when you highlight text.

Bulleted List: Auto-indented bullets. To create a bulleted list, drag the text option you would like onto the page, type * at the beginning of the line, and then begin typing the list.

Numbered List: Auto-indented list that adds the next number each time that you hit Enter. To create a numbered list, begin by typing "1." at the beginning of the line, and then type your list.

Links: To add an in-line link, highlight the text you want to link, select the link icon from the options, and then paste the link. You can also link to other content you've built in Candu. To do this, start typing the name of the content and click the name when it appears below.

B/I/U: Similar to links, if you want to add special formatting to your text, you can simply highlight the text and select an option from the menu that appears or use the usual keyboard shortcuts.

You can set the border, background, text type, hover/idle/clicked state in the Styleguide to create buttons that match your brand

You can adjust the size, color, and shape (amend the border radius) of the button using the toolbox on the right-hand side

Open a URL: which will send users to another page (open in a new tab or not)

Send Email: which will open a mail client

Callbacks: if you're looking to do something more advanced, you can add JavaScript snippets in the installation and call them from the Editor. An example of this is triggering a chat widget to open when a 'Start chat' button is clicked.

Trigger a Modal: You can trigger a Candu Modal from a Candu button - you will need to link to the Modal content you have created - guide here.

Go to a Flow Step: If you are building a Flow, you can make a button click take a user to another step in your Flow

Change Content: Please use Flows for creating dynamic content that changes or multi-step flows.

Launch Pendo Guide: if you want to link users to a specific product tour within your product, you can simply add the ID of your Pendo guide and trigger from a Candu CTA

You can upload images of any size and type into Candu.

Drag the image option onto the editor and you can then either embed the image via a link or upload it from your computer into the media library.

Once uploaded, you can resize images with the drag handlers or toolbox. When resizing, you can either use pixel size (px) or percentage (%).

If you only fill in width or height, the image will maintain its original aspect ratio; if you fill in both width and height, the original aspect ratio will be overridden. If the size entered is larger than the portal that the image will appear in, the image may not be displayed.

You can embed videos in Candu so that your users can watch your content within your application rather than having to navigate to an external site.

Drag the video option onto the Editor and then you'll be able to input a video link using your preferred hosting service like Youtube, Vimeo or Wistia.

iFrames: With an iFrame you are able to create content using elements from outside applications like Typeform or Calendly. Drag the iFrame component onto the canvas, and add an iFrame link in. You can control the width, height, and whether the iFrame can show as full screen.

Candu Content: The most common use case for using nested Candu content is for when you want to have two layers of Segmentation. You can track the Candu content component onto the canvas and then select an existing piece of content to display.

Badges: highlight specific content using a badge. Using the toolbox on the right, select from primary, secondary, tertiary, warning, and danger to set the tone. These colors will all be synced directly to your style guide.

Dividers: These places a line or spacer between content and are useful to break up different sections especially if you are building something with lots of different components.

Alerts: use these to draw users' attention to important pieces of information. Alerts are static on the page and can be customized in your Styleguide so you can call out questions, warnings, etc.

Checklist components

Card components

Flow components

A number of pre-built components

Cards create a single, full-width card that will keep content inside of it separate from the rest of the page. If you place a card within a layout section, it will fill the layout block.

Cards can have interactions added to them, so they can be calls-to-action.

Cards have an option to be Dismissible, this means users are able to dismiss it. If a user dismisses the card, it will be dismissed permanently for them. You can toggle the dismissible option on and off using the toolbox.

You can style cards and change the border radius, shadow, cursor type, hover state and border to create action cards, transparent cards or static cards.

Checklist components allow you to create getting started steps for users to check off manually, or auto complete based on product events or Candu events.

You can create multiple checklist styles in your Styleguide - customize the color, font and box shape/size.

Add section titles, steps, and expandable content blocks to create a dynamic, interactive checklist for your users.