# Footnotes and Resources

> Footnotes and a resources list, built from sections of the page.

Notion has no footnote or resources block, so notionic reads both from sections of the page. Each is shown once below; the guides have the details.

# Numbered footnotes

**In Notion:** add a heading named `Footnotes` at the end of the page, write each note under it, then link words in the text to the notes with **Copy link to block**. See [Footnotes](https://notionic.dev/docs/footnotes).

notionic numbers each linked word[^1] in reading order, and a note linked twice[^2] keeps its number, as this second link[^2] shows.

**Renders as:** a superscript number linking to the note, and a list at the end that links back to each reference, with no JavaScript.

```typescript
// Customize · footnotes.tsx
// Name the section in other languages, and show its title above the list.
<NotionRenderer
  blocks={blocks}
  footnotes={{ headings: ["Footnotes", "Notes"], showTitle: true, title: "Notes" }}
/>
```

# A resources list

**In Notion:** add a heading named `Resources`, and under it one list item per link, starting with the link. See [Resources](https://notionic.dev/docs/resources).

The live list is the Resources section at the end of this page, just above the footnotes.

**Renders as:** one row per link, with the site's favicon, the title and a muted description on one line.

```typescript
// Customize · resources.tsx
import { plainText, type ResourcesProps } from "notionic"

// Cards in a grid instead of rows.
export function Resources({ items }: ResourcesProps) {
  return (
    <ul className="grid gap-2 sm:grid-cols-2">
      {items.map((item) => (
        <li key={item.block.id}>
          <a href={item.href} className="flex h-full flex-col rounded-lg border border-border p-3 hover:bg-muted">
            <span className="font-medium">{plainText(item.title)}</span>
            <span className="text-sm text-muted-foreground">
              {/* Plain text: links in the description can't sit inside the card's link. */}
              {item.description ? plainText(item.description) : item.preview?.description}
            </span>
          </a>
        </li>
      ))}
    </ul>
  )
}

<NotionRenderer blocks={blocks} components={{ resources: Resources }} />
```

# Resources

- [Notion API reference](https://developers.notion.com/reference/intro) - The blocks notionic renders.
- [shadcn/ui](https://ui.shadcn.com/) - The components the registry builds on.
- [Tailwind CSS](https://tailwindcss.com/) - Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

[^1]: The first number goes to the first note linked in the text, wherever it sits in this list.
[^2]: A note linked from two places gets a back-link to each.