Цитати — quote, callout та pull-out елементи

Ця сторінка — частина бібліотеки елементів для статей OnLady. Тут зібрано всі способи виділити цитату, пораду, попередження чи додатковий контекст у тілі матеріалу.

Кожен з дев'яти елементів нижче має унікальний id="elem-…", щоб ви могли посилатися на нього з технічних завдань, рев'ю-документів та QA-чек-листів. Зверху і знизу від елемента залишено по абзацу довільного тексту — це дозволяє побачити, як він поводиться в реальному потоці прози.

Усі дев'ять елементів обтікаються тривіальним текстом, тож зосереджуйтесь на самих блоках. Ширина центральної колонки за замовчуванням клампована до --w-prose (684 px); деякі елементи опт-інаються в .col-wide, аби витекти за межі читальної смуги.

Якщо потрібно додати новий елемент — оновіть цю сторінку, додайте відповідні стилі в article-elements.css та зареєструйте behavior. Бібліотека — джерело істини для всіх редакторських та автоматизованих рендерингів.

01Intro Big

Великий вступний абзац для перших рядків статті. Друкарська презентація: дисплейний шрифт, посилений вагою, та чорна верхня лінія, яка візуально відділяє його від хедера.

prose · Intro Big (#elem-intro-big)

Це не просто чергова стаття про сукні. За 12 років роботи стилістами ми зібрали найчастіші помилки покупців і сформулювали їх у п'ять чітких правил. Прочитайте — і ви більше ніколи не купите невдалу модель.

Використовується один раз на сторінку — у самому верху статті, після h1. Якщо у вас є Takeaways, Intro Big розміщують після них; вони працюють у парі як "швидкий висновок → довге вступне твердження".

02Callout — Tip

Виноска-порада. Підкреслює невелику корисну тактику посеред основного потоку — як практична нотатка на полях книги.

prose · Callout (Tip) (#elem-callout-tip)

Tip-callout використовує рожевий wash як фон — він збалансований і не відволікає від основного тексту, але достатньо помітний, щоб око одразу за нього зачепилося.

03Callout — Insight

Виноска-інсайт. Нейтральний варіант — використовується для фактологічних спостережень або даних, які заслуговують на власний візуальний "момент".

prose · Callout (Insight) (#elem-callout-insight)

Insight-callout не несе емоційного заряду tip або warning — це інформативний акцент. Робиться через нейтральний фон --paper-2 та чорну верхню лінію.

04Callout — Warning

Виноска-попередження. Тепла бурштинова палітра сигналізує, що читач має звернути особливу увагу — це не порада, а помилка, яку легко зробити.

prose · Callout (Warning) (#elem-callout-warning)

Використовуйте обережно: не більше одного warning-callout на статтю. Інакше читач починає ігнорувати їх, як він ігнорує "important"-лейбли в неякісно написаних інструкціях.

05Blockquote (editorial)

Тихіший аналог pull-quote — сидить інлайн у читальній смузі, не порушуючи потік. Корисний для коротких цитат, гасел, висловлювань, що не потребують візуальної драми.

prose · Blockquote (editorial) (#elem-blockquote)

"Ми не продаємо одяг. Ми продаємо впевненість у власному тілі." — внутрішнє гасло OnLady, 2024.

Не плутайте з pull-quote: blockquote — у потоці, малого розміру, тонкий лівий бордер; pull-quote — крупний, відокремлений, з виділеною лінією зверху.

06Pull Quote (prose)

Великий "витягнутий" фрагмент тексту — те, що читач помічає першим, коли пробігається сторінкою очима. На читальній ширині сидить інлайн, у тому ж стовпці, що й проза.

Дисплейний шрифт, велика кегля, рожева верхня риска, підпис автора курсивом знизу.

prose · Pull Quote (#elem-pull-quote-prose)

Правильно підібрана сукня змінює не тільки силует, а й настрій протягом усього дня. — Олена Ковальчук, головна стилістка OnLady

Використовується для цитат у 1–2 короткі речення. Якщо цитата довша — розбийте на два абзаци всередині, або поверніться до blockquote.

07Pull Quote (col-wide)

Той самий pull-quote, але в режимі "виходу за читальну смугу" — bleed-варіант. На повну ширину центральної колонки, з рожевим washом і центруванням.

.col-wide · Pull Quote (#elem-pull-quote-wide)

Сукня має слугувати тілу, а не тіло — сукні. Це принцип, на якому ми будуємо весь асортимент. — Марія Литвиненко, керівниця ательє OnLady

Використовуйте, коли цитата заслуговує на власний "момент" — на повний кадр читацької уваги. Не більше одного wide pull-quote на статтю; інакше вони втрачають вагу.

08Marginal Sidenote

Маленька карта на полях. Існує тільки на ширині .col-wide, бо їй потрібен простір збоку від картки сноски, щоб не наїхати на основний текст.

На широких екранах карта переїжджає праворуч від тексту, на вузьких — згортається в звичайний інлайн-блок під параграфом.

.col-wide · Marginal Sidenote (#elem-marginal-sidenote)

Використовуйте sidenote для контекстних посилань — "читайте також", "довідка", "теж може бути цікаво". Не для самостійних думок, які заслуговують на власний абзац.

09Expert Advice

Найбільший з елементів цитат. Двоколонкова карта: ліворуч — довша порада з ім'ям експерта внизу, праворуч — фото-аватар і коротка біографія.

Має сидіти в .col-wide, бо геометрія блока — текст-колонка на читальну ширину + експерт-карта на 240 px, з полями.

.col-wide · Expert Advice (#elem-expert-advice)

Один раз на статтю — як підсумок розділу "думка експерта". Якщо у вас декілька експертних коментарів, краще винесіть їх в окремий ряд pull-quote, ніж дублювати expert-advice блок.

10Підсумок

Дев'ять елементів вище — повний набір "цитатних" блоків для статей OnLady. Якщо ви автор — використовуйте їх свідомо: кожен елемент має свою функцію, і вони працюють разом тільки тоді, коли кожен присутній з причини.

Якщо ви розробник — усі елементи стилізовано через токени з 00-tokens.css; самі стилі живуть у article-elements.css та article-base.css. Behaviors — у відповідних JS-файлах 20-components/ або 30-pages/.

Бібліотеку слід оновлювати: якщо ви додали новий callout-варіант, нову модель цитування або інший типорозмір — додайте його сюди першим. Це джерело істини для редакторської і дизайнерської роботи.