Showcase index

Actions

Forms

Feedback

Feedback

Content

Data and media

The four surfaces that bring a dependency: chart, map, carousel and editor. They sit together on purpose, because seeing the weight in one place is what makes the choice visible.

Charts

ECharts in SVG, with colors read from the theme tokens and repainted when the theme flips. The text summary is mandatory: the drawing is aria-hidden, and for someone who cannot see it the summary is all there is.

Bars

Visits per weekday: peak on Friday at 270 and low on Thursday at 80.

Traffic source per month; the total grows from January to June, with app rising most.

Topics by interest: UI leads with 35 and SEO closes at 9.

Lines

Sessions and conversions from January to June; both rise, jumping in May.

A value that changes in plateaus, with no transition between them.

Forty days with wheel and slider zoom; the curve oscillates around an upward trend.

Pie

Share by technology: Nuxt 1,048, Tailwind 735, TypeScript 580 and others 300.

Six slices with radius proportional to value, from 40 down to 15.

Radar

Target versus actual across five axes; actual beats target in support and marketing.

Gauges

Needle at 78 out of 100.

Progress ring at 85 percent, with no needle.

Funnel

Five-step conversion: from 100 visits to 18 purchases.

The same funnel inverted, from 100 reach to 18 subscribers.

Scatter

Eleven points between 4 and 14 on x and 4 and 11 on y, weakly positively correlated.

The same scatter with a third dimension in size: the largest bubble is 400.

Heatmap

Intensity by day and shift; values range from 0 to 10.

Hierarchy and flow

Area proportional: 42 icons, 41 components across four groups, and 11 pages.

Flow from source to signup; home gathers 65 and passes 35 along.

The template folder structure, root to leaves, laid out left to right.

Statistics

Eight periods with open, close, low and high; the sharpest drop is the fourth.

Four groups with min, quartiles, median and max; D has the widest spread.

Relational

Six nodes linked by dependency; the template is the most central. Overlapping labels are hidden.

Four measures before and after; after is lighter and less error-prone, with more traffic.

Project

Five project stages between February and April; components is the longest at six weeks.

Schedule for three people, each with separate blocks on the same row; Bruno has three stretches.

QR and barcode

Two ways to carry a value from the screen to another device. The QR takes any text (address, phone, token); the barcode is the counter one, and each standard accepts its own value format.

<echo-qr-code>

This page's address

https://template.echosistema.online/en/componentes/dados

Phone

tel:+555431234567

Order token

ECHO-7F3A-2K9D-4M1P

Point a camera at it: the address QR opens this very page.

<echo-barcode>

SKU (CODE128)

EAN-13

Map

Leaflet with the OpenStreetMap layer. The attribution is not decoration: the data licence requires it. Controls and popup follow the theme.

Map of the triple border, with markers at Foz do Iguaçu and Ciudad del Este.

Carousel

Swiper with arrows, pagination and loop. Autoplay pauses on hover and is switched off entirely for anyone who asked for less motion, because a self-advancing carousel is the textbook case for that preference.

Brand tokens

Light and dark themes

Three languages

Native components

Rich text editor

TipTap. What sets it apart from a raw contenteditable is pasting: text from another editor brings dirty markup, and TipTap filters it against a schema. The content inherits the system typography through the es-prose class.

Generated HTML

<h2>Escreva aqui</h2><p>O conteúdo herda a tipografia do sistema pela classe <code>.es-prose</code>.</p>