Admonition styling should be different for info, caution, warning

[mdlinville]

File: test.md, CC @johndmulhausen

I'm not sure how to do this, maybe some JS that looks for the words inside the first <strong> tag and adds a class to the blockquote based on it? Right now there is no programmatic way to know that they are not just plain notes.

[joaofnfernandes]

No JS 🙏

We can add classes to the block quotes like

> This is going to make your life miserable
{: .warning}

And then create css like

blockquote.warning {
  border-left-color: #ce4844;
}

Easy peasy. I would also prefer to stick to just 2 types:

• Info: the default so that you don't need to even apply the class
• Warning: this is really bad

This will force us to be careful when using notes so that we don't end up creating a crappy experience like this (not wanting to offend the authors)

[johndmulhausen]

Everything Joao said, basically; I'll have a looksee.

[mdlinville]

I don't like us having to specify a class as well as the admonition type text itself. Maybe we should have the admonition title automatically added based on the class. I think we should default to Note since that is what we have always done and we have tons and tons of notes.

[joaofnfernandes]

If we standardize on specific colors (info/note is always blue, warning is always red) we'll have some consistency so we won't need to start the block quote with **note** or **warning**. We can do something like the bootstrap docs (see screenshot in my first comment), where they start the note with a title.

Here's a PR to get the ball rolling #2710. Check the staged demo.

[johndmulhausen]

Closing as obsolete; I think @londoncalling's latest pass has us in a good place and we should start a new discussion if we want to evolve from here.

[docker-robott]

Closed issues are locked after 30 days of inactivity.
This helps our team focus on active issues.

If you have found a problem that seems similar to this, please open a new issue.

/lifecycle locked