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

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

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

<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>

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

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

<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>

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

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

<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>