mirror of
https://github.com/TeachBooks/manual.git
synced 2026-11-13 14:55:51 +00:00
Update badges.md
This commit is contained in:
Julie Kirsch
parent
8a460e5d3a
commit
899318821d
1 changed files with 49 additions and 27 deletions
|
|
@ -4,7 +4,9 @@
|
|||
|
||||
## Badges
|
||||
|
||||
Badges are small visual indicators often used to convey concise or important information. They can be very useful for categorising or tagging content for the reader like has been done for the subchapters under the [features](../features/overview.md) chapter of this manual. There are three types of badges: plain, link and reference. They are fully customizable and can simply be added with Markdown syntax:
|
||||
Badges are small visual indicators often used to convey concise or important information. They can be very useful for categorising or tagging content for the reader like has been done for the subchapters under the [features](../features/overview.md) chapter of this manual.
|
||||
|
||||
There are three types of badges: plain, link and reference which are fully customizable and can simply be added with Markdown syntax:
|
||||
|
||||
| Type | Badge | Code Syntax |
|
||||
|--------|----------------------------------------------------------|------------------------------------------------------------------------|
|
||||
|
|
@ -33,7 +35,7 @@ Here's an overview of all the available colours:
|
|||
|
||||
## Buttons
|
||||
|
||||
Buttons provide a way to create clickable elements that are more attractive than links. Jupyter-Book supports buttons using Markdown making them highly customizable. It is possible to link to external websites as well as chapters within your book. To link to an external page, `{button-link}` and `{button-ref}` must be used when linking to a different part of your book.
|
||||
Buttons provide a way to create clickable elements that are more attractive than links, for example, to link to key sections of your book such as downloads or external resources. Jupyter-Book supports buttons using Markdown making them highly customizable. It is possible to link to external websites as well as chapters within your book. To link to an external page, use `{button-link}`. `{button-ref}` must be used when linking to a part within your book.
|
||||
|
||||
The basic code syntax for creating a button is as follows:
|
||||
|
||||
|
|
@ -41,7 +43,7 @@ The basic code syntax for creating a button is as follows:
|
|||
:color: primary
|
||||
```
|
||||
|
||||
```{button-ref} overview.md
|
||||
```{button-ref} ../features/overview.md
|
||||
:color: primary
|
||||
```
|
||||
|
||||
|
|
@ -59,50 +61,70 @@ Buttons can be customized in markdown in a similar way as figures. You can exper
|
|||
| shadow | / | Add shadow CSS |
|
||||
| class | / | Additional CSS classes |
|
||||
|
||||
|
||||
Finally here are some examples:
|
||||
|
||||
```{button-link}https://teachbooks.io
|
||||
```{button-link} https://teachbooks.io
|
||||
TeachBooks
|
||||
|
||||
:color: warning
|
||||
:shadow:
|
||||
```
|
||||
|
||||
```{button-link}https://teachbooks.io
|
||||
```{button-link} https://teachbooks.io
|
||||
TeachBooks
|
||||
|
||||
:color: success
|
||||
:outline:
|
||||
:expand:
|
||||
```
|
||||
|
||||
|
||||
## Icons
|
||||
|
||||
Icons can be included to visually represent actions or categories. Jupyter-Book supports FontAwesome icons, which can be integrated using HTML syntax.
|
||||
Icons can be included to visually represent actions or categories. They can take many shapes, such as an image or button inserted in-line within a text paragraph. Icons can be integrated using HTML syntax.
|
||||
|
||||
Adding Icons
|
||||
To add an icon, use the following syntax:
|
||||
|
||||
markdown
|
||||
Code kopiëren
|
||||
<i class="fas fa-book"></i> Jupyter-Book
|
||||
This example adds a "book" icon before the text "Jupyter-Book."
|
||||
**Image Icons**
|
||||
|
||||
Combining Buttons and Icons
|
||||
Icons can also be included within buttons for a modern, professional look:
|
||||
Let's have a look at the first sentence of this chapter again.
|
||||
|
||||
markdown
|
||||
Code kopiëren
|
||||
<a href="https://jupyterbook.org" class="btn btn-primary">
|
||||
<i class="fas fa-download"></i> Download Book
|
||||
<a href="https://jupyterbook.org/"><img style="display:inline-block; height:1.5em; width:auto; transform:translate(0, -0.15em)" src="../images/logo-wide.svg" alt="Jupyter book"></a> provides a range of features which are visually appealing and functional.
|
||||
|
||||
Here the Jupyter-book logo was inserted for a more professional look. It's including a link `href` and and image saved as `../images/logo-wide.svg`
|
||||
|
||||
```
|
||||
<a href="https://jupyterbook.org/"><img style="display:inline-block; height:1.5em; width:auto; transform:translate(0, -0.15em)" src="../images/logo-wide.svg" alt="Jupyter book"></a> provides a range of features which are visually appealing and functional.
|
||||
```
|
||||
|
||||
**SVG Icons**
|
||||
|
||||
A library of SVG icons can be found [here](https://icons.getbootstrap.com/#icons).
|
||||
|
||||
By scrolling through the available icons in the library you can find just about any icon. Once selected, you need to copy the signature of the icon to include it in the `path` in the HTML code. This paragraph includes a globe: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z"/>
|
||||
</svg> " icon. As you can see in the code cell below, you'll need to specify the width, height as well as fill colour.
|
||||
|
||||
|
||||
```
|
||||
|
||||
This paragraph includes a globe: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z"/>
|
||||
</svg> " icon.
|
||||
|
||||
```
|
||||
|
||||
**Combining Buttons and Icons**
|
||||
|
||||
Icons can also be included within buttons for a modern, professional look. This button includes a download icon alongside some text: "Download it!".
|
||||
|
||||
Loving this book? <a href="https://jupyterbook.org" class="btn btn-primary">
|
||||
<i class="fas fa-download"></i> Download it!
|
||||
</a>
|
||||
This button includes a "download" icon alongside text.
|
||||
|
||||
4. Use Cases
|
||||
Here are some practical use cases for badges, buttons, and icons in a Jupyter-Book:
|
||||
```
|
||||
Loving this book? <a href="https://jupyterbook.org" class="btn btn-primary">
|
||||
<i class="fas fa-download"></i> Download it!
|
||||
</a>
|
||||
```
|
||||
|
||||
|
||||
|
||||
Badges: Highlight software version, repository status, or contributors.
|
||||
Buttons: Link to key sections of your book, such as downloads or external resources.
|
||||
Icons: Add visual appeal or clarity to navigation links or labels.
|
||||
Incorporating these elements into your Jupyter-Book improves both the aesthetic and functionality of your book, creating a more engaging experience for readers.
|
||||
Loading…
Add table
Add a link
Reference in a new issue