This page demonstrates how to add various stylized notices to your page. Informational notices allow you to notify the reader of important details to keep in mind. The notice will span the width of the page. Optionally, you can specify an icon or glyph symbol, background color, and/or highlight color.
Basic usage
{% include notice content="Hello world!" %}Hello world!
Markdown styling
{% include notice content="I like to use **bold** and *italic* text." %}I like to use bold and italic text.
Multiple lines
{% include notice class="fas fa-city" content="
What do these cities have in common?
| City | Country |
|----------------|----------------|
| Dresden | Germany |
| Edinburgh | United Kingdom |
| Madison | United States |
| Melbourne | Australia |
| Ostrava | Czech Republic |
| Zürich | Switzerland |
" %}What do these cities have in common?
| City | Country |
|---|---|
| Dresden | Germany |
| Edinburgh | United Kingdom |
| Madison | United States |
| Melbourne | Australia |
| Ostrava | Czech Republic |
| Zürich | Switzerland |
Custom colors
{% include notice background-color="chartreuse" highlight-color="brown"
content="Green background with brown stripe? How exciting!" %}Green background with brown stripe? How exciting!
Custom font size
{% include notice size="2em"
content="I'm huge, and therefore more important!" %}I’m huge, and therefore more important!
Icons
You can specify any icon from the media/icons folder by name, sans file extension.
Informational
{% include notice icon="info"
content="The *Ophiocordyceps* fungus zombifies ants!" %}
The Ophiocordyceps fungus zombifies ants!
Important Note
{% include notice icon="note"
content="Take careful note of this sentence." %}
Take careful note of this sentence.
Warning
{% include notice icon="warning"
content="Watch out for snakes!" %}
Watch out for snakes!
Technical note
{% include notice icon="tech"
content="To compile, use `./configure && make && make install`." %}
To compile, use ./configure && make && make install.
Usage tip
{% include notice icon="tip"
content="Want to get more done?
[Sleep faster!](https://youtu.be/1g2ntIN7JuY)" %}Want to get more done? Sleep faster!
Project-specific commentary
{% include notice icon="imagej2"
content="This website documents the ImageJ ecosystem." %}
This website documents the ImageJ ecosystem.
{% include notice icon="fiji"
content="Fiji includes ImageJ2's integrated search bar." %}
Fiji includes ImageJ2’s integrated search bar.
{% include notice icon="imagej"
content="ImageJ was first released in 1997." %}
ImageJ was first released in 1997.
{% include notice icon="bonej"
content="BoneJ includes a lot of useful plugins." %}
BoneJ includes a lot of useful plugins.
Operating-system-specific commentary
{% include notice icon="linux"
content="Linux is my favorite operating system." %}
Linux is my favorite operating system.
{% include notice icon="macos"
content="Some people really love macOS!" %}
Some people really love macOS!
{% include notice icon="windows"
content="Lots of people use Windows." %}
Lots of people use Windows.
{% include notice icon="pi"
content="ImageJ works on Raspberry Pi!" %}
ImageJ works on Raspberry Pi!
{% include notice icon="android"
content="Someday, ImageJ will work on Android phones." %}
Someday, ImageJ will work on Android phones.
Font Awesome
{% include notice class="fab fa-fort-awesome"
content="You can use Font Awesome icons.
[More than 1,500 icons!](https://fontawesome.com/v5.9/icons?m=free)" %}You can use Font Awesome icons. More than 1,500 icons!
See also Symbols › Font Awesome.
Unicode
{% include notice glyph="🎉" highlight-color="pink"
content="You can use Unicode symbols including emoji.
[More than 100,000 symbols!](https://graphemica.com/)" %}You can use Unicode symbols including emoji. More than 100,000 symbols!
See also Symbols › Unicode.
Asides
The aside include creates text boxes that float around main content text.
Basic usage
{% include aside content="I'm an aside!" %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sem id elit finibus dapibus quis eu dolor. Donec pharetra lorem vel rutrum blandit. Donec at purus in enim fermentum dignissim. Quisque congue lacus at malesuada posuere. Fusce ac turpis quis nulla iaculis convallis. Proin blandit tortor ac ligula ullamcorper, sit amet dignissim lorem auctor. Donec sit amet ligula et ligula commodo porttitor in sit amet.
Other parameters
{% include aside title="Aside title" content="I have a title!" %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sem id elit finibus dapibus quis eu dolor. Donec pharetra lorem vel rutrum blandit. Donec at purus in enim fermentum dignissim. Quisque congue lacus at malesuada posuere. Fusce ac turpis quis nulla iaculis convallis. Proin blandit tortor ac ligula ullamcorper, sit amet dignissim lorem auctor. Donec sit amet ligula et ligula commodo porttitor in sit amet.
