Skip to content

Action Button Row

brooke-harper edited this page Mar 2, 2020 · 3 revisions

Action Button Row

Creation Replication

Add Column Block

Once the column block has been added to the row, update the settings to have three equal-width columns. Additionally, make sure the row is set to full width.

Within Each Column

  1. Add a Heading Block and mark as H3

    • Add the desired section title
    • Set as left aligned
  2. Add a Paragraph Block

    • Add desired text
    • Set as left aligned
  3. Add Button Block

    • Update button text as desired
    • Set as left aligned
    • Additional buttons can be added by repeating the steps previously listed

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;
}

Clone this wiki locally