Компоненты → 3.3

Карточки

Версия:··

Карточки врача, новости, отзыва, цены и услуги — основные блоки контента сайта. Бейджи, теги и алерты — вспомогательные элементы.

Карточка врача

Фото 110×160px, имя, специализация, стаж, кнопка записи. Соответствует .doctor на сайте.

фото

Иванова Анна Сергеевна

Оториноларинголог (ЛОР), высшая категория

Стаж 18 лет

фото

Петров Дмитрий Александрович

Сурдолог, аудиолог

Стаж 12 лет

фото

Соколова Мария Ивановна

Детский ЛОР, ринолог

Стаж 9 лет

Карточка новости

Hover: bg #eef4d1 + box-shadow. Источник: #block-views-last-news-block-1 на сайте.

ЛОР

15 марта 2026

Как правильно промывать нос при насморке

Промывание носа — эффективный метод лечения и профилактики острого ринита. Рассказываем о правильной технике.

Читать далее →

Аудиология

10 марта 2026

Новый слуховой аппарат в нашей клинике

Мы начали подбор и настройку слуховых аппаратов нового поколения — незаметных и точных.

Читать далее →

5 марта 2026

Весенняя профилактика ЛОР-заболеваний

Апрель — период обострений. Рекомендации нашего специалиста по укреплению иммунитета и защите.

Читать далее →

* Наведите на карточку чтобы увидеть hover-эффект

Карточка отзыва

Рейтинг (1–5 звёзд), текст 4 строки, автор, дата, врач. Фон #eef4d1 — с реального сайта.

5/5

Очень довольна визитом. Доктор внимательно выслушала все жалобы, провела осмотр и объяснила причину заболевания. Назначила лечение, которое помогло уже через 3 дня. Рекомендую!

Елена К.

Врач: Иванова А.С.

15 марта 2026

4/5

Хороший специалист, всё объяснил понятно. Подождал немного дольше, чем ожидал, но качество приёма на высоте. Буду обращаться снова.

Михаил Р.

Врач: Петров Д.А.

10 марта 2026

Карточка цены

Услуга + стоимость + описание + кнопка. Highlighted-вариант для акционных позиций.

Первичный приём ЛОР-врача

1 500 ₽

Включает осмотр и консультацию

Повторный приём

1 000 ₽

До 14 дней после первичного

Промывание миндалин

800 ₽

Аппаратное — аккустический вакуум

Аудиометрия

1 200 ₽

Исследование слуха

Карточка услуги

Иконка + заголовок + описание + ссылка. Применяется в блоке «Наши услуги».

🦷

Лечение ангины и тонзиллита

Консервативное и хирургическое лечение заболеваний миндалин

Подробнее →

👂

Аудиология и сурдология

Диагностика нарушений слуха, подбор слуховых аппаратов

Подробнее →

👶

Детский ЛОР

Специализация на лечении ЛОР-заболеваний у детей от 0 лет

Подробнее →

👃

Ринология

Лечение заболеваний носа и придаточных пазух

Подробнее →

Бейджи и теги

Статусные бейджи, теги-категории, алерты.

Бейджи (статус)

ОсновнойПринимаетВысшая категорияНе принимаетНейтральныйНовинка

Теги (категории)

Алерты

ℹ

Информация

Запись открыта. Вы можете записаться онлайн или по телефону.

✓

Успешно

Ваша запись подтверждена. Ждём вас 20 марта в 10:00.

⚠

Внимание

Не забудьте взять паспорт и полис ОМС на приём.

Ошибка

К сожалению, это время уже занято. Выберите другое.

Примеры кода

HTML-структура и CSS-справка.

HTML — DoctorCard + CSS с сайта

<!-- Карточка врача -->
<div class="doctor-card">
  <img src="doctor.jpg" width="110" height="160" alt="ФИО" />
  <div class="doctor-info">
    <h3>Иванова Анна Сергеевна</h3>
    <p class="specialty">Оториноларинголог, высшая категория</p>
    <p class="experience">Стаж 18 лет</p>
    <button class="bb-btn bb-btn-sm bb-btn-outline">Записаться</button>
  </div>
</div>

/* CSS с сайта oclinica.ru */
.doctor .image { float:left; margin-right:20px; width:110px; height:160px; }
.doctor .item  { float:left; width:170px; }
.doctor h3     { margin-top:0; height:32px; }

HTML — NewsCard + CSS с сайта

<!-- Карточка новости (сайт: 200×200px) -->
<div class="news-card">
  <div class="news-preview">...</div>
  <div class="news-body">
    <time>15 марта 2026</time>
    <h3>Заголовок новости</h3>
    <p>Краткий анонс...</p>
    <a href="#">Читать далее →</a>
  </div>
</div>

/* CSS с сайта */
#block-views-last-news-block-1 .views-column {
  background: #fff; width: 200px; height: 200px;
  margin: 15px 8px; padding: 15px;
}
#block-views-last-news-block-1 .views-column:hover {
  background: #eef4d1;
  box-shadow: 0px 0px 16px 0px #9e9e9a;
}

HTML — ReviewCard

<!-- Карточка отзыва -->
<div class="review-card">
  <div class="stars">★★★★★</div>
  <p class="text">Текст отзыва (4 строки, overflow: hidden)...</p>
  <div class="author">
    <span>Елена К.</span>
    <time>15 марта 2026</time>
  </div>
</div>

/* Стиль брендбука (фон из CSS сайта) */
.review-card { background: #eef4d1; border-radius: 12px; padding: 20px; }

HTML — PriceCard

<!-- Карточка цены -->
<div class="price-card">
  <div class="price-row">
    <span class="service">Первичный приём ЛОР-врача</span>
    <strong class="price">1 500 ₽</strong>
  </div>
  <p class="description">Включает осмотр и консультацию</p>
  <button class="bb-btn bb-btn-sm bb-btn-outline">Записаться</button>
</div>

HTML — Badges, Tags, Alerts

<!-- Бейджи -->
<span class="bb-badge bb-badge-primary">ЛОР</span>
<span class="bb-badge bb-badge-success">Принимает</span>
<span class="bb-badge bb-badge-warning">Ожидает</span>
<span class="bb-badge bb-badge-danger">Не принимает</span>
<span class="bb-badge bb-badge-neutral">Высшая категория</span>

<!-- Теги -->
<button class="bb-tag">Ухо</button>
<button class="bb-tag">Горло</button>
<button class="bb-tag bb-tag-active">Нос</button>

<!-- Алерт -->
<div class="bb-alert bb-alert-info">
  <span class="bb-alert-icon">ℹ</span>
  <div>
    <strong>Запись открыта</strong>
    <p>Вы можете записаться онлайн или по телефону.</p>
  </div>
</div>

LLMLLM-спецификация· машиночитаемые данные · docs/LLM_CONTEXT.md

/components/cards · v1.0

Типы карточек

Карточка	Ключевые размеры	Источник на сайте	Фон / hover
DoctorCard	фото 110×160px, layout: flex	.doctor .image + .doctor .item	#fff / —
NewsCard	preview h=144px, grid 3 col	#block-views-last-news-block-1 .views-column	#fff / #eef4d1 + shadow
ReviewCard	4 строки текста, рейтинг	.node-reviews	#eef4d1 / —
PriceCard	flex row: name + price	.field-name-field-price-priem	#fff / highlighted: #f0f9ff
ServiceCard	иконка 48×48, grid 4 col	—	#fff / shadow

Бейджи, теги, алерты

Элемент	Варианты	Размер	Применение
Badge	primary / success / warning / danger / neutral	text-xs, px-2.5, rounded-full	Статус врача, категория, акция
Tag	default / active	text-xs, px-3, rounded-4px	Фильтры, категории услуг
Alert	info / success / warning / error	p-4, border-radius 12px	Системные сообщения пользователю

Правила применения

✓DoctorCard: всегда фото-placeholder если нет фото

✓NewsCard: hover #eef4d1 + box-shadow (из реального CSS сайта)

✓ReviewCard: обрезать текст после 4 строк (WebkitLineClamp: 4)

✓PriceCard highlighted = акционная / рекомендуемая позиция

✓Alert: один тип одновременно на экране

✕Не смешивать типы карточек в одной сетке без заголовка

✕Не использовать ReviewCard без рейтинга

✕Не ставить более 3 бейджей рядом