canonical / canonical/vanilla-framework
[New utility]: Vertical-align utilities
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
Vanilla currently provides a utility class for vertical-align ([u-vertical-align--middle](https://vanillaframework.io/docs/utilities/align#vertical-alignment)), but lacks equivalents for other [values](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) like top and bottom.
Adding these would make alignment utilities more flexible and ensure consistent handling of inline elements like badges, icons, and form controls across different contexts.
## Visual
## Context
These utilities would be useful in:
- Badges next to labels (aligning text and count consistently).
- Icons inline with text, where alignment sometimes needs to be top or bottom instead of middle.
- Form components (checkboxes, radio buttons, etc.) where inline alignment flexibility is required.
## State
Does this pattern have state?
- No, these are static utility classes.
## Progressive enhancement
A pattern should be designed small screen first. How does this pattern scale up?
- Mobile-first design remains unaffected since vertical-align is a CSS inline property and degrades gracefully.
How will this pattern degrade on less competent browsers?
- On less capable browsers, inline elements will fall back to default alignment (baseline).
Contributor guide
Assessment
This issue has not been assessed yet.