Square
Square utilities set an element’s width and height to the same value. They exist mainly to guarantee square dimensions before applying .util-radius-all-circle or .util-radius-all-full — border-radius: 50% only produces a true circle when its box is already square.
Pattern: .util-square-<size>
| Size | Value |
|---|---|
xs | 1rem |
sm | 1.5rem |
md | 2rem |
lg | 3rem |
xl | 4rem |
xxl | 6rem |
Examples
Section titled “Examples”<div class="util-background-odyssey util-square-lg"></div><div class="util-square-lg"></div>Paired with circle radius
Section titled “Paired with circle radius”<div class="util-background-odyssey util-square-lg util-radius-all-circle"></div><img src="avatar.jpg" alt="" class="util-square-lg util-radius-all-circle" />If the source content isn’t naturally square (a rectangular photo, for example), forcing equal width/height stretches it to fit rather than cropping it — pair with object-fit: cover on <img>/<video> elements to crop instead.