quarto tips

cards

header here

Cards are really useful to give emphasis to whatever you need, such as tips, questions, warnings, etc. You can put links, images, whatever. Try other colors, such as .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-dark, etc.


another one

This doesn’t have a header.

::: {.card .bg-info}
::: {.card-header}
[header here]{.h3}
:::
::: {.card-body .pb-0}
Cards are really useful to give emphasis to whatever you need, such as tips, questions, warnings, etc. You can put [links](https://yairmau.com){.text-light .text-decoration-underline}, images, whatever. Try other colors, such as `.bg-primary`, `.bg-secondary`, `.bg-success`, `.bg-danger`, `.bg-warning`, `.bg-dark`, etc.
:::
:::
<br>

another one

::: {.card .bg-warning .card-body .pb-0}
This doesn't have a header.
:::

offcanvas

Answer

Pythagoras’ formula:

c = \sqrt{a^2 + b^2}

Question: what is Pythagoras’ formula for the hypotenuse of a right triangle?

Answer here

::: {#offcanvasPythagoras .offcanvas .offcanvas-start}
::: {.offcanvas-header}
### Answer {.unnumbered .unlisted}
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
:::
::: {.offcanvas-body}
Pythagoras' formula:

$$c = \sqrt{a^2 + b^2}$$
:::
:::

Question: what is Pythagoras' formula for the hypotenuse of a right triangle?

::: {.btn .btn-warning data-bs-toggle="offcanvas" data-bs-target="#offcanvasPythagoras" style="height: 2.5rem; line-height: 2.3rem; padding-top: 0; padding-bottom: 0;"}
Answer here
:::

footnotes

  • What is the capital of France?? 1
  • What is the element with 77 protons? 2
* What is the capital of France?? [^1]
* What is the element with 77 protons? [^2]

[^1]: Paris
[^2]: Iridium

callout

Note to self

asdf

10!

::: {.callout-important}
## Note to self

asdf
:::

::: {.callout-note collapse="true" icon=false}
##  How many seconds are there in six weeks?

10!
:::

details

click here to see more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more 
<details>
<summary>click here to see more</summary>
more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more more 
</details>

column margin

Let’s say I’m writing something, and I would love to open some parenthesis and give extra context, but I don’t want to break the flow of the text. I can use this nice trick to put extra stuff on the side of the paragraph.

This is the extra stuff I wanted to mention without breaking the flow of the text. I can put links, images, whatever I want here.

Let’s say I’m writing something, and I would love to open some parenthesis and give extra context, but I don’t want to break the flow of the text. I can use this nice trick to put extra stuff on the side of the paragraph.

Let's say I'm writing something, and I would love to open some parenthesis and give extra context, but I don't want to break the flow of the text. I can use this nice trick to put extra stuff on the side of the paragraph.

::: {.column-margin}
This is the extra stuff I wanted to mention without breaking the flow of the text. I can put links, images, whatever I want here.
:::

Footnotes

  1. Paris↩︎

  2. Iridium↩︎