Что бы вывести блок внутри процесса нужно использовать следующий HTML код:
<div class="ob-block-details">
<div class="block-caption">
Block caption
</div>
<div class="">
...
</div>
</div>
Группировка дата блоков осуществляется с помощью логического блока "блок деталей", он позволяет выстраивать дата блоки и объединять их в формы.
Такая структура будет полезна при построении форм заказа, задачи и т.д..
<div class="ob-block-details">
<div class="block-caption">
Block Caption
</div>
<div class="flex-wrap">
<div class="ob-data-element js-data-element">
<div class="data-view">
<div class="el-caption">Sample Caption</div>
<div class="el-value">
Sample value
<a class="ob-link-edit" href="#"></a>
</div>
</div>
<div class="data-edit" style="display: none;">
<a class="ob-link-delete" href="#"></a>
<a class="ob-link-accept" href="#"></a>
<textarea>Example value</textarea>
</div>
</div>
<div class="ob-data-element js-data-element">
<div class="data-view">
<div class="el-caption">Sample Caption</div>
<div class="el-value">
Sample value
<a class="ob-link-edit" href="#"></a>
</div>
</div>
<div class="data-edit" style="display: none;">
<a class="ob-link-delete" href="#"></a>
<a class="ob-link-accept" href="#"></a>
<textarea>Example value</textarea>
</div>
</div>
<div class="ob-data-element js-data-element">
<div class="data-view">
<div class="el-caption">Sample Caption</div>
<div class="el-value">
Sample value
<a class="ob-link-edit" href="#"></a>
</div>
</div>
<div class="data-edit" style="display: none;">
<a class="ob-link-delete" href="#"></a>
<a class="ob-link-accept" href="#"></a>
<textarea>Example value</textarea>
</div>
</div>
<div class="ob-data-empty"></div>
<div class="ob-data-empty"></div>
<div class="ob-data-empty"></div>
</div>
</div>
Блок ob-data-empty необходим для компенсации свободного места в некратных колонках.