# Content - agent guide

> Normative extract of the EchoSistema template for the page
> `/componentes/conteudo`. Copy it verbatim: tag names, props, events and classes
> are contract.
>
> Full guide (rules, tokens and every family): `/agents/echosistema-ui.md`

## Rules that apply before any line of code

- Colour only through tokens (`text-fg1`, `bg-panel`, `border-line`, `.es-i--*`); never a hex, never a Tailwind colour.
- Two axes: the intent gives the colour, the variant consumes it. Never combine them by hand.
- Visible text through `t()`; tag names, props and classes stay literal.
- A component does not fetch: it takes props and emits events.
- An icon alone inside a button needs an `aria-label`.

```vue
<echo-card :title="t('team')" :subtitle="t('who')" :loading="pending">
  <template #actions>…</template>
  …
</echo-card>

<echo-list><echo-list-item :title="t('row')" :subtitle="…" /></echo-list>
<echo-data-table :rows="ROWS" :columns="COLS" />
<echo-avatar :src="url" name="Ada Lovelace" size="lg" shape="rounded" />
<echo-gallery :items="IMAGES" />
<echo-file-button accept="image/*" @files="onFiles">Choose</echo-file-button>
<echo-dropzone accept="image/*" @files="onFiles">…</echo-dropzone>
<echo-image-cropper ref="cropper" :usages="['avatar']" mask="square" @apply="upload" />
<echo-image-viewer ref="viewer" :src="url" :caption="url" />
```

The avatar's `size`: `xs` `sm` `lg` `xl` (no prop = 40px). With no `src` it
draws the initials of `name`, which is why the name is required even with a
photo.

Tables: put `.es-table` on the wrapper (the horizontal overflow and the themed
scrollbar come from it) and `.es-table--dense` for long lists.

---

Source: `app/components/echo/{Card,List,ListItem,DataTable,Avatar,Gallery,Dropzone,ImageCropper}.vue`