How to add HTML code to a Quarto website?

Question

Basically, it should be possible to copy html-code directly into a Quarto document (.qmd) and then render it to an html-website.

I tried to do that and copied the following code from the Simplex Theme to a quarto website:

<div class="card border-primary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Secondary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>

However, the results only partially works:

Do I make something wrong?

Answer 1

You can add raw HTML content to the quarto document safely by letting quarto (actually pandoc!) know that you are adding raw content and to do that warp the html code as is with {=html}.

---
title: "RAW HTML CONTENT"
format: html
css: bootstrap.min.css
---


```{=html}
<div class="card border-primary mb-3" style="max-width: 20rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h4 class="card-title">Primary card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
```

---

---

Answer 2

For me it works as expected, eg.

---
title: "Test"
---

# make simplex button

<button type="button" class="btn btn-primary btn-lg">Large button</button>


# make card


<div class="card border-primary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Secondary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>

Output:

I assume your problem is related to spaces, e.g. this works

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

while if there are white spaces in the beginning of a line, it does not work, e.g.

  <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

Output: