> ## Documentation Index
> Fetch the complete documentation index at: https://www.lettercamp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Post layout

> Configure article hero layout, reading width, cover visibility, table of contents, and related posts.

To replace the layout with React and SCSS Modules, see [Custom layouts](https://www.lettercamp.com/docs/custom-layout.md).
The settings below configure the default layout; a custom `PostLayout` chooses
which settings to use.

Use `post` in `settings.json` to control the layout of every Lettercamp article.
In the design customizer, open **Post → Layout** to choose a layout:

* **Horizontal** (`split`) puts the title, description, and authors on the left
  and the cover on the right.
* **Vertical** (`stacked`) puts the heading and byline above the cover. The cover
  and article share a centered reading column. Contents appear as small indicators
  along the left edge; hover, focus, or tap to open the section list.

Changes appear in the preview. **Preview post** only chooses the example shown;
the settings apply to every post. Click **Publish** to apply your changes.
On narrow screens, images and text stack to fit.

## Settings

```json theme={null}
{
  "post": {
    "heroLayout": "stacked",
    "contentWidthEm": 40,
    "showCover": true,
    "showTableOfContents": true,
    "showReadingTime": true,
    "showRelatedPosts": true
  }
}
```

| Field | Values | Default |
| - | - | - |
| `post.heroLayout` | `split` (Horizontal), `stacked` (Vertical) | `stacked` |
| `post.contentWidthEm` | Positive multiple of body text size; `40` gives 640px at 16px text | `40` |
| `post.showCover` | Show or hide the post cover image | `true` |
| `post.showTableOfContents` | Show or hide the table of contents when the post has headings | `true` |
| `post.showReadingTime` | Show calculated reading time on articles | `true` |
| `post.showRelatedPosts` | Show up to three related article cards below each post | `true` |

Reading width uses the body text size. See [Reading time](https://www.lettercamp.com/docs/writing/reading-time.md)
for how the estimate is calculated. When the [homepage layout](https://www.lettercamp.com/docs/design/homepage.md)
is Column, `post.contentWidthEm` also controls its width.

## Related posts

Turn on **Show related posts** in **Design** or under **Post → Content** in the
design customizer. You can also set `post.showRelatedPosts` to `true` in
`settings.json`. Publish your changes to apply the setting to every article.
Related posts are enabled by default, including when the field is omitted.
Set `post.showRelatedPosts` to `false` or turn off the toggle to hide the section.

The section shows up to three different articles after the post body, using the
same cards as the homepage grid. Cards stay in a grid even when your homepage
uses Rows or Column, and stack on small screens. Drafts and the current article are
excluded. With fewer than three other published articles, it shows the available
articles; with none, the section stays hidden.

Lettercamp chooses articles using shared words in titles and descriptions, with
extra weight for title words and a bonus for matching categories. Ties and
unmatched articles use a stable order specific to each post. Recommendations do
not shuffle when a reader refreshes, and update when you rebuild or publish
changed content. Selection runs during the build without AI calls. It does not
guarantee that every article receives a related-post link.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.