I made a custom snippet, see below. The strange thing for me is that the first 2 in this snippet work on every page the h2 doesnt show on a page unless I add that in the meta data cssClass: h2. Im not sure why the first two are applied to a page without using the cssClass Metadata area, but in order to use the h2 only works if its added by cssClass Metadata. I hope I explaned that well?
/* Custom reference material */
.callout[data-callout="reference-material"] {
--callout-title-color: 7, 179, 133;
--callout-color: 4, 135, 100;
--callout-icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 20px; width: 20px;"><g class="" transform="translate(0,0)" style=""><path d="M169 57v430h78V57h-78zM25 105v190h46V105H25zm158 23h18v320h-18V128zm128.725 7.69l-45.276 8.124 61.825 344.497 45.276-8.124-61.825-344.497zM89 153v270h62V153H89zm281.502 28.68l-27.594 11.773 5.494 12.877 27.594-11.773-5.494-12.877zm12.56 29.433l-27.597 11.772 5.494 12.877 27.593-11.772-5.492-12.877zm12.555 29.434l-27.594 11.77 99.674 233.628 27.594-11.773-99.673-233.625zM25 313v30h46v-30H25zm190 7h18v128h-18V320zM25 361v126h46V361H25zm64 80v46h62v-46H89z" fill="var(--callout-title-color)" fill-opacity="1"></path></g></svg>;
}
/* Custom Read Aloud Text */
.callout[data-callout="read-aloud-text"] {
--callout-title-color: 4, 135, 100;
--callout-color: 40, 204, 237;
--callout-icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 20px; width: 20px;"><g class="" transform="translate(0,0)" style=""><path d="M169 57v430h78V57h-78zM25 105v190h46V105H25zm158 23h18v320h-18V128zm128.725 7.69l-45.276 8.124 61.825 344.497 45.276-8.124-61.825-344.497zM89 153v270h62V153H89zm281.502 28.68l-27.594 11.773 5.494 12.877 27.594-11.773-5.494-12.877zm12.56 29.433l-27.597 11.772 5.494 12.877 27.593-11.772-5.492-12.877zm12.555 29.434l-27.594 11.77 99.674 233.628 27.594-11.773-99.673-233.625zM25 313v30h46v-30H25zm190 7h18v128h-18V320zM25 361v126h46V361H25zm64 80v46h62v-46H89z" fill="var(--callout-title-color)" fill-opacity="1"></path></g></svg>;
}
.h2 {
color: #33a652!important;
font-size: normal!important;
font-weight: 200;
}
