d8e83b57ea
* Add UI Guidelines to SDK docs * Add UI Guidelines to SDK docs * Fixing build errors * optimize PNGs * add UI guidelines landing page placeholder * IJ SDK Docs <-> UI guidelines crosslinks updated * split_button.md: remove reference to removed setting * use <ui-path> * use MD instead of <note> * use %gh-ic% links * drop_down.md: fix <control> * code samples: fix most obvious issues * remove obsolete `_defaults.md` * ijs.tree: UI cleanup * Delete "under construction" pages * Fix headers * Add link-summary * Remove invalid links * Delete unused files * Remove ''@2x' from image file names * Use Markdown syntax for some images and tables * Rename non-unique files to unique * Remove alpha in images where content is unreadable * align quotation marks * Controls: cleanup/fixes, add code links, edit * tooltip.md: fix HTML * misc fixes * typography.md: fix table contents * typography.md: fix table header * UI guidelines landing page + TOC fixes * remove unused icons_list.md * Normalize image paths * validation_errors.md: Fix broken tab * "correct"/"incorrect" labels styling * Resize images to 50% * button.topic: fixes * grammar, spelling, minor edits * remove ' ' * fix 99px * cleanup * UI_kit.md: minor * Fix "MRK058: Large image in paragraph rendered as a block element by default." * button.topic: Add img[alt] * mnemonics.md: Update "Contact Us" link to the IJSDK YouTrack * split_button.md: Use ui-path * UI landing: add feedback snippet * Improve code snippets formatting and naming * Fix code samples * Fix code samples * Add Kotlin variants for code samples * Add icons_list.md * crosslinks * Change external link to https://intellij-icons.jetbrains.design/ * icons list -> https://intellij-icons.jetbrains.design * Hide info about reducing split button to simple action button (now it is available through the registry only) * reformat * icons_style.md: Images in new line --------- Co-authored-by: marianna.kononenko <marianna.kononenko@jetbrains.com> Co-authored-by: Yann Cébron <yann.cebron@jetbrains.com>
2.2 KiB
Description Text
UI guidelines on descriptions texts.
Description text provides explanatory information about a set of settings or a single item in a list or tree.
{width=715}
When to Use
Use description text to:
- Show details about items in a list or tree:
{width=665}
- Describe a group of settings:
{width=1012}
How to Use
Text
Follow general rules in Writing short and clear and Punctuation.
Use the default text style for plain text. Increase line height by 3px from the default value.
Use H4 bold (Default bold) for headings or to highlight important words:
{width=320}
Use the editor font to highlight code snippets:
{width=283}
Use bullets for lists:
{width=283}
Limit the width of the line to 70–80 symbols, as it is not convenient to read very long lines:
Incorrect
{width=878}
Correct
{width=878}
If the text does not fit, add a scrollbar:
{width=333}
Appearance
Do not add borders around the description text. Use the panel color for the background.
| Incorrect | Correct |
|---|---|
 {width="302"} |
 {width="302"} |
For links, use the default link color: Link.activeForeground. Underline links on hover:
{width=283}
Insets
Separate the text from the surroundings with insets.
Use a 12px horizontal inset if the description text’s area has other elements:
{width=586}
Increase inset up to 20px if the description text is the only element:
{width=571}