Dropdown menus
Buttons

Dropdown menus

Capture a snippet within the Editor
<div class="dropdown start">
</div>

First heading element

Add any text, images, bullets, etc. in the Editor, then add another code embed at the end.

<div class="dropdown end">
</div>

The text inside this dropdown was collected between the 'start' and 'end' <div> elements. The heading was provided in a div with class 'dropdown-heading.'

First heading element

Add any text, images, bullets, etc. in the Editor, then add another code embed at the end.

‍

Buttons

Default blue
<div style="text-align:center;">
  <a href="https://globalcompactusa.org">
    <button class="event-button">Default button</button>
  </a>
</div>
White
<div style="display:flex;justify-content: center;">
  <a href="https://globalcompactusa.org"><button class="event-button white">white button</button></a>
  <div style="width:20px;"></div>
  <a href="https://globalcompactusa.org"><button class="event-button white">white button</button></a>
</div>

The default blue button is centered by wrapping it in a <div> with style set to 'text-align: center.' The link is provided in the <a> tag that wraps the <button>.

‍

‍

Multiple buttons can be side by side by setting the wrapping <div> style to 'display: flex; justify-content: center;' In this case, it also helps to add a spacer <div> with style set to 'width: 20px.'

‍

Text here