Side Notes with ID Number

Side Notes ID Default

Display

Implementation

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

Example

{% sidenotesid  "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

Display

Implementation

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

Example

{% sidenotesidlink  "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

Implementation

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

Example

{% sidenotesidlink  "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

Implementation

{% sidenotesidimage "text sidenotesid", "URL Image here.." , "Text Body in here..." %}

Example

{% sidenotesidimage  "Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas.", "Example of side notes" , "https://tufte.000000076.xyz/img/090-Subatomic%20Particles.png" , "Example side notes with image" %}

Side Notes + Image + Link

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

{% sidenotesidimage "Text Body in here...", "text sidenotesid", "URL Image here.." , "text link" , "URL link here.." %}

Example

{% sidenotesidimagelink  "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

Implementation

{% sidenotesidvideo "Text Body in here...", "text sidenotesid", "URL Video here.." %}

Example

{% sidenotesidvideo  "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

Display

Implementation

{% sidenotesidvideolink "Text Body in here...", "text sidenotesid", "URL Video here.." , "text link" , "URL link here.." %}

Example

{% sidenotesidvideolink  "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" %}