Skip to main content

Side Notes

How to use Side Notes with 11ty WISP

Side Notes Default

Display

Sed ultricies dolor non ante vulputate hendrerit Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas

Example of side notes

Implementation

{% sidenotes "Text Body in here...", "Side Notes Text" %}

Example

{% sidenotes  "Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas.", "Exmaple of side notes" %}

Display

Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas.

Example of side notes click me

Implementation

{% sidenoteslink "Text Body in here...", "Side Notes Text" , "text link", "URL Link" %}

Example

{% sidenoteslink  "Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas.", "Example of side notes" , "click me" , "https://www.11ty.dev" %}

Side Notes with BlockQuote

Display

Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas.
“Example of side notes“
— Example side notes with blockquote

Implementation

{% sidenotesblockquote "Text Body in here...", "text blockquote", "Blockquote Footer" %}

Example

{% sidenoteslink  "Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas.", "Example of side notes" , "click me" , "https://www.11ty.dev" %}

Side Notes with Image

Display

Sed ultricies dolor non ante vulputate hendrerit Vivamus sit amet suscipit sapien Nulla iaculis eros a elit pharetra egestas.

Example of side notes

Example of side notes

Implementation

{% sidenotesimage "text sidenotes", "URL Image here.." , "Text Body in here..." %}

Display

Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas.

click me

Example of side notes click me

Implementation

{% sidenotesimage "Text Body in here...", "text sidenotes", "URL Image here.." , "text link" , "URL link here.." %}

Example

{% sidenotesimagelink  "Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas.",  "Example side notes with image and URL Link" , "https://tufte.000000076.xyz/img/090-Subatomic%20Particles.png" , "click me" , "https://11ty.dev" %}

Side Notes with Video

Display

Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas.

Example side notes with video

Implementation

{% sidenotesvideo "Text Body in here...", "text sidenotes", "URL Video here.." %}

Example

{% sidenotesvideo  "Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas.", "Example side notes with video", "https://www.youtube.com/embed/Q3t5lzvpBdE" %}

Display

Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas.

Example side notes with image and URL Link click me

Implementation

{% sidenotesvideolink "Text Body in here...", "text sidenotes", "URL Video here.." , "text link" , "URL link here.." %}

Example

{% sidenotesvideolink  "Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas.",  "Example side notes with image and URL Link" , "https://tufte.000000076.xyz/img/090-Subatomic%20Particles.png" , "click me" , "https://11ty.dev" %}