Blockquote и цитаты

Blockquote в Carbon Components Svelte представляет собой компонент для отображения цитат и выдержек текста с особым визуальным оформлением, соответствующим дизайн-системе Carbon. Он позволяет аккуратно выделять текстовые блоки, улучшая читаемость и структуру интерфейса.

Подключение компонента

Для использования blockquote необходимо установить библиотеку Carbon Components Svelte и импортировать нужный компонент:

Компонент Blockquote является обёрткой для текстового содержимого и поддерживает различные параметры для кастомизации внешнего вида.

Основная структура


  Это пример цитаты. Текст цитаты может занимать несколько строк и будет автоматически отформатирован.

Внутри

можно использовать любые текстовые элементы, включая

для параграфов и для выделений. Основные элементы структуры:

  • — контейнер цитаты.

  • — параграф текста внутри цитаты.

  • — источник или автор цитаты.

Пример с указанием автора


  
Знание — это сила.

  
Фрэнсис Бэкон

Элемент

визуально отделяется от текста цитаты и обычно отображается меньшим шрифтом и другим оттенком, что соответствует рекомендациям Carbon по типографике.

Настройка внешнего вида

Компонент поддерживает классы CSS и свойства для кастомизации. Основные параметры:

  • class — позволяет добавить дополнительные классы для стилизации.
  • style — inline-стили для точной настройки.
  • type — определяет визуальный стиль цитаты (например, default или aside).

Пример использования type:


  
Это выделенная боковая цитата, которая привлекает внимание к ключевой информации.

  
Источник

В типе aside цитата оформляется с дополнительным отступом слева и более мягкой цветовой палитрой, что помогает визуально разграничить основной текст и цитату.

Стилизация и адаптивность

Carbon Components Svelte обеспечивает адаптивную типографику цитат. Визуальные параметры, которые автоматически подстраиваются под разные устройства:

  • Отступы и маргины — обеспечивают удобочитаемость на мобильных и десктопных экранах.
  • Цветовые акценты — для фона, линии цитаты или текста, соответствуют темной и светлой теме.
  • Размер шрифта — автоматически масштабируется в зависимости от родительского контейнера.

Для кастомных стилей можно использовать SCSS или CSS-модули:

.custom-blockquote {
  border-left: 4px solid #0f62fe;
  padding-left: 1rem;
  font-style: italic;
  color: #393939;
}

И подключение:


  
Кастомизированная цитата с выделенной линией слева.

  
Автор

Интерактивные цитаты

Carbon Components Svelte позволяет интегрировать цитаты с интерактивными элементами. Например, можно добавлять ссылки, кнопки или анимацию внутри цитаты:


  

    Цитата с ссылкой и интерактивными элементами.
  

  
Автор

Такая гибкость позволяет использовать цитаты не только как статический текст, но и как интерактивный блок информации.

Лучшие практики

  • Использовать
    для указания авторства или источника.
  • Применять тип aside для коротких, выделяющихся цитат.
  • Не перегружать цитату большим количеством интерактивных элементов, чтобы сохранить читаемость.
  • Для мобильных интерфейсов проверять адаптивность отступов и размеров шрифтов.
  • Для единообразного оформления использовать предопределённые классы Carbon, дополняя их кастомизацией только при необходимости.

Итоговые рекомендации по структуре


  
Основной текст цитаты с выделением ключевых мыслей.

  
Источник или автор

Такое оформление обеспечивает чистый, профессиональный вид и соблюдает стандарты дизайн-системы Carbon.

Оглавление