Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
Los elementos de encabezado se utilizan para enfatizar los títulos mediante la creación de una tipografía grande y en negrita. La interfaz de usuario de Blaze proporciona varios tipos de encabezados, como encabezado súper, encabezado grande, encabezado pequeño, encabezado extrapequeño y más. En este artículo, aprenderemos sobre el encabezado extra pequeño.
El encabezado extra pequeño se usa para enfatizar el encabezado con un estilo en negrita. Para crear un encabezado extra pequeño en la interfaz de usuario de Blaze, usamos las clases .c-heading y .u-xsmall. La clase .c-heading le da al encabezado el estilo habitual de la clase blaze y .u-xsmall hace que el tamaño del encabezado sea más pequeño. Estas clases se pueden aplicar en los elementos <h1> a <h6>, <div> y <span>.
Clase utilizada para encabezado extrapequeño:
- u-xsmall: La clase .u-xsmall se usa para crear el encabezado extra pequeño.
Sintaxis:
<h1 class="c-heading u-xsmall">
Content
</h1>
Ejemplo 1: este ejemplo demuestra el encabezado extra pequeño de la interfaz de usuario de Blaze en los elementos <div> y <span>.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze UI</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <strong>Blaze UI extra small heading</strong> <br> <div class="c-heading u-xsmall"> Extra Small heading in div element </div> <span class="c-heading u-xsmall"> Extra Small heading in span element </span> </center> </body> </html>
Producción:
Producción
Ejemplo 2: este ejemplo demuestra el encabezado extra pequeño de la interfaz de usuario de Blaze en el elemento <h1> a <h6>.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze UI</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <strong>Blaze UI extra small heading</strong> <br> <h1 class="c-heading u-xsmall"> Extra Small heading in h1 element </h1> <h2 class="c-heading u-xsmall"> Extra Small heading in h2 element </h2> <h3 class="c-heading u-xsmall"> Extra Small heading in h3 element </h3> <h4 class="c-heading u-xsmall"> Extra Small heading in h4 element </h4> <h5 class="c-heading u-xsmall"> Extra Small heading in h5 element </h5> <h6 class="c-heading u-xsmall"> Extra Small heading in h6 element </h6> </center> </body> </html>
Producción:
Producción
Referencia: https://www.blazeui.com/components/headings/
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA