@xiee/utils/css/callout.css

Miscellaneous tools and utilities to manipulate HTML pages

fieldset {
  font-size: .9em;
  margin: 1em auto;
}
legend {
  font-weight: bold;
  border-style: groove;
  padding: 2px .5em;
  background: white;
}
.callout {
  legend::before {
    content: var(--callout-icon);
  }
  legend::after {
    content: attr(data-legend);
    text-transform: uppercase;
  }
  background: var(--callout-background);
  &, legend { border-color: var(--callout-border); }
}
.callout-tip {
  --callout-border: honeydew;
  --callout-icon: "☆ ";
}
.callout-caution {
  --callout-border: aqua;
  --callout-background: azure;
  --callout-icon: "☂ ";
}
.callout-important {
  --callout-border: gold;
  --callout-background: lemonchiffon;
  --callout-icon: "☀ ";
}
.callout-note {
  --callout-border: lightskyblue;
  --callout-icon: "⚑ ";
}
.callout-warning {
  --callout-border: salmon;
  --callout-background: mistyrose;
  --callout-icon: "⚠ ";
}
.callout-example {
  --callout-border: mintcream;
  --callout-icon: "♧ ";
}