Other elements · 4 пункти
Ця сторінка — частина бібліотеки елементів для статей OnLady. Тут — решта non-quote, non-photo, non-product блоків: таблиці, inline-CTA і accordion-списки.
Чотири елементи нижче — це "довідниковий" набір для статей, що оперують structured-даними або просять читача зробити дію. Якщо ваша стаття — це гайд із замірами, таблиця розмірів — обов'язковий елемент. Якщо це огляд із "далі підпишись" — інлайн-CTA закриває потребу.
Між блоками залишено по два абзаци placeholder-тексту — як і на інших сторінках бібліотеки. Це не для того, щоб імітувати "реальну статтю", а щоб бачити, скільки повітря треба зверху і знизу від кожного блоку в потоці прози.
Якщо потрібен новий тип "інше"-елемента (наприклад, sticky-table, inline-poll, callout-with-image) — додавайте його сюди першим, а не одразу в продакшн-статтю. Бібліотека — джерело істини; "одноразові" варіанти швидко перетворюються на debt.
01Table (col-wide)
Таблиця даних. Сидить у тирі .col-wide, бо ширшим датасетам потрібен простір. Шапка із сірим фоном і чорною подвійною рискою знизу; рядки з hover-підсвіткою.
.col-wide · Table (#elem-table)
| Обхват під грудьми (см) | Розмір пояса | Різниця | Чашка |
|---|---|---|---|
| 63–67 | 65 | 10–12 | A |
| 68–72 | 70 | 12–14 | B |
| 73–77 | 75 | 14–16 | C |
| 78–82 | 80 | 16–18 | D |
| 83–87 | 85 | 18–20 | E |
Використовується для будь-якого даних-у-табличках: розмірні сітки, склад тканини, графіки доставки. На мобільному таблиця залишається 100% ширини контейнера — якщо колонок 5+ і дані текстові, додайте overflow-x: auto на обгортку.
02Wide Inline CTA (col-wide)
Маленький горизонтальний блок з заголовком, описом і кнопкою — "вкладається" в потік статті. Корисний для м'яких закликів усередині розділу: "підпишіться на оновлення", "приміряйте без оплати", "запитайте стилістку".
.col-wide · Wide Inline CTA (#elem-cta-inline-wide)
Не ставте більше двох inline CTA на статтю — інакше виглядатиме як набір банерів, а не як органічний контент. Якщо у вас три і більше — заслуговує на окремий "CTA-block" (повноекранний) внизу статті.
03Full Inline CTA (col-full)
Той самий inline-CTA, але з повноекранним фоном — backdrop "тікає" на повну ширину viewport, а сам текст і кнопка залишаються клампованими до --w-prose для читабельності.
Найкраще працює, коли треба зробити паузу у потоці статті: тихий cream-фон перериває "стрічку прози" і дає читачу секунду подумати, чи варто клікнути. Pink-budget статті лишається за pull-quote.col-wide — повторювати рожеву хвилю двічі на одну сторінку немає сенсу.
.col-full · Full Inline CTA — bg full / content prose (#elem-cta-inline-full)
Технічно це обгортка .col-full з фоном і внутрішній __inner блок, що клампований до читальної ширини. Залишається responsive: на мобільному текст і кнопка стопляться вертикально через flex-wrap.
04Accordion (prose)
Згорнуті списки на нативному <details>. Без JS — кожен рядок розгортається кліком, плюс-мінус індикатор анімується через ::after. Корисно для FAQ-пар, поширених помилок, step-by-step списків, які не варто розгорнути одразу.
Сидить на читальній ширині (prose) — не виходить за центральну колонку, бо текст всередині accordions — це звичайна проза.
prose · Accordion (#elem-accordion)
Помилка №1 — вибір "на око" без замірів
Спроба купити сукню за фото без перевірки розміру — найчастіша причина повернень. Перш ніж замовити, зробіть три заміри: грудь, талія, стегна. Тривалість процесу — 3 хвилини; економія часу та грошей — суттєва.
Помилка №2 — економія на якості тканини
Сукня з 100% поліестера за 700 ₴ виглядає так само на фото, як сукня з віскозного джерсі за 1800 ₴, але після одного теплого літа ви знайдете першу в пакеті "віддати". Вкладайтеся в склад тканини один раз — носитиметь три сезони.
Помилка №3 — ігнорування правил догляду
Більшість суконь приходять у непридатність не від носіння, а від невдалого першого прання. Прочитайте етикетку, а не довіряйте звичці. Креп прати з вивороту, при 30°, без віджиму.
Помилка №4 — "одна сукня на всі випадки"
Універсальної сукні не існує. Office-look і denna-look потребують різного крою, тканини й кольору. Якщо ви носите одну й ту саму модель і на роботу, і на побачення — щось у вашій парі дозволених контекстів конфліктує.
Стандартний паттерн — 3–5 пунктів. Якщо у вас 10+ — це сигнал, що accordion треба розбити на категорії (наприклад, два окремі accordion-блоки), або винести в окрему сторінку FAQ.
05Підсумок
Чотири "інше"-елементи закривають типові потреби статей-гайдів: structured-дані (table), м'який заклик до дії (inline-CTA + full-width варіант), та згорнуті списки (accordion). Усі — без JS, окрім нативного <details>, який не вимагає сторонніх скриптів.
Якщо вам потрібен сторонній елемент — наприклад, sticky-таблиця, inline-poll, embedded відео, чи calculator — не вирізайте з accordion або CTA "по-аналогії". Підіймайте новий шейп через design-discussion і додавайте сюди як п'ятий елемент.
Жорсткий набір — це функція. Він дозволяє редактору швидко обрати "що тут поставити" замість вигадування нового макету під кожен матеріал. Розширюйте його обдумано, не імпульсивно.