> For the complete documentation index, see [llms.txt](https://primo.gitbook.io/usage/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://primo.gitbook.io/usage/basic-usage/custom-development.md).

# Fields

Primo is built and powered by [Svelte](https://svelte.dev), a powerful compiler for building user interfaces. 

## Integrating fields

Once you've created a field, you can integrate it into your component by calling it by its **id**. In this case, the **links** field is used within a Svelte `each` block to generate a link list. 

### Repeater Field

![](/files/-MiDV7_kdd62534zSgKl)

```
<ul>
	{#each links as link}
		<li>
			<a href={link.url}>{link.label}</a>
		</li>
	{/each}
</ul>
```

### Group Field

![](/files/-MiDVP7j8AIKQDlDQ9Wr)

```
<figure>
    <img src={featured_image.img.url} alt={featured_image.img.alt} />
    <figcaption>{featured_image.caption}</figcaption>
</figure>
```

### Image Field

The image field value is an object containing a **`url`** property (aliased as **`src`**) and an **`alt`** property (containing the value entered for "Description" in the CMS).&#x20;

![](/files/-MiE2MxGKujTWbi_eOYi)

```
<img src={featured_image.url} alt={featured_image.alt} />
<!-- or -->
<img src={featured_image.src} alt={featured_image.alt} />
<!-- or destructure props -->
<img {...featured_image} />
```

### Content Field

The content field accepts Markdown and outputs HTML, which means it requires using Svelte's `{@html}` block

![](/files/-MiGhFtKI7UGVPdXCd9Z)

```
<div class="primo-content">{@html description}</div>
```

### Link Field

The Link Field value is an object containing a **`url`** an&#x64;**`label`** properties

![](/files/-MiGiPBGbMXrtgt8rHAN)

```
<a href={primary_link.url}>{primary_link.label}</a>
```

###