# Content Lists

> Source: https://agilitycms.com/docs/sveltekit/content-lists

Content lists hold your repeating content — blog posts, team members, FAQs. In the [SvelteKit starter](https://github.com/agility/sveltekit-starter) the blog is the worked example: a **Posts** list, a listing component, and a dynamic detail page per post.

## Linked content arrives with the page

The starter fetches pages with `contentLinkDepth: 4` (see [Routing & Sitemaps](/docs/sveltekit/routing-sitemaps)), so a component whose model has a **linked content** field gets the list *resolved inline* — no second request:

```svelte
<!-- src/modules/agility-components/PostsListing.svelte (trimmed) -->
<script lang="ts">
  export let item: any;
  const { posts } = item.fields;   // linked content, already resolved
</script>

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
  {#each posts as post}
    {@const { fields: { slug, image, title, date, category } } = post}
    <a href={`/blog/${slug}`}>
      <img src={image.url} alt={image.label} />
      <div>{category.fields.title}</div>
      <h2>{title}</h2>
    </a>
  {/each}
</div>
```

Notice the nesting: each post's `category` is itself linked content, also resolved because of the link depth. Deeper values cost more on each request — keep the depth as low as your components actually need.

## Dynamic detail pages

Each post also gets its **own page**: the Posts list is bound to a dynamic page in the sitemap (`/blog/my-first-post`, …), so every item shows up as a sitemap node and routes through the same catch-all. When the API resolves one of those paths it includes the post as `contentItem`, and `ContentZone` injects it into the `PostDetails` component:

```svelte
<!-- src/modules/agility-components/PostDetails.svelte (trimmed) -->
<script lang="ts">
  export let item: any;
  const { fields: { title, image, content, category, date } } = item;
</script>

<img src={image.url} alt={image.label} />
<h1>{title}</h1>
<div class="prose">{@html content}</div>
```

So: **list component** for the roll-up, **details component** for the item page, both driven by the same content list.

## Fetching a list directly

When a list isn't attached to the page (search, footers, cross-promos), fetch it in a `load` function with the Content Fetch SDK:

```ts
// e.g. inside a +page.server.ts load
import agility from "@agility/content-fetch";

const api = agility.getApi({ guid: AGILITY_GUID, apiKey: AGILITY_API_FETCH_KEY });

const list = await api.getContentList({
  referenceName: "posts",
  languageCode: "en-us",
  take: 20,          // always pass take explicitly (max 250)
  skip: 0,           // paginate with skip
  sort: "fields.date",
  direction: "desc",
});
// list.items[n].fields → your model's fields
```

Return it from `load` and render it in the page component like any other data.

## Publishing behaviour

Because the starter prerenders at build time, new or updated list items appear after the next build — wire Agility's publish webhook to your host's build hook (see the [deployment guides](/docs/sveltekit/deploying-to-vercel)).

---

Index of every docs page: https://agilitycms.com/docs/llms.txt