Description Text
Description text provides explanatory information about a set of settings or a single item in a list or tree.
![01 description text example 01 description text example](images/01_description_text_example.png)
When to Use
Use description text to:
Show details about items in a list or tree:
![02 use in tree 02 use in tree](images/02_use_in_tree.png)
Describe a group of settings:
![03 use in settings 03 use in settings](images/03_use_in_settings.png)
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:
![04 bold header 04 bold header](images/04_bold_header.png)
Use the editor font to highlight code snippets:
![05 editor font 05 editor font](images/05_editor_font.png)
Use bullets for lists:
![06 bullets 06 bullets](images/06_bullets.png)
Limit the width of the line to 70–80 symbols, as it is not convenient to read very long lines:
Incorrect
![07 width incorrect 07 width incorrect](images/07_width_incorrect.png)
Correct
![07 width correct 07 width correct](images/07_width_correct.png)
If the text does not fit, add a scrollbar:
![08 scroll 08 scroll](images/08_scroll.png)
Appearance
Do not add borders around the description text. Use the panel color for the background.
Incorrect | Correct |
---|---|
![]() | ![]() |
For links, use the default link color: Link.activeForeground
. Underline links on hover:
![10 link 10 link](images/10_link.png)
Insets
Separate the text from the surroundings with insets.
Use a 12px horizontal inset if the description text’s area has other elements:
![11 insets 12 11 insets 12](images/11_insets_12.png)
Increase inset up to 20px if the description text is the only element:
![11 insets 20 11 insets 20](images/11_insets_20.png)