a789198b20
In touching up the migration guide, I noticed that many of our documentation site links are broken! For example, on the homepage, this link: <img width="782" alt="screenshot of homepage; code snippet is in next block" src="https://user-images.githubusercontent.com/14893287/210462690-31aa7bf5-dd79-4e8f-a3c5-1213e73771c4.png"> which has the following href ```code <a href="/just-the-docs/just-the-docs/CHANGELOG/">the CHANGELOG</a> ``` duplicates the `baseurl` twice. There are 14 such broken links across the site. Each link duplicates the `baseurl` and `link` tags, which has since been resolved with links being relative by default (there's a set of PRs that document this - I can't find the exact paper trail right now). To resolve this, I: - find and replace site-wide `{{ site.baseurl }}{% link` with `{% link` - tested each link, which now works properly locally *and* on the deploy preview I'm surprised we didn't catch this earlier! I also could be missing something else, in which case feedback on this PR is certainly welcome.
2.3 KiB
layout, title, parent, nav_order
| layout | title | parent | nav_order |
|---|---|---|---|
| default | Callouts | UI Components | 7 |
Callouts
Markdown does not include support for callouts. However, you can style text as a callout using a Markdown extension supported by kramdown: block IALs.
Common kinds of callouts include highlight, important, new, note, and warning.
{: .warning } These callout names are not pre-defined by the theme: you need to define your own names.
When you have [configured]({% link docs/configuration.md %}#callouts) the color and (optional) title for a callout, you can apply it to a paragraph, or to a block quote with several paragraphs, as illustrated below.1
An untitled callout
{: .no_toc }
{: .highlight }
A paragraph
{: .highlight } A paragraph
A single paragraph callout
{: .no_toc }
{: .note }
A paragraph
{: .note } A paragraph
{: .note-title }
> My note title
>
> A paragraph with a custom title callout
{: .note-title }
My note title
A paragraph with a custom title callout
A multi-paragraph callout
{: .no_toc }
{: .important }
> A paragraph
>
> Another paragraph
>
> The last paragraph
{: .important }
A paragraph
Another paragraph
The last paragraph
{: .important-title }
> My important title
>
> A paragraph
>
> Another paragraph
>
> The last paragraph
{: .important-title }
My important title
A paragraph
Another paragraph
The last paragraph
An indented callout
{: .no_toc }
> {: .highlight }
A paragraph
{: .highlight } A paragraph
Indented multi-paragraph callouts
{: .no_toc }
> {: .new }
> > A paragraph
> >
> > Another paragraph
> >
> > The last paragraph
{: .new }
A paragraph
Another paragraph
The last paragraph
Nested callouts
{: .no_toc }
{: .important }
> {: .warning }
> A paragraph
{: .important }
{: .warning } A paragraph
Opaque background
{: .no_toc }
{: .important }
> {: .opaque }
> <div markdown="block">
> {: .warning }
> A paragraph
> </div>
{: .important }
{: .opaque }
{: .warning } A paragraph
-
You can put the callout markup either before or after its content. ↩︎