mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-23 19:42:23 -06:00
bd2af37865
This PR updates the home page and the CHANGELOG to refer to v0.4.0.rc1 as a pre-release or release candidate, rather than a release. See [this comment](https://github.com/just-the-docs/just-the-docs/pull/613#issuecomment-1240442518) for motivation. It also adds the versioned docs issue (#728) to the roadmap in the CHANGELOG. As the config for the theme docs now needs to declare callouts, the [callouts docs](https://just-the-docs.github.io/just-the-docs/docs/ui-components/callouts/) can now illustrate the rendered appearance. (These callouts are merely examples: the names and colors should eventually be replaced by a principled collection, taking account of WCAG.)
158 lines
2.4 KiB
Markdown
158 lines
2.4 KiB
Markdown
---
|
|
layout: default
|
|
title: Callouts
|
|
parent: UI Components
|
|
nav_order: 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*](https://kramdown.gettalong.org/quickref.html#block-attributes).
|
|
|
|
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]({{ site.baseurl }}{% 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.[^postfix]
|
|
|
|
[^postfix]:
|
|
You can put the callout markup either before or after its content.
|
|
|
|
#### An untitled callout
|
|
{: .no_toc }
|
|
|
|
```markdown
|
|
{: .highlight }
|
|
A paragraph
|
|
```
|
|
|
|
{: .highlight }
|
|
A paragraph
|
|
|
|
|
|
#### A single paragraph callout
|
|
{: .no_toc }
|
|
|
|
```markdown
|
|
{: .note }
|
|
A paragraph
|
|
```
|
|
|
|
{: .note }
|
|
A paragraph
|
|
|
|
```markdown
|
|
{: .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 }
|
|
|
|
```markdown
|
|
{: .important }
|
|
> A paragraph
|
|
>
|
|
> Another paragraph
|
|
>
|
|
> The last paragraph
|
|
```
|
|
|
|
{: .important }
|
|
> A paragraph
|
|
>
|
|
> Another paragraph
|
|
>
|
|
> The last paragraph
|
|
|
|
```markdown
|
|
{: .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 }
|
|
|
|
```markdown
|
|
> {: .highlight }
|
|
A paragraph
|
|
```
|
|
|
|
> {: .highlight }
|
|
A paragraph
|
|
|
|
#### Indented multi-paragraph callouts
|
|
{: .no_toc }
|
|
|
|
```markdown
|
|
> {: .new }
|
|
> > A paragraph
|
|
> >
|
|
> > Another paragraph
|
|
> >
|
|
> > The last paragraph
|
|
```
|
|
|
|
> {: .new }
|
|
> > A paragraph
|
|
> >
|
|
> > Another paragraph
|
|
> >
|
|
> > The last paragraph
|
|
|
|
|
|
#### Nested callouts
|
|
{: .no_toc }
|
|
|
|
```markdown
|
|
{: .important }
|
|
> {: .warning }
|
|
> A paragraph
|
|
```
|
|
|
|
{: .important }
|
|
> {: .warning }
|
|
> A paragraph
|
|
|
|
#### Opaque background
|
|
{: .no_toc }
|
|
|
|
```markdown
|
|
{: .important }
|
|
> {: .opaque }
|
|
> <div markdown="block">
|
|
> {: .warning }
|
|
> A paragraph
|
|
> </div>
|
|
```
|
|
|
|
{: .important }
|
|
> {: .opaque }
|
|
> <div markdown="block">
|
|
> {: .warning }
|
|
> A paragraph
|
|
> </div>
|