компонент
Карточки
заголовки
секции
блоки
прозрачно
цвета
кнопки
кнопМоды
Отступы
Располож
РаскрБлок
изобрКонт
Текст
Размеры
Списки

<?$APPLICATION->IncludeComponent("dev:card","",Array(),false);?>

Подзаголовок

Описание

<?$APPLICATION->IncludeComponent(
    "dev:plain-slider",
    ".default",
    array(
        "IMAGE" => "",
        "IMAGE_URLS" => array(
            0 => "/upload/medialibrary/9d7/ckb33kj3qzn5sl36liij0ebgleix4ynn.jpg",
            1 => "/upload/medialibrary/2a5/9r70pwcwya0e3peeywml5pzzfbeu513r.jpg",
            2 => "/upload/medialibrary/a45/gfd0fnr4nuohqvia5gx0uinljuao86fu.jpg",
        ),
        "COMPONENT_TEMPLATE" => ".default"
    ),
    false
);?>

Карточки

Карточка с выезжающем изображением

<div class="block-white-normal">
    <div class="img-bg mb-small h-350" style="margin-top: -48px;">
        <div class="img-bg__container border-radius-medium ">
            <img src="/upload/iblock/abe/h3v9b55ld124kvfwgd3cguynn938crxa.jpg" alt="" srcset="">
        </div>
    </div>
    <h3 class="h3 color-corp text-center mb-smaller"><strong>Заголовок</strong></h3>
    <p class="h3 color-corp text-center mb-normal">
        <strong>Текст...</strong>
    </p>
    <a class="btn-classic btn-w-auto mb-small" href="#!">кнопка</a> <a class="btn-link-ext text-center btn-w-auto" href="#!">доп кнопка</a>
</div>

Карточка обычная с попапом

<div class="block-white">
    <div class="img-bg h-300 mb-normal">
        <div class="img-bg__container border-radius-top-medium">
            <img src="/upload/iblock/ac6/djx4vv9anf5xnqe3uwp06ydeakv36ulr.png" alt="">
        </div>
    </div>
    <div class="section-1 ">
        <div class="h3 adaptive text-center color-corp-light">Заголовок</div>
        <div class="mt-auto block-center">
            <button class="btn-classic block-center mb-small">Кнопка</button>
            <button class="btn-light block-center" id="unique-id-3">Открыть попап</button>
        </div>

    </div>
    <pop-up for="#unique-id-3" background-color="var(--color-white-blue)">
        <div class="wrapper">
            <div class="section-1">

                <div class="block-transparent-normal">
                    <h1 class="h1 mb-normal">Попап</h1>
                    <p>Текст попапа</p>
                </div>
            </div>
        </div>
    </pop-up>
</div>

Заголовок

Текст...

кнопка доп кнопка

Заголовок

Попап

Текст попапа

<<div class="circle-bust"><p>любой текст зачёркнут</p></div>

любой текст зачёркнут

Основной заголовок страницы

            <h1 class="normal-header">normal-header</h1>

normal-header

Контейнер для заголовка double-header

            <div class="double-header">
    <h1 class="section-header main-content__header">Парный заголовок</h1>
    <a class="btn-link" href="/lnk">Ссылка</a> <a class="btn-link-ext" href="/link">Ссылка</a>
</div>

Парный заголовок

Ссылка Ссылка

Секции

Секция с одним блоком


<section class="section-1"></section>

section-1

Блок обычный белый

Блок обычный синий

Секции с двумя блоками


<section class="section-2"></section>

section-2

Блок обычный белый

Блок обычный синий

section-2-1


<section class="section-2-1"></section>

Блок обычный белый

Блок обычный синий

section-1-2


<section class="section-1-2"></section>

Блок обычный белый

Блок обычный синий

Особые Секции

Полукруглая секция


<div class="rounded-section">
    <div class="rounded-section__content">
        <section class="color-white">
            <?$APPLICATION->IncludeComponent(
                "bitrix:breadcrumb",
                "",
                Array(
                    "PATH" => "",
                    "SITE_ID" => "s1",
                    "START_FROM" => "0"
                )
            );?>
        </section>

        <div class="wrapper">
            <section class="section-1">

                <div class="color-white">

                    <div class="mtb-large">
                        <h1 class="h1 adaptive mb-small">Заголовок</h1>
                        <p class="text adaptive mb-large">Подпись</p>
                        <div class="w-50">
                            <a href="/" class="btn-light bg-color-white btn-w-auto mb-smaller">Белая кнопка</a>
                            <a href="" class="btn-light-white btn-w-auto">Белые контуры</a>
                        </div>
                    </div>

                </div>
            </section>

        </div>
    </div>
    <div class="rounded-section__container-img">
        <img src="/upload/medialibrary/162/v7yhs2ftsfjaca00q5frj5gdslf4gc7s.jpg" alt="">
    </div>
</div>

Заголовок

Подпись

Белая кнопка Белые контуры

Второй вариант круглой секции

<section class="section-1">
    <div class="rounded-section border-radius-medium">
        <div class="rounded-section__content">
            <div class="wrapper">
                <section class="section-1">
                    <div class="color-white">
                        <div class="mtb-large">
                            <h1 class="h1 adaptive mb-small">Заголовок</h1>
                            <p class="text adaptive mb-large">Подпись</p>
                            <div class="w-50">
                                <a href="/" class="btn-light bg-color-white btn-w-auto mb-smaller">Белая кнопка</a>
                                <a href="" class="btn-light-white btn-w-auto">Белые контуры</a>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="rounded-section__container-img">
            <img src="/upload/medialibrary/162/v7yhs2ftsfjaca00q5frj5gdslf4gc7s.jpg" alt="">
        </div>
    </div>
</section>

Заголовок

Подпись

Белая кнопка Белые контуры

Блоки

<div class="block-white-normal"></div>

<div class="block-gradient-normal"></div>

<div class="block-corp-normal"></div>

<div class="block-white-medium"></div>

<div class="block-gradient-medium"></div>

<div class="block-corp-medium"></div>

<div class="block-white-big"></div>

<div class="block-gradient-big"></div>

<div class="block-corp-big"></div>

<div class="
    block-icon-white-big
    icon-analytics
"></div>

<div class="
    block-icon-gradient-big
    icon-approve-rounded
    icon-middle
"></div>

<div class="
    block-icon-corp-big
    icon-call
    icon-bottom
"></div>

section-solid

<div class="section-solid">
    <div class="block-corp-normal"></div>
    <div class="block-white-normal"></div>
    <div class="block-corp-normal"></div>
</div>

243

section-solid

<div class="section-solid">
    <div class="block-corp-normal"></div>
    <div class="block-white-normal"></div>
</div>

<div class="block-white-normal"></div>
    <div class="block-corp-normal"></div>
</div>

section-solid

<div class="divided-by-line">
    <div>1</div>
    <div>222</div>
    <div>333333</div>
</div>

<div class="divided-by-line">
    <div class="icon-bus h0"></div>
    <div>Автобус</div>
</div>

<div class="divided-by-line-static">
    <div>1</div>
    <div>222</div>
    <div>333333</div>
</div>

222

333333

Автобус

222

333333

flex-space-around

Ограничители ширины блока

w-100

w-80

w-50

w-30

Скругления блоков / высоты блоков

h-100 h-adaptive-450 border-radius-large

h-130 h-adaptive-400 border-radius-medium

h-150 h-adaptive-350 border-radius-small

h-200 h-adaptive-300 border-radius-top-medium

h-250 h-adaptive-250 border-radius-left-medium

h-300 h-adaptive-200 border-radius-right-medium

h-350 h-adaptive-150

h-400 h-adaptive-130 border-radius-bottom-medium

h-450 h-adaptive-100

Выравниввание ограниченных блоков по горизонтали

block-center

block-left

block-right

Выравнивание внутри блоков (класс нужно задавать родителю блока)

flex-align-middle

Вложенный блок

<div class="flex-align-middle">
    <div>Блок вверху</div>
</div>

flex-align-top

Вложенный блок

<div class="flex-align-top">
    <div>Блок вверху</div>
</div>

flex-align-bottom

Вложенный блок

<div class="flex-align-bottom">
    <div>Блок вверху</div>
</div>

Прозрачность

opacity-100

100

opacity-90

opacity-80

opacity-70

opacity-60

opacity-50

opacity-40

opacity-30

opacity-20

opacity-10

Цвета

bg-color-white color-dark color-corp color-corp-hover color-corp-light color-blue color-blue-light color-grey

bg-color-corp color-white color-white-blue

Кнопки

<a class="btn-light"></a>

btn-light

<a class="btn-light-ext"></a>

btn-light-ext

<a class="btn-light-white"></a>

btn-light-white

<a class="btn-light-white-ext"></a>

btn-light-white-ext

<a class="btn-link-ext"></a>

btn-link-ext

<a class="btn-link-ext-white"></a>

btn-link-ext-white

<a class="btn-link"></a>

btn-link

<a class="btn-link-white"></a>

btn-link-white

<a class="btn-classic"></a>

btn-classic

<a class="btn-classic-light"></a>

btn-classic-light

<a class="btn-classic-white"></a>

btn-classic-white

<a class="btn-classic-white-ext"></a>

btn-classic-white-ext

<a class="btn-rounded"></a>

btn-rounded

<a class="btn-rounded-ext"></a>

btn-rounded-ext

<a class="btn-rounded-white"></a>

btn-rounded-white

<a class="btn-rounded-white"><span class="icon-bus"></span></a>

<a class="btn-rounded-white-ext"></a>

btn-rounded-white-ext

Модификаторы кнопок

btn-w-auto

btn-text-left

btn-w-auto

btn-text-right

btn-w-auto

btn-content-between

btn-h-auto

btn-type-arrow-bottom

btn-hide-borders

btn-type-link

Отступы

Варианты:

m - margin
mb - margin-bottom
mr - margin-right
ml - margin-left
mtb - margin-top-bottom
mlr - margin-left-right
gap - gap

mb-larger

144/72

mb-large

72/32

mb-normal

32/16

mb-medium

20/16

mb-small

16/14

mb-smaller

8/8

mb-0

0/0

Раскрывающийся блок

            <details class="details-sweep">
    <summary class="btn-classic">details-sweep</summary>
    <p>
        Текст внутри
    </p>
</details>

details-sweep

Текст внутри

            <details class="details-sweep-info">
    <summary>details-sweep-info</summary>
    <p>
        Текст внутри
    </p>
</details>

details-sweep-info

Текст внутри

            <details class="details-sweep-transparent">
    <summary>details-sweep-transparent</summary>
    <p>
        Текст внутри
    </p>
</details>

details-sweep-transparent

Текст внутри

Контейнеры изображений

Фоновое изображение

            <div class="img-bg">
    <div class="img-bg__container">
        <img src="/upload/medialibrary/cfb/3wtyqmmzprgs9qrxnrj4dr62wvyb7o1z.jpg" alt="" srcset="">
    </div>
</div>

Круглое изображение

                    <div class="rounded-foto">
        <img alt="Фото директора" src="/upload/main/09c/aw35vvs3mi1dcuygj6jwp3rl0akm2bmu.jpg">
    </div>

Текст

text-boldtext-uppercase

<a href="tel:88005553535" class="phone-number">phone-number</a>

phone-number

double-check-mark

double-check-mark-white

Размеры

h0 (52)

h1 (32)

h2 (24)

h3 (20)

h4 (18)

text (16)

text-m (14)

text-s (12)

h0 adaptive (52/40)

h1 adaptive (32/20)

h2 adaptive (24/20)

h3 adaptive (20/18)

h4 adaptive (18/14)

text adaptive (16/14)

text-m adaptive (14/14)

text-s adaptive (12/12)

Списки

            <ul class="pointed-list">
    <li>pointed-list</li>
    <li>pointed-list</li>
    <li>pointed-list</li>
</ul>

pointed-list
pointed-list
pointed-list

                    <ul class="icons-list">
    <li class="icon-books">icons-list</li>
    <li class="icon-balance">icons-list</li>
    <li class="icon-badge">icons-list</li>
    <li class="icon-coffee">icons-list</li>
</ul>

icons-list
icons-list
icons-list
icons-list

                    <ul class="dashed-list">
    <li>dashed-list</li>
    <li class="dashed-list__price-container">
        <div>
            dashed-list__price-container
        </div>
        <div>
            1000
        </div>
    </li>
    <li>dashed-list</li>
    <li>dashed-list</li>
</ul>

dashed-list
dashed-list__price-container

1000
dashed-list
dashed-list

Модификаторы списков (работают у всех типов списков)

В две колоники

Толстый шрифт

list-two-columns
список
список
список

list-bold
список
список
список

Размеры точек/иконок

list-point-size-larger
список
список

list-point-size-large
список
список

list-point-size-small
список
список

Отступы точек/иконок

list-point-margin-medium (12px)
список
список

Цвета точек/иконок (красить классом можно и весь список целеком, и отдельный элемент списка. Доступны все цвета)

            <ul class="pointed-list color-point-corp">
    <li>pointed-list</li>
    <li>pointed-list</li>
    <li>pointed-list</li>
</ul>

            <ul class="pointed-list">
    <li class="color-point-corp">pointed-list</li>
    <li class="color-point-grey">pointed-list</li>
    <li class="color-point-blue-light">pointed-list</li>
</ul>

color-point-corp
список
список

color-point-corp
color-point-grey
color-point-blue-light

Центрирование точек/иконок

обычный список
Однозначно, элементы политического процесса набирают популярность среди определенных слоев населения, а значит, должны быть обнародованы. Наше дело не так однозначно, как может показаться: синтетическое тестирование однозначно определяет каждого участника как способного принимать собственные решения касаемо стандартных подходов! Следует отметить, что сплочённость команды профессионалов предопределяет высокую востребованность стандартных подходов.

Иконки центрированы pointed-list_point-center
Однозначно, элементы политического процесса набирают популярность среди определенных слоев населения, а значит, должны быть обнародованы. Наше дело не так однозначно, как может показаться: синтетическое тестирование однозначно определяет каждого участника как способного принимать собственные решения касаемо стандартных подходов! Следует отметить, что сплочённость команды профессионалов предопределяет высокую востребованность стандартных подходов.

Заголовок

Карточки

Карточка с выезжающем изображением

Карточка обычная с попапом

Заголовок

Попап

Основной заголовок страницы

normal-header

normal-header

Контейнер для заголовка double-header

Парный заголовок

Секции

Секция с одним блоком

section-1

Секции с двумя блоками

section-2

section-2-1

section-1-2

Особые Секции

Полукруглая секция

Заголовок

Второй вариант круглой секции

Заголовок

Блоки

Ограничители ширины блока

Скругления блоков / высоты блоков

Выравниввание ограниченных блоков по горизонтали

Выравнивание внутри блоков (класс нужно задавать родителю блока)

Прозрачность

Цвета

Кнопки

Модификаторы кнопок

Отступы

Раскрывающийся блок

Контейнеры изображений

Фоновое изображение

<div class="img-bg"> <div class="img-bg__container"> <img src="/upload/medialibrary/cfb/3wtyqmmzprgs9qrxnrj4dr62wvyb7o1z.jpg" alt="" srcset=""> </div> </div>

Круглое изображение

<div class="rounded-foto"> <img alt="Фото директора" src="/upload/main/09c/aw35vvs3mi1dcuygj6jwp3rl0akm2bmu.jpg"> </div>

Текст

Размеры

Списки

Модификаторы списков (работают у всех типов списков)

Размеры точек/иконок

Отступы точек/иконок

Цвета точек/иконок (красить классом можно и весь список целеком, и отдельный элемент списка. Доступны все цвета)

Центрирование точек/иконок

`<div class="img-bg"> <div class="img-bg__container"> <img src="/upload/medialibrary/cfb/3wtyqmmzprgs9qrxnrj4dr62wvyb7o1z.jpg" alt="" srcset=""> </div> </div>`

`<div class="rounded-foto"> <img alt="Фото директора" src="/upload/main/09c/aw35vvs3mi1dcuygj6jwp3rl0akm2bmu.jpg"> </div>`