Tufte template https://edwardtufte.github.io/tufte-css/

side note with number

Sidenotes consist of two elements: a superscript reference number that goes inline with the text, and a sidenote with content. To add the former, just put a label and dummy checkbox into the text where you want the reference to go, like so:

This is a side note. Notice the number.

margin note without number

Margin notes are created just like sidenotes, but with the marginnote class for the content and the margin-toggle class for the label and dummy checkbox:

This is a margin note. Notice there isn’t a number preceding the note.

margin figure

Image of a Rhinoceros This is a margin note. Notice there isn’t a number preceding the note.

figure with optional note

Figures should try to use the figure element, which by default are constrained to the main column. Don’t wrap figures in a paragraph tag. Any label or margin note goes in a regular margin note inside the figure.

From Edward Tufte, Visual Display of Quantitative Information, page 92. Exports and Imports to and from Denmark & Norway from 1700 to 1780

full width figures

If you need a full-width figure, give it the fullwidth class. Make sure that’s inside an article, and it will take up (almost) the full width of the screen.

Figurative map of the successive losses of the French Army in the Russian campaign, 1812-1813