Note Box

A calm callout block for the things readers need to know: how it works, why to trust you, what to watch for.

Copied 0 times.

iHow this works

Members only

This design needs a membership.
Today's price: $1/month, locked forever once you join.

Get it for $1/month Log in

Build a note box component for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A rounded block that sits inside article/body content, full content-column width, with comfortable padding (20-24px) and a background tint plus a 3-4px left border in the tone color.
- Contents: an inline SVG icon matching the tone (info circle, shield check, or warning triangle) at the start of the title line, aria-hidden, a short bold title line (3-6 words), and 1-3 short paragraphs of body text.
- Tone: informational. Neutral blue-gray tint, calm wording, for how-it-works and good-to-know notes.

CONTENT
- Title and body come from props/slots so I can reuse the component with different text; placeholder copy carries a clearly marked TODO.
- Body text can contain links and inline emphasis, styled consistently with my article text.

BEHAVIOR
- Purely static: no dismiss, no animation, no JS required.

QUALITY
- Semantic markup: an aside element with an aria-label matching the tone ("Note", "Trust note", "Warning"); the title is a p with strong or an appropriately leveled heading if my page structure calls for one, never a hardcoded h2.
- The tint stays subtle (background at low opacity of the tone color) so body text keeps WCAG AA contrast; the border carries the color identity.
- Color is never the only signal: the icon (if shown) and the title wording also convey the tone.
- Spacing above and below matches my article's block rhythm; the box never touches adjacent paragraphs.
- Responsive: padding tightens slightly on mobile, text never smaller than my body size.

QUESTIONS
- Before you build, find or ask for: the actual title and body text of the note. Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

Members only

What it does

The note box is the calm little callout that sits inside your writing and flags the parts that matter. It's a soft background tint, a colored edge, a short bold title, and a couple of lines of text. Readers who skim stop at it, which is the whole point.

Three moods: info in calm blue, trust in reassuring green, warning in amber, firm but never alarmist.
Each mood keeps its meaning even in black and white; color is never the only signal.
A short bold title of three to six words leads it, with up to three little paragraphs under.
Write the wrapper once, then drop it into any article with different text each time.
No animations, no scripts, nothing to break.

How it works

1Pick the mood, info, trust, or warning, and whether a little icon leads the title.
2Copy the prompt, the short build note your AI follows, into whichever AI you use.
3Your AI builds the box to match your article text, with slots for your own title and lines.
4Write a punchy title of three to six words, then one to three short paragraphs under it.
5Check it against your page, making sure the tint stays subtle enough that the text reads perfectly on top, in every mood you use.
6Drop more of them through the article where they earn it, same box, different words, one consistent look.

What you can customize

Tone: info is neutral blue for good-to-know notes, trust is green for reassurance, warning is amber for real caveats and never a false alarm.
Icon: on adds a small matching symbol before the title; off keeps it pure text, and the title wording still carries the mood.
Padding, corners, and text style adapt to your article automatically, because your AI builds the box right inside your own design.