I appreciate your input!
Of course it all depends on the purpose and use case. As I wrote, I have mostly overlooked callouts, so I might be ignorant of several things.
But the shown example is for personal notes, with myself as the only intended audience. I thought that was clear, but maybe I should change the heading “The Goal” to “My Goal” for more clarity.
I was mainly interested in the ability to embed information that is relevant but of secondary importance, and to distinguish categories should I want to. That is also why I like how they collapse. I guess “details” is in fact a better description here than “callout/admonition”…
My choices and styling follow from that, and I feel I archieved what I had in mind quite well for a first pass. I specifically didn’t want them to grab too much attention and disrupt the reading flow—so I intentionally went for a subdued style.
I doubt any would copy the look. But it was a fun exercise, and I thought the backbone might be useful to others. While a web developer probably doesn’t need help styling a details element, others might learn something.
The point was to share the CSS skeleton, and I didn’t want to make the post even longer, so I didn’t elaborate much on my aesthetic choices. To me it is quite clear that they are interactive… but of course it is: I designed them! (The shape and color communicates to me that they are distinct elements, and the border highlighting on hover communicates that they can be clicked. And you can click the whole summary, just not the little symbol).
I agree my example doesn’t work for “traditional” Callouts, how they are described in your link:
As the name may imply, callouts (sometimes called “admonitions”) call out a specific text from the content. They are meant to draw priority attention to specific text.
– thanks for sharing btw., I will give it a proper read later.
But it is quite easy to make a details element look more like this (and set the default to open="open" as you suggest):
I experimented with something like that, but I felt it stood out too much for what I wanted. Maybe I should add an example like that anyways.
I am no programmer or web developer, so I defer to you on the accessibility issue. I have little awareness of navigating UI with assistive technology. I will however note that the summary text was just placeholder. I imagined one would add a fitting description depending on the content.
Likewise for the symbols. It was just vaguely similar to examples I have seen. And I actively chose to hide the disclosure triangle, because color + symbol was already enough for me. I felt the triangle was too visually noisy. But you can just keep it.