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

⊕ 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.

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.