Личный кабинет OneBox CRM
Связаться с нами
+38 (067) 328-75-45
+38 (050) 324-46-54
Кабинет клиентаБаза знаний › Просмотр базы знаний

Логические блоки

Логические блоки необходимы для группировки контента в блочном виде.
Таким образом, можно лучше акцентировать внимание пользователя на блоке контента.

Стандартный блок


<div class="ob-block-element">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus accusantium ad aliquam asperiores at atque commodi debitis delectus deserunt dignissimos doloremque dolores, eligendi error exercitationem expedita fuga laboriosam mollitia nesciunt nulla numquam odit officia omnis praesentium, quas qui quibusdam quo recusandae reiciendis repellendus saepe sapiente sequi sunt, suscipit vero.
</div>

Пример


Блок с шапкой и подвалом

Для вывода блока с шапкой или подвалом необходимо использовать дополнительные блоки
.block-caption
и
.block-foot
соответственно.
Это расширяет функционал блока и позволяет добавлять дополнительную информацию относящуюся к данному логичскому блоку.


<div class="ob-block-element">
    <div class="block-caption">Example head</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus accusantium ad aliquam asperiores at atque commodi debitis delectus deserunt dignissimos doloremque dolores, eligendi error exercitationem expedita fuga laboriosam mollitia nesciunt nulla numquam odit officia omnis praesentium, quas qui quibusdam quo recusandae reiciendis repellendus saepe sapiente sequi sunt, suscipit vero.
    <div class="block-foot">Example foot</div>
</div>

Пример


Блок обвертка

Для вывода дополнительного блока(например таблицы) внутри логического блока необходимо использовать блок обвертку.
Для этого используется модификатор
.wrapped



<div class="ob-block-element wrapped">
    <div class="block-caption">Example head</div>
    <div class="shop-overflow-table">
        <table class="shop-table" width="150%">
            <thead>
                <tr>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td>Column content</td>
                    <td>Column content</td>
                </tr>
            </thead>
            <tr>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
            </tr>
            <tr>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
            </tr>
        </table>
    </div>
</div>

Пример


Блок деталей

Данный тип блока также может содержать шапку и подвал, как и стандартынй блок.
Он отличается от стандартного логического блока заливкой фона, что позволяет еще лучше акцентировать внимание пользователя на его контенте.


<div class="ob-block-details">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus accusantium ad aliquam asperiores at atque commodi debitis delectus deserunt dignissimos doloremque dolores, eligendi error exercitationem expedita fuga laboriosam mollitia nesciunt nulla numquam odit officia omnis praesentium, quas qui quibusdam quo recusandae reiciendis repellendus saepe sapiente sequi sunt, suscipit vero.
</div>

Пример