Better styling for callout boxes

[topepo]

I don't like the quarto default:

The ones in Interactively exploring high-dimensional data and models in R (examples) are beautiful and Mine's class notes ones are also an improvement.

[krz]

What do you have in mind? Something with an image like in your first link? Which colors?

here is something you can try in https://jsfiddle.net/

html:

<div class="insight">
Some content.
</div>

css:

.insight {
  padding: 2em;
  padding-left: 100px;
  margin: 2em 0;
  background-color: #e2ecb0;
  background-image: url("https://i.ibb.co/zVFnfq1/leaf-clean.png");
  background-size: 60px;
  background-position: 10px 1em;
  background-repeat: no-repeat;
  border-right: 6px solid #5b6d3c;
  position: relative;
  font-size: 0.9em;
  border-radius: 3px;
}

[topepo]

Looking around, something like these would be good. I like the solid color in the header and body along with the bevel.

[krz]

maybe something like this:

html:

<div class="importantinfo">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

css:

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@100;300&display=swap');

.importantinfo {
  padding: 0.25em 1em 1em 3em;
  margin-top: 20px;
  margin-bottom: 20px;
  background: #a9d3ab 5px center/3em no-repeat;
  background-image: url("https://svgshare.com/i/11W1.svg");
  background-position: 0.6em 0.5em;
  background-size: 3% auto;
  border-radius: 10px;
  font-size: 18px;
  font-family: "Libre Franklin", sans-serif;
}

.importantinfo::before {
  content: "Important information";
  font-family: "Libre Franklin", sans-serif;
  font-weight: bolder;
  display: block;
  padding: 0.4em 0em;
  vertical-align: middle;
  font-size: 20px;
}

[topepo]

That looks great!

[topepo]

We might be able to use fontawesome or iconify images (free collections).

[topepo]

These icons are under a MIT license.

[topepo]

Can you make a PR into aml4td.scss with this and a GH url?

In the quarto sources, we can use this syntax:

::: {.importantinfo}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
:::

It requires the devel version of Quarto.

We really appreciate your help.

[krz]

nice, thanks. This is how it looks:

Will open a PR later and work on some different color options

[topepo]

Closed via ##28