This is a title with an underline
Add the class title-underline
onto the "Css class" box on the widget to apply to all headers in the widget, or alternatively add the class directly onto the desired header tag eg <h1 class="title-underline"> This is a title with an underline</h1>
directly
Example h2
And here's another:
Example h3
Helper CSS Classes
/* text color base */
.text-color {}
/* text color white */
.text-white {}
/* text color primary */
.text-primary {}
/* text color secondary */
.text-secondary {}
/* text color tertiary */
.text-tertiary {}
/* text uppercase */
.text-uppercase {}
/* font size * 1.125 */
.text-large {}
/* font size * 1.5 */
.text-larger {}
/* font size * 0.9 */
.text-small {}
/* font size * 0.75 */
.text-smaller {}
/* background black */
.bg-black {}
/* background lightgrey */
.bg-lightgrey {}
/* background primary */
.bg-primary {}
/* background secondary */
.bg-secondary {}
/* background tertiary */
.bg-tertiary {}
/* padding vertical none */
.p-none {}
.p-top-none {}
.p-bot-none {}
/* padding vertical default */
.p-default {}
.p-top-default {}
.p-bot-default {}
/* padding vertical half */
.p-half {}
.p-top-half {}
.p-bot-half {}
/* margin vertical none */
.m-none {}
.m-top-none {}
.m-bot-none {}
/* margin vertical default */
.m-default {}
.m-top-default {}
.m-bot-default {}
/* margin vertical half */
.m-half {}
.m-top-half {}
.m-bot-half {}
/* row vertical align items */
.row-align-items-start {}
.row-align-items-center {}
.row-align-items-end {}
.row-align-items-stretch {}
/* row gap between columns + rows */
.row-gap-sm {}
.row-gap-md {}
/* row padding large */
.row-p-lg {}
/* row background */
.row-bg-primary {}
.row-bg-secondary {}
.row-bg-tertiary {}
.row-bg-text {}
/* banner image cover */
.banner-cover {}