The Components category holds ready-made web components. Instead of building a banner or a KPI row shape by shape, you drop one element that already knows how to lay itself out, then fill in your own words.
Finding them
Components are part of the Illustrate mode palette: rest on Components on the palette strip, or click it, to see all six under Page Blocks. Tap one to add it, or drag it to where you want it. Above the Web Elements row sit five more tiles: Code (a syntax-highlighted code card), Checklist (tickable to-do rows), and the diagram-building Card, Badge and Step Number (Cards and Callouts, Badges and Step Numbers).
The Diagram mode palette doesn't offer the category (its Build category has the Card, Badge and Step Number, and Write has the Callout), but every component still works there: search for it by name in the editor's Search panel and add it from Add to canvas.
What the category contains
- Banner is a themed title block: an accent bar with a title and a subtitle.
- Callout is a soft note box with an icon badge, a heading, and a body. It is a card underneath, so it can take tags and a meta line too.
- Stat Row is a row of KPI cards, each a big number over a caption.
- Process is a row of numbered circles joined by arrows, with a caption under each.
- Hero is a large image with a caption card over it.
- Header is a website-style bar with a logo, a brand name, and navigation links.
Hero builds on an image, so it only appears when image upload is available.
The Entity also belongs to this category, but Illustrate mode leaves it out of its palette; in Diagram mode it is in Build.
Editing the text
Every piece of text on a component is editable where it sits:
Click the line you want to change, such as a stat's number, a step's caption or a nav link, and type.
Before the component is selected its text ignores clicks, so the first click always selects (and lets you drag) the whole component.
The main text (a banner's title, a callout's body, a header's brand name) is the element's ordinary label, so double-clicking edits it like any shape's label, with the usual bold, size and alignment controls.
Adding and removing rows
A Stat row, a Process and a Header carry rows: stats, steps and links. To add one, select the component, open any of the quick-add + buttons around it and choose Add Stat, Add Step or Add Link. To remove, reorder or retype rows in one place, right-click the component and open Tools, then the Stats, Steps or Links section.
Each has limits, so the layout stays readable: a stat row holds 1 to 6 stats, a process 2 to 8 steps, and a header up to 6 links.
Resizing
Each component is one element that lays itself out, so resizing changes the room it has rather than zooming it:
- Banner and callout text re-wraps to the new width.
- Stat cards share the width, and their numbers grow as you make the row taller.
- Process steps spread across the width, and the circles shrink rather than overlap when you add more.
- A header keeps its logo and brand on the left and its links on the right. Links that no longer fit a narrowed header are hidden from the end until you widen it again.
Colours and images
Components follow the tab theme when you drop them. A banner and a header paint their bar in the theme's accent and keep white text through a theme change; pick a Background colour in the right-click menu's Style → Colours section to use your own. A callout, a stat row and a process are ordinary cards that use the accent for the badge, the numbers and the step circles.
Drop an icon on a header to make it the logo, or on a callout to replace its badge. To set a hero's picture, double-click the image; its caption card can be turned off (or added to any image) with Caption Card in the image's right-click menu, under Image.
Drop a component to get the structure right, then retype the placeholder text in place. It is faster than arranging the pieces from scratch.
Was this article helpful?