canonical / canonical/vanilla-framework

[New utility]: Vertical-align utilities

Open
#5,644 4 comments 0 reactions 1 assignee Claimed by @Safvan-tsy View on GitHub
Guest dev 🤝 Question ❓
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

Image

## 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.