Labeled Box Component
Label is centered on the top border. Label border-radius is 0.6× the box border-radius.
-apple-system, BlinkMacSystemFont
The quick brown fox jumps over the lazy dog. System font stack gives native platform feel with clean, readable text.
Monospace
The quick brown fox jumps over the lazy dog. Lilex is a modern monospaced font with coding ligatures and clean geometry.
Sans-serif
The quick brown fox jumps over the lazy dog. Inter was designed for computer screens with tall x-height for readability.
Serif
The quick brown fox jumps over the lazy dog. Playfair Display has high contrast and refined details for editorial use.
Monospace
The quick brown fox jumps over the lazy dog. JetBrains Mono has increased height for a better reading experience in code.
box: 24px · label: 14.4px
Same 0.6× ratio applied to a larger box radius. The label pill stays proportional to the container's roundness.