Sources & Credits

Two companion blocks that go at the bottom of articles — a numbered source list and an illustrator/author credit line.

Sources Block

Auto-generates a “Sources” title via CSS. Override with a child element or data-title.

<div data-nama="sources" class="nama-sources">
  <p>1. <a href="https://..." target="_blank" rel="noopener noreferrer">https://...</a></p>
  <p>2. <a href="https://..." target="_blank" rel="noopener noreferrer">https://...</a></p>
</div>

Custom Title

Use a child element (durable) alongside data-title (backward compat):

<div data-nama="sources" class="nama-sources" data-title="References">
  <div class="nama-sources-title">References</div>
  <p>1. <a href="https://...">...</a></p>
</div>

Visual editor durability

The <div class="nama-sources-title"> child element survives the visual editor. When present, it automatically hides the CSS ::before title. The data-title attribute is kept for backward compatibility but will be stripped by the visual editor.

Credits Block

Auto-generates a “Credits” title via CSS. Override with a child element or data-title.

<div data-nama="credits" class="nama-credits">
  Illustrations by <a href="https://..." target="_blank" rel="noopener noreferrer">artist name</a>
</div>

Custom Title

<div data-nama="credits" class="nama-credits" data-title="Illustration">
  <div class="nama-credits-title">Illustration</div>
  Art by <a href="https://...">artist name</a>
</div>

Author Byline

The author byline is a plain <p> tag placed between sources and credits. It automatically renders in smaller, muted text (via the [data-nama="sources"] ~ p CSS rule).

<p>by: Author Name<br><em>Article - Month Year</em></p>

Typical Article Footer Order

<div data-nama="sources" class="nama-sources">...</div>

<p>by: Suzanne Boothby<br><em>Article - June 2022</em></p>

<div data-nama="credits" class="nama-credits">Illustrations by ...</div>

Notes

• Default titles (“Sources”, “Credits”) are generated by CSS ::before — no need for separate heading tags.
• For custom titles, use a child element (nama-sources-title / nama-credits-title) — this is the durable approach that survives the visual editor.
• Always include class="nama-sources" / class="nama-credits" for visual editor durability.