Builder
From v2.12.7 and above we've updated the markup to improve accessibility.
Default Builder
Sample Field
Flushed Builder
Sample Field
Static Field
Builder Header
Simple Header
This header just contains a call to action button.
Sample field
Complex Header
Some projects require extra settings on box builder fields, for those cases you are going to find useful this element variation.
Show element if
of the following conditions are met.
Apply on
Sample field
Builder Fields
Field Label
Labels can go alone (just text), or can be accompanied by an icon or an small image.
Text only
Text with icon
Single Action Field
Along with the basic field variations, you can add an action to your field. E.g. delete button.
Field with delete button
Field with informative tooltip
Field with dropdown list
Multi Actions Field
Some times you need to include two or more actions to your field. E.g. clone and delete buttons.
Actions should always be separated by a border. For that you need to use the separator element.
Sample Field
Hidden Actions
There are some actions that will be visually hidden, but will appear once user hovers on the field.
Sample Field
Draggable Field
Some fields need to be re-organized, for those cases you can use a drag-and-drop icon and move cursor for field. To enable move cursor you need to add
sui-can_move class to field.
Sample Field
Clickable Field
Some fields have extra settings on dialogs or external elements that appear after clicking on the field. For this case you need a pointer cursor that can be achieve adding
sui-can_open class to field.
Sample Field
Accordion Field
Some fields have extra settings on the same element that appear after clicking on it. For this case we use a mix of builder field and accordions element.
Sample Field
Extra settings go here...
Builder Footer
Some times you gonna need to add static fields that user won't be able to remove or re-organize. For those cases we will show you two examples: single element on footer and multiple elements on footer.
Single Element
Sample Field
Static Field
Multiple Elements
Sample Field
Static Field – Can't be removed
Static Field
Empty Message
Message Only
Nothing has been added yet. Click on "+ Insert Button" to add your first element.
Nothing has been added yet. Click on "+ Insert Button" to add your first element.
Nothing has been added yet. Click on "+ Insert Button" to add your first element.
Documentation
Base Structure
<div class="sui-box-builder"> <!-- Header --> <div class="sui-box-builder-header"> <button class="sui-button sui-button-blue"> <span class="sui-icon-plus" aria-hidden="true"></span> Insert Button </button> </div> <!-- Body / Content --> <div class="sui-box-builder-body"> <div class="sui-builder-fields"> <!-- Insert builder field(s) here --> </div> <button class="sui-button sui-button-dashed"> <span class="sui-icon-plus" aria-hidden="true"></span> Insert Button </button> <span class="sui-box-builder-message">Builder message</span> </div> <!-- Footer --> <div class="sui-box-builder-footer"> <!-- Inser static field(s) here --> </div> </div>
Base Field
<div class="sui-builder-field" tabindex="0"> <div class="sui-builder-field-label"> <span class="sui-icon-check" aria-hidden="true"></span> <span>Element</span> </div> <!-- Include here field element(s) --> </div>
Field Elements
You can include different elements to builder fields, from buttons to border separators.
Make use of sui-hover-show class on an element if you need to show it only when user hovers on sui-builder-field.
Icon button
<button class="sui-button-icon"> <span class="sui-icon-widget-settings-config" aria-hidden="true"></span> <span class="sui-screen-reader-text" data-content="Close settings">Open settings</span> </button>
Dropdown button
<div class="sui-dropdown"> <button class="sui-button-icon sui-dropdown-anchor"> <span class="sui-icon-widget-settings-config" aria-hidden="true"></span> <span class="sui-screen-reader-text">Open settings</span> </button> <ul> <li><button>Edit field</button></li> <li><button>Clone field</button></li> <li><button>Remove field</button></li> </ul> </div>
Field notice
<div class="sui-builder-field-notice" data-tooltip="Field information goes here" > <span class="sui-icon-info" aria-hidden="true"></span> </div>
Field elements separator
A simple border that's gonna keep content properly separated.
<div class="sui-builder-field-border" aria-hidden="true"></div>
Drag and drop
Some times builders allow to re-organize fields.
Include the following class sui-can-move next to sui-builder-field to make sure it uses move pointer.
<div class="sui-builder-field" tabindex="0"> <span class="sui-icon-drag" aria-hidden="true"></span> <div class="sui-builder-field-label"> <span class="sui-icon-check" aria-hidden="true"></span> <span>Element</span> </div> <!-- Include here field element(s) --> </div>