How do I generate Asciidoctor admonition in the top left corner

Question

Looking into the official Asciidoctor documentation about Admonitions the addmonition look like:

The admonition is in the top left corner.

However, when I use the same admonition in my documentation the it looks like:

The admonition is on the left side of the text.

Are there some special Asciidoctor attributes I need to set in order to get the same look as in the official documentation?

Answer 1

The first example uses the CSS in the Antora UI, the second uses the standard Asciidoctor CSS. The HTML created in both scenarios is the same.

If you want the a similar styled HTML output as with the Antora UI, you'll need to borrow the necessary CSS from the Antora UI and integrate it into the theme you use for your HTML output.