> 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

Fields allow you to create data fields which can be updated by a content editor to instantly populate your website with content

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

![](https://2146102850-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI5zCYEN4cqBl6YZTet%2F-MiDSRDM30DfmXpRLBa_%2F-MiDV7_kdd62534zSgKl%2Fimage.png?alt=media\&token=3ddf4757-5c69-44e3-a50f-ebd644aced14)

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

### Group Field

![](https://2146102850-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI5zCYEN4cqBl6YZTet%2F-MiDSRDM30DfmXpRLBa_%2F-MiDVP7j8AIKQDlDQ9Wr%2Fimage.png?alt=media\&token=60de84a5-b6e6-4dc4-a786-7c77c7fbdbc8)

```
<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;

![](https://2146102850-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI5zCYEN4cqBl6YZTet%2F-MiDSRDM30DfmXpRLBa_%2F-MiE2MxGKujTWbi_eOYi%2Fimage.png?alt=media\&token=96e28694-0f8c-42a8-8cbe-8481cdff1105)

```
<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

![](https://2146102850-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI5zCYEN4cqBl6YZTet%2F-MiE3loPE1fyinpstaJd%2F-MiGhFtKI7UGVPdXCd9Z%2Fimage.png?alt=media\&token=e4c4b2ed-a1df-4e8f-8914-b43aaf4314e9)

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

### Link Field

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

![](https://2146102850-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI5zCYEN4cqBl6YZTet%2F-MiGhldJyx26cb55fsU7%2F-MiGiPBGbMXrtgt8rHAN%2Fimage.png?alt=media\&token=fd14dd93-b9eb-4891-b4e7-783e5267acac)

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

###