# Wiki template: Infobox

A Wikipedia-style right-hand info card. Renders as a floated card on the
right of the article with a title, optional image, and a field/value
metadata table. Content wraps around it; on screens under 640px it becomes
a full-width block.

## Creating it

Payload admin panel → **Wiki** → **Wiki Templates** → *Create New*:

- **Name**: `Infobox`
- **Description**: Wikipedia-style info card. Place `{{Infobox}}` near the
  top of an article body, then replace the `{{...}}` markers and table rows
  with real content.
- **Body**: paste the block below exactly (the `::::` fence lines are part
  of it).
- **CSS**: optional. Paste the block below (or write your own).

## Body

```
::::infobox
**{{Title}}**

![{{Image alt}}]({{Image url}} "{{Image caption}}")

| {{Section}} | {{Value}} |
| ----------- | --------- |
| {{Field 1}} | {{Value 1}} |
| {{Field 2}} | {{Value 2}} |
| {{Field 3}} | {{Value 3}} |
| {{Field 4}} | {{Value 4}} |
| {{Field 5}} | {{Value 5}} |

{{One-line summary of the subject.}}
::::
```

## CSS

```css
.infobox {
  /* The shell already styles .infobox (float, card look, field table).
     Add template-specific tweaks here, e.g.: */
}
.infobox table {
  font-size: 0.875rem;
}
```

## The CSS scoping contract

Every template's **CSS** field is auto-scoped at render time. Each rule's
selector gets prefixed with a hash-based scope class derived from the
template **name**, e.g. for a template named `Infobox`:

```css
/* what you write in the admin panel */
.infobox table { font-size: 0.875rem; }

/* what actually ships to the browser */
.ptf-tpl-rpev9a .infobox table { font-size: 0.875rem; }
```

Consequences:

- **No collisions**: two templates defining the same class can never
  override each other, and template CSS can never leak into (or override)
  the app shell outside wiki article content.
- **Write plain selectors**: do **not** add `.wiki-markdown` or the scope
  class yourself — the renderer adds the prefix to every selector,
  including inside `@media`/`@supports` blocks.
- **@keyframes/@font-face** are passed through untouched (animation names
  are global; prefer unique names).
- **Dynamic HTML**: classes added at runtime by markdown directives (e.g.
  `infobox` from `::::infobox`) keep their literal names — the scoping
  prefixes selectors, it does not rename classes.
- **Deliberate overrides** of other templates or shell styles belong in the
  **Shims** collection, not here.

## Usage notes

- Place `{{Infobox}}` as the first line of the article body so the card
  floats beside the lead paragraphs.
- Delete the image line if the article has no image.
- The header row of the table renders as a section band; use it for a
  grouping label (e.g. "Service record") or keep it as Field/Value.
- Wikilinks and templates expand inside the card as usual — e.g.
  `[[Factions|faction]]` works in a value cell.
- `{{...}}` markers left unedited render as literal text — replace or
  delete every marker before publishing.