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

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

Group Field

<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).

<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

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

Link Field

The Link Field value is an object containing a url andlabel properties

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