Skip to content

Introduce Callout#358

Open
TheSyscall wants to merge 5 commits intomainfrom
callouts
Open

Introduce Callout#358
TheSyscall wants to merge 5 commits intomainfrom
callouts

Conversation

@TheSyscall
Copy link

Implement a callout box element that can be used to convey important information to the user.
This element is designed to be used above certain form elements, over the whole form or page.

Callout types:
image

Callout full width:
image

Callout with optional title:
image

Callout above a form element:
image

closes #349

Implement a callout box element that can be used to convey important
information to the user.
This element is designed to be used above certain form elements, or over
the whole form or page.
@TheSyscall TheSyscall self-assigned this Mar 13, 2026
@TheSyscall TheSyscall added the enhancement New feature or request label Mar 13, 2026
@cla-bot cla-bot bot added the cla/signed label Mar 13, 2026
@flourish86
Copy link
Contributor

I like the design, especially the color matching border. The spacing of text and headline are well done.

We should check, though, if there are elements, that have the same or a similar purpose and make sure that the design is consistent.

Please make also sure, that the in this case the line breaks after max. 80 characters to ensure readability.
This is usually done by setting a max width of ~50em to the element containing the paragraph.

@TheSyscall Would be nice, if you could post a screenshot of the element positioned on top of the page.

@TheSyscall
Copy link
Author

On the top of a configuration form without any limit. (limited only by the content)
image

Limited to 80ch/50em.
image

Setting the limit like that breaks the use over form elements.
Note the large blank space on the right side of the callout.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

cla/signed enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Better form hints

3 participants