<div class="gu-1of3 gu-m-1of1">
  <div class="bx-flip">
    <div class="bx bx-flip-front">
      <h2 class="h-bx">
      <button data-comp="flipbox" data-event="click" class="h-bx-link bx-flip-turn tooltip tooltip-left bootnode">
        <i class="vicon vicon-settings"></i>
        <span class="tooltip-content">Settings</span>
      </button>
      Box title
      </h2>
      Content on the front side
    </div>
    <div class="bx bx-flip-back">
      <h2 class="h-bx">
      <button data-comp="flipbox" data-event="click" class="h-bx-link bx-flip-turn tooltip tooltip-left bootnode">
        <i class="vicon vicon-close"></i>
        <span class="tooltip-content">Close</span>
      </button>
      Box settings
      </h2>
      Content on the back side content on the back side content on the back side content on the back side content on the back side content on the back side content on the back side.
    </div>
  </div>
</div>

<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<div class="bx-flip">
  <div class="bx bx-flip-front">
    <h2 class="h-bx">
    <button data-comp="flipbox" data-event="click" class="h-bx-link bx-flip-turn tooltip tooltip-left bootnode">
      <i class="vicon vicon-settings"></i>
      <span class="tooltip-content">Settings</span>
    </button>
    Box title
    </h2>
    Content on the front side
  </div>
  <div class="bx bx-flip-back">
    <h2 class="h-bx">
    <button data-comp="flipbox" data-event="click" class="h-bx-link bx-flip-turn tooltip tooltip-left bootnode">
      <i class="vicon vicon-close"></i>
      <span class="tooltip-content">Close</span>
    </button>
    Box settings
    </h2>
    Content on the back side content on the back side content on the back side content on the back side content on the back side content on the back side content on the back side.
  </div>
</div>
```
{{/markdown}}

{{> copy-code}}
</div>
