Additional

These are additional components that are not part of the standard Materials Design or Bootstrap systems.

article-info

This directive is used to display a block of information about an article, normally positioned just below the title of the article (shown below with non-standard outline).

Executable Books

Jul 24, 2021

5 min read

Syntax
```{article-info}
:avatar: images/ebp-logo.png
:avatar-link: https://executablebooks.org/
:avatar-outline: muted
:author: Executable Books
:date: Jul 24, 2021
:read-time: 5 min read
:class-container: sd-p-2 sd-outline-muted sd-rounded-1
```

.. article-info::
    :avatar: images/ebp-logo.png
    :avatar-link: https://executablebooks.org/
    :avatar-outline: muted
    :author: Executable Books
    :date: Jul 24, 2021
    :read-time: 5 min read
    :class-container: sd-p-2 sd-outline-muted sd-rounded-1

The author, date, and read-time options are parsed as syntax, so you can use substitutions like:

  • date

    • MyST: :date: "{sub-ref}`today`"

    • RST: :data: |today|

  • read-time

    • MyST: :read-time: "{sub-ref}`wordcount-minutes` min read"

options

avatar

A URI (relative file path or URL) to an image for use as the avatar (a user portrait, logo or branded graphic).

avatar-alt

Alternative text for the avatar.

avatar-link

A URL to link to if the avatar icon is clicked.

avatar-outline

A semantic color to use for the outline of the avatar.

author

Text to display in the author of of the article.

date

Text to display in the date of the article.

read-time

Text to indicate the time to read the article.

class-container

Additional CSS classes for the container element.

class-avatar

Additional CSS classes for the avatar element.