Одиночное изображение:

<div class="image-wrapper">
    <a data-gallery="gallery-name" 
       href="/path/to/full-size-image.jpg" 
       title="Описание изображения" 
       class="cursor-loop">
        <div class="gallery-img middle-size lazyload" 
             style="background-image: url('/path/to/thumbnail.webp'); 
                    background-size: cover; 
                    background-position: center; 
                    width: 362px; 
                    height: 512px; 
                    border-radius: 8px;">
        </div>
    </a>
    <div class="image-caption">
        Описание изображения
    </div>
</div>

Информационные блоки:

<!-- Блок с предупреждением -->
<div class="warning-block">
    <div class="warning-title">
        <i class="fas fa-exclamation-triangle"></i>
        ЗАГОЛОВОК ПРЕДУПРЕЖДЕНИЯ
    </div>
    <p>Текст предупреждения</p>
</div>

<!-- Блок с выделением -->
<div class="highlight-block">
    <p class="highlight-text">Важный текст для выделения</p>
</div>

<!-- Призыв к действию -->
<div class="cta-block">
    <p class="cta-text">Текст призыва к действию</p>
    <a href="#link" class="btn-simple btn-large">Текст кнопки</a>
</div>

Стандартная таблица:

<div class="table-responsive">
<table class="article-table">
    <thead>
        <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Данные 1</td>
            <td>Данные 2</td>
        </tr>
    </tbody>
</table>
</div>

Таблица технических характеристик:

<table class="tech-specs-table">
    <thead>
        <tr>
            <th>Параметр</th>
            <th>Значение</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Характеристика 1</td>
            <td>Значение 1</td>
        </tr>
    </tbody>
</table>

Таблица с эффектом размытия:

<table class="table_blur">
    <thead>
        <tr>
            <th>Колонка 1</th>
            <th>Колонка 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Данные 1</td>
            <td>Данные 2</td>
        </tr>
    </tbody>
</table>

Адаптивная таблица с прокруткой:

<div class="table-scroll">
<table>
    <thead>
        <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Данные 1</td>
            <td>Данные 2</td>
        </tr>
    </tbody>
</table>
</div>

Развернутый список (.detailed):

<div class="numbered-list detailed">
    <h3>Заголовок списка</h3>
    <ol>
        <li>
            <div class="step-content">
                <span class="step-number">1</span>
                <div class="step-text">
                    <strong>Заголовок пункта</strong>
                    <p>Описание пункта</p>
                </div>
                <div class="step-icon">
                    <i class="fas fa-cog"></i>
                </div>
            </div>
        </li>
    </ol>
</div>

Компактный список (.compact):

<div class="numbered-list compact">
    <h4>Заголовок списка</h4>
    <ol>
        <li>
            <div class="step-icon">
                <i class="fas fa-check"></i>
            </div>
            <span class="step-text">Текст пункта</span>
        </li>
    </ol>
</div>

Простой список (.simple):

<div class="numbered-list simple">
    <h4>Заголовок списка</h4>
    <ol>
        <li>
            <span class="step-number">1</span>
            <span class="step-text">Текст пункта</span>
        </li>
    </ol>
</div>

<div class="compressor-article">
    <div class="article-header">
        <h2>Заголовок статьи</h2>
    </div>
    
    <div class="article-content">
        <p>Основной текст статьи...</p>
        
        <div class="advantages-list color-scheme-blue">
            <ul>
                <li><i class="fa fa-cog advantage-icon"></i>Характеристика 1</li>
                <li><i class="fa fa-check advantage-icon"></i>Характеристика 2</li>
            </ul>
        </div>
        
        <div class="contacts-block">
            <!-- Контакты -->
        </div>
    </div>
</div>

<div class="compressor-article">
    <div class="article-header">
        <h2>Винтовые компрессоры CrossAir CA-7.5</h2>
    </div>
    
    <div class="article-content">
        <p>Винтовые компрессоры CrossAir CA-7.5&nbsp;китайского производства...</p>

        <h3>CrossAir CA-7.5: технические особенности</h3>
        
        <div class="advantages-list color-scheme-blue">
            <ul>
                <li><i class="fa fa-cog advantage-icon"></i>Прямой&nbsp;привод...</li>
                <li><i class="fa fa-cube advantage-icon"></i>Винтовой блок Baosi BS-75</li>
                <li><i class="fa fa-shield advantage-icon"></i>Класс защиты IP54</li>
            </ul>
        </div>

        <div class="contacts-block color-scheme-blue">
            <p class="bold-text">ООО "ПромКомТех" - официальный дилер...</p>
            
            <div class="contact-phones">
                <a href="tel:+74952527664" class="phone-link"><i class="fa fa-phone"></i> +7 (495) 252-76-64</a>
                <a href="tel:88005512860" class="phone-link"><i class="fa fa-phone"></i> 8 800 551-28-60</a>
            </div>
        </div>
    </div>
</div>