Just a quick post to share a design element. Similar to the ability to use a separator above or below or left or right using a nested column, just using some custom CSS makes it easy to do. This CSS can easily be edited to meet your needs.
This is an H2 title.
This is an h3 title.
This is an h4 title.
.has-title-bar {
display: flex!important;
align-items: center;
gap:10px;
}
.has-title-bar:before {
content: "";
width: 70px; /* adjust the width of the bar */
margin-right: 20px; /* adjust the spacing of the bar */
background-color: var(--awb-custom_color_8); /* adjust the color of the bar */
display: inline-block;
height:5px; /* adjust the height of the bar */
}
Originally published on July 9, 2022