This banner uses the CSS snippet approach as opposed to using a plugin that risks becoming incompatible with future versions of Obsidian. If this snippet does become incompatible, it could easily be configured to be compatible with the latest Obsidian version.
You can refer to Obsidian help website to learn how to add the banner snippet.
The snippet can be enabled in the CSS snippets setting.
Download the CSS file at the releases page.
Enter banner into the cssclasses frontmatter property.
In the body, type in ![[image path/name|banner]] like the example in the image. Adding the |banner alias indicates the attachment is the banner.
A banner icon can be added by making a callout. For example, > [!banner-icon] <icon>. Replace <icon> with an emoji.
The banner should now look like the following image.
You can position the Inline Title on top of the banner. However, ensure that you have the Inline Title setting enabled under Appearance in Obsidian settings.
Once the setting has been enabled, enter banner-inline-title into the *cssclasses property. The inline title will now look like the following image.
Your banners can be individually set to fade and only fade the banners that suit each of your note's style.
Enter banner-fade into your *cssclasses property to enable this feature.
The banner snippet supports the Style Settings plugin.
For further adjusments, navigate to Obsidian settings and to Style Settings where you can adjust the position and color of a few of the banner's elements.
