My aim was to make it as lightweight as possible so I created a p.note class that creates a box around the paragraph, adds an icon from (preferably) SVG as a background-image and also a "NOTE_" using p.note:before. The code looks as follows:
The XHTML part
Code: Select all
<p class="note">Delete this text and replace it with your own content.</p>
Code: Select all
p.note
{
background-image: url("folder.svg");
background-position: top 1em left 1em;
background-size: 2em 2.5em;
background-repeat: no-repeat;
border: solid 1.5px #000000;
padding: 1em 2em 2em 3.5em;
margin: 3.5em;
page-break-inside: avoid;
break-inside: avoid;
font-size: 1em;
}
p.note:before
{
content: "NOTE_";
font-size: 2em;
padding-right: 0.5em;
font-weight: bold;
}
Code: Select all
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"/></svg>