Two Column Callout

Creation Replication

Add Column Block

Once the column block has been added to the row, update the settings to have two equal-width columns.

• Set the row as full width
• In the settings, update the row background to #500000 (maroon) or any additional color desired

Within Each Column

1. Add a Heading Block and mark as H3

   • Add the desired section title
   • Bold the title
   • Set as left aligned

2. Add a Paragraph Block

   • Add desired description of the title (not required)
   • Set as left aligned

Custom Code Additions

Yellow Header Arrow

The code below adds the yellow arrow to the header of each section. You can add the yellow arrow to any H3 header using the code below:

h3.has-text-color::after {
content: "";
display: inline-block;
width: 1.1rem;
height: 1.1rem;
/* margin-left: 0.3em; */
position: relative;
top: -0.2rem;
transform: rotate(-45deg);
border-style: solid;
border-color: rgb(255, 228, 4);
border-image: initial;
border-width: 0px 4px 4px 0px;
}

h3.has-text-color {
display: inline-block;
white-space: nowrap;
}