Sticky Notes — Examples

Default (yellow, inline)

Here is some surrounding text.

A default sticky note.

And the text continues.

Named color

A pink one.

Hex color

Custom hex green background.

Sized inline

Constrained to 14em wide.

Tilted inline

Tilted three degrees counter-clockwise.

Positioned

Positioned, sized, and tilted. Anchored to the page body.

Overlapping (source-order stacking)

First (pink), should be under.

Second (amber, tilted), should cover the pink one.

Unknown color (expect warning)

Should fall back to yellow with a warning at render time.

Block content inside a sticky

A sticky with rich content:

• a list item
• another item

1 + 1

Square (post-it shape)

Square!

Pink square.

Positioned square, tilted.

Trailing text

Some text after all the stickies so the page has scrollable content.