Separador de utilidades de creación de prototipos CSS de Foundation

Fundación CSS

El separador de utilidades de creación de prototipos ayuda a crear el espacio entre líneas, es decir, el pequeño separador debajo del encabezado de un elemento y generalmente se usa dentro de la sección del encabezado.

Clase de separador de utilidades de creación de prototipos CSS de Foundation:

separator-* : esta clase se usa para alinear el encabezado a la posición específica y crear una pequeña barra debajo de él.

La marca de estrella (*) se puede reemplazar por las posiciones específicas, es decir, izquierda, derecha y centro.

Sintaxis:

<h3 class="separator-class"> Content </h3>

Ejemplo 1: este ejemplo describe el separador de utilidades de creación de prototipos en Foundation CSS.

HTML

<html>
  
<head>
    <link crossorigin="anonymous" rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"https://get.foundation/sites/docs/assets/css/docs.css">
</head>
  
<body>
    <h3 style="color:green">GeeksforGeeks</h3>
    <h5>Foundation CSS Prototyping Utilities Separator</h5>
    <br>
    <h3 class="separator-left">Geeks</h3>
    <h3 class="separator-center">for</h3>
    <h3 class="separator-right">Geeks</h3> 
</body>
  
</html>

Producción:

Ejemplo 2: En este ejemplo; estamos usando clases de utilidad de separador con etiquetas de imagen, párrafo y encabezado.

HTML

<html>
  
<head>
    <link crossorigin="anonymous" rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"https://get.foundation/sites/docs/assets/css/docs.css">
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3> 
          Foundation CSS Prototyping Utilities Separator
     </h3>
    <br>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/titleShadow-1024x341.png"
         class="separator-left" 
         height="160px" 
         width="160px"
         alt="img">
    <h4 class="separator-left">
        GeeksforGeeks C++ Course
    </h4>
    <p class="separator-center">
        I am a Paragraph
    </p>
  
    <h3 class="separator-right">
        I am a Right aligned Heading
    </h3> 
</body>
</html>

Salida :

Referencias: https://get.foundation/sites/docs/prototyping-utilities.html#separator

Publicación traducida automáticamente

Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta