Edit page History How do I edit this website?

Notices

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="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="imagej"
  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="imagej1"
  content="ImageJ 1.x was first released in 1997." %}

ImageJ 1.x was first released in 1997.

{% include notice icon="fiji"
  content="Fiji includes a lot of useful plugins." %}

Fiji 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 5,000 icons!](https://fontawesome.com/v5.9.0/icons)" %}

You can use Font Awesome icons. More than 5,000 icons!

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!