Blaze UI Input Sizes
Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
Blaze UI Input Sizes are used to create the input fields with different sizes using the Blaze UI size classes. We can create the input field of extra-small size to super-large size as per our need.
Blaze UI Input Sizes Classes:
- u-xsmall: This class is used to create the extra-small size input field.
- u-small: This class is used to create the small size input field.
- u-medium: This class is used to create the medium size input field.
- u-large: This class is used to create the large size input field.
- u-xlarge: This class is used to create the extra-large size input field.
- u-super: This class is used to create a super large size input field.
Syntax:
<input class="c-field Input-Sizes-Class" placeholder="..." type="text">
Example 1: The following code demonstrates the Blaze UI Input Sizes using u-xsmall, u-small, and u-medium classes.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title > Blaze UI Input Sizes </ title > < link rel = "stylesheet" href = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </ head > < body class = "u-window-box-large" > < div class = "u-centered " > < h1 style = "color: green;" > w3wiki </ h1 > < h3 > Blaze UI Input Sizes </ h3 > < input class = "c-field u-xsmall" placeholder = "GFG Extra small size" type = "text" > < br > < input class = "c-field u-small" placeholder = "GFG small size" type = "text" > < br > < input class = "c-field u-medium" placeholder = "GFG Medium size" type = "text" > </ div > </ body > </ html > |
Output:
Example 2: The following code demonstrates the Blaze UI Input Sizes using u-large, u-xlarge, and u-super classes.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title > Blaze UI Input Sizes </ title > < link rel = "stylesheet" href = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </ head > < body class = "u-window-box-large" > < div class = "u-centered " > < h1 style = "color: green;" > w3wiki </ h1 > < h3 > Blaze UI Input Sizes </ h3 > < input class = "c-field u-large" placeholder = "GFG Large size" type = "text" > < br > < input class = "c-field u-xlarge" placeholder = "GFG Extra Large size" type = "text" > < br > < input class = "c-field u-super" placeholder = "GFG Super size" type = "text" > </ div > </ body > </ html > |
Output:
Reference: https://www.blazeui.com/components/inputs/
Contact Us