Side Notes
How to use Side Notes with 11ty WISP
Side Notes Default
Jump to section titled: Side Notes DefaultDisplay
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" %}
Side Notes with Link
Jump to section titled: Side Notes with LinkDisplay
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
Jump to section titled: Side Notes with BlockQuoteDisplay
“Example of side notes“
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
Jump to section titled: Side Notes with ImageDisplay
Sed ultricies dolor non ante vulputate hendrerit Vivamus sit amet suscipit sapien Nulla iaculis eros a elit pharetra egestas.
Example of side notes
Implementation
{% sidenotesimage "text sidenotes", "URL Image here.." , "Text Body in here..." %}
Side Notes + Image + Link
Jump to section titled: Side Notes + Image + LinkDisplay
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
{% 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
Jump to section titled: Side Notes with VideoDisplay
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" %}
Side Notes + Video + Link
Jump to section titled: Side Notes + Video + LinkDisplay
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" %}