Sizing System
Examples and documentation for the sizing system component
Global Sizing System
This demonstrates the new global sizing system that provides consistent sizing across all UI components.
Instead of component-specific size classes like bz-card--sm, we now use
bz-size--sm.
Badge Sizes
Button Sizes
Icon Button Sizes
Mixed Icon Button Examples
Spinner Sizes
Icon Sizes
Input Sizes
Avatar Sizes
Switch Sizes
Text Sizes
Quick brown fox jumps over the lazy dog.
Quick brown fox jumps over the lazy dog.
Quick brown fox jumps over the lazy dog.
Quick brown fox jumps over the lazy dog.
Quick brown fox jumps over the lazy dog.
Quick brown fox jumps over the lazy dog.
Quick brown fox jumps over the lazy dog.
Card Sizes
This is an extra extra small card using bz-size--xxs
This is an extra small card using bz-size--xs
This is a small card using bz-size--sm
This is a medium card using bz-size--md (default)
This is a large card using bz-size--lg
This is an extra large card using bz-size--xl
Combined Examples
This card demonstrates combining colors and sizes:
bz-color--primaryfor the color themebz-size--lgfor the large size
Another example showing the flexibility:
bz-color--successfor success stylingbz-size--xlfor extra large size