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 pequeño.
El encabezado pequeño se usa para enfatizar el encabezado con un estilo en negrita y un tamaño de fuente ligeramente más pequeño que los encabezados normales. Para crear un encabezado pequeño en la interfaz de usuario de Blaze, usamos las clases .c-heading y .u-small. La clase .c-heading le da al encabezado el estilo habitual de la interfaz de usuario de Blaze y .u-small hace que el tamaño del encabezado sea más pequeño de lo habitual. Estas clases se pueden aplicar en los elementos <h1> a <h6>, <div> y <span>.
Clases utilizadas para el encabezado pequeño:
- u-small: La clase .u-small se usa para crear el encabezado pequeño.
Sintaxis:
<h1 class="c-heading u-small">
Content
</h1>
Ejemplo 1: este ejemplo muestra el encabezado 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 small heading</strong> <br> <div class="c-heading u-small"> Small heading in div element </div> <span class="c-heading u-small"> Small heading in span element </span> </center> </body> </html>
Producción:
Producción
Ejemplo 2: este ejemplo muestra el encabezado 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 small heading</strong> <br> <h1 class="c-heading u-small"> Small heading in h1 element </h1> <h2 class="c-heading u-small"> Small heading in h2 element </h2> <h3 class="c-heading u-small"> Small heading in h3 element </h3> <h4 class="c-heading u-small"> Small heading in h4 element </h4> <h5 class="c-heading u-small"> Small heading in h5 element </h5> <h6 class="c-heading u-small"> 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