diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index b3551aa..6f09068 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -43,10 +43,22 @@ The basic code syntax for creating a button is as follows: :color: primary ``` +``` + ```{button-link} https://teachbooks.io + :color: primary + ``` +``` + ```{button-ref} ../features/overview.md -:color: primary +:color: secondary ``` +``` + ```{button-ref} ../features/overview.md + :color: secondary + ``` +``` + Buttons can be customized in markdown in a similar way as figures. You can experiment with these styles to create buttons that align with your book's theme. Here are the set of parameters which can be customized: @@ -65,29 +77,50 @@ Buttons can be customized in markdown in a similar way as figures. You can exper Finally here are some examples: ```{button-link} https://teachbooks.io -TeachBooks :color: warning :shadow: + +TeachBooks +``` + +``` + ```{button-link} https://teachbooks.io + :color: warning + :shadow: + + TeachBooks + ``` + ``` ```{button-link} https://teachbooks.io -TeachBooks :color: success :outline: :expand: + +TeachBooks ``` +``` + ```{button-link} https://teachbooks.io + :color: success + :outline: + :expand: + + TeachBooks + ``` +``` + + ## Icons 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. To add an icon, use the following syntax: -**Image Icons** +**1. Image Icons** -Let's have a look at the first sentence of this chapter again. - -Jupyter book provides a range of features which are visually appealing and functional. +Let's have a look at the first sentence of this chapter again: Jupyter book 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` @@ -95,13 +128,13 @@ Here the Jupyter-book logo was inserted for a more professional look. It's inclu Jupyter book provides a range of features which are visually appealing and functional. ``` -**SVG Icons** +**2. SVG Icons** -A library of SVG icons can be found [here](https://icons.getbootstrap.com/#icons). +A library of SVG icons can be found in the [Bootstrap](https://icons.getbootstrap.com/#icons) library. By scrolling through the available icons in the library you can find just about any icon. Once selected, you need to copy the SVG of the icon to include it in the `path` in the HTML code. This paragraph includes a globe: - " icon. As you can see in the code cell below, you'll need to specify the width, height as well as fill colour. + icon. As you can see in the code cell below, you'll need to specify the width, height as well as fill colour. ``` @@ -112,7 +145,7 @@ This paragraph includes a globe: