TessoloTessoloDocs
Blocks

Timelines, charts and links

Timeline, allocation chart, social icon row and copyable text blocks in Tessolo — built to replace screenshots and hand-made tables.

Four blocks that each replace something people used to fake with a screenshot or a table.

Timeline

A roadmap: stages left to right on a desktop, stacked on a phone. Each stage has a label (Q1, Phase 2), a title, a description, and a status — done, in progress, or planned. Status is what makes it read as progress rather than a list of promises.

Add stages one at a time; the connecting line and nodes are drawn for you.

Four to six stages is the useful range. Past that nobody reads to the end, and on a phone it's a very long column.

Allocation chart

A donut chart with a legend: token allocation, use of funds, revenue mix. Each slice is a name and a percentage.

The chart is calculated when the page is built, so it appears instantly and is visible to search engines — it isn't drawn by a script after the page loads.

If your slices don't add up to 100%, the pre-publish check tells you the total. It doesn't correct it for you: sometimes 98% is right because you rounded, and sometimes it means a slice is missing.

Social icon row

A row of platform icons — X, Discord, Telegram, GitHub and a dozen more. Add a platform, fill in the link. The icons are real brand marks, so you don't have to hunt down logo files.

Platforms with no link yet are left out of the published page and reported by the pre-publish check, so a half-finished row never ships with dead icons.

The brand icons are available anywhere you can pick an icon, under a Brands group alongside the general ones. You don't need this block just to use one.

Copyable text

A piece of text visitors can copy with one tap: a contract address, an invite code, a bank account. Long values can be shortened in the middle (0x7a3f…9c21) so the layout survives, and you can attach a "view" link to an explorer or a receipt.

The whole point is that these are values people must not retype. If a visitor can read it but not copy it, you've made a screenshot.

A copyable text block with nothing in it is reported by the pre-publish check; it would publish as an empty box.

Where they came from

These four arrived with the Web3 project site template, which is why the examples lean that way. Nothing about them is crypto-specific: a timeline is a product roadmap, an allocation chart is a budget breakdown, and copyable text is as useful for an invite code as for a wallet address.

On this page