Info Point

Info Point — точка, которая открывает карточку с текстом и картинкой. Она подходит для пояснения детали на фотографии, схеме или иллюстрации.

Добавление и текст

Выберите Info Point на нижней панели и нажмите на холст. Появится точка диаметром 12 px. Можно протянуть область, чтобы сразу задать больший размер, или дважды нажать кнопку Info Point, чтобы добавить точку в центре видимой области.

Выделите точку — её карточка откроется. Клик по карточке или двойной клик по точке включает ввод текста прямо в карточке. Пустая карточка сохраняет место под одну строку. Escape завершает ввод. Текст также можно изменить в поле секции Info Point справа.

Текст сохраняет переносы строк. Оформление применяется ко всему тексту: отдельные слова нельзя сделать жирными или превратить в ссылки. HTML отображается как обычный текст.

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

В секции Info Point доступны Diameter, Point color и Open on:

• Hover открывает карточку при наведении. Можно перевести курсор с точки на карточку; она закроется после ухода курсора.
• Click открывает карточку по клику. Повторный клик по точке, клик снаружи или Escape закрывают её.

Чекбокс Connector line в секции Info Point показывает или скрывает линию между точкой и карточкой. Линия включена по умолчанию и использует цвет точки. При скрытой линии переход курсора на карточку по-прежнему не закрывает её.

На телефоне оба режима работают по нажатию. С клавиатуры точка доступна через Tab, карточка открывается Enter или пробелом и закрывается Escape.

Проверяйте открытие в предпросмотре: на холсте выделенная точка держит карточку открытой для редактирования.

Картинка

Нажмите плюс в секции Image и выберите файл. Картинка появится над текстом, сохранит пропорции и займёт ширину содержимого карточки. Размер самой точки не изменится.

Нажмите поле Asset, чтобы открыть настройки изображения. Replace image заменяет файл, минус в заголовке Image удаляет его. Карточка может содержать только текст или только картинку. Пустая точка не открывает пустую карточку в статье.

Оформление карточки

В секции Card настройте цвет, ширину, padding и радиус скругления Radius. Width задаёт ширину содержимого; padding добавляется снаружи содержимого с каждой стороны. Высота зависит от текста и картинки.

Цвет точки и цвет карточки меняются независимо. В Typography доступны шрифт, начертание, размер, межстрочный интервал, трекинг, цвет и выравнивание текста.

Position выравнивает карточку относительно круга: Top — верх карточки по верху круга, Center — центры по одной линии, Bottom — низ карточки по низу круга. По умолчанию выбрано Center.

Карточка автоматически меняет сторону, если рядом с точкой мало места. На узком экране её ширина и большие отступы уменьшаются до доступного размера. Для длинного содержимого появляется внутренняя прокрутка.