Cartilla CSS Timeline TimelineItem-Badge

Primer CSS es de código abierto en Github que se crea con el sistema de diseño de GitHub. Podemos usar Primer CSS instalándolo a través de npm o incluir el enlace CDN en nuestro archivo HTML. Tiene diferentes tipos de estilos como espaciado, color y tipografía.

Primer CSS Timeline se utiliza para mostrar los elementos en dirección vertical. Primer CSS TimelineItem-badge se usa para crear la insignia de la línea de tiempo. El color predeterminado de la insignia es el texto oscuro y un fondo gris claro . Podemos dar el color a la insignia usando clases de utilidad de color.

En este artículo, discutiremos Primer CSS TimelineItem-badge.

Primer CSS TimelineItem-clases de insignia:

TimelineItem: esta clase se utiliza para crear el elemento de la línea de tiempo.
TimelineItem-badge: esta clase se usa para crear la insignia del elemento de la línea de tiempo.
TimelineItem-body: esta clase se usa para colocar algún contenido dentro del cuerpo de la línea de tiempo.

Sintaxis:

<div class="TimelineItem">
    <div class="TimelineItem-badge">
        ...
    </div>
    <div class="TimelineItem-body">
        ...
    </div>
</div>

Ejemplo 1: El siguiente ejemplo demuestra el distintivo Primer CSS TimelineItem.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS TimelineItem-badge </title>
     <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>    
    <div class="text-center">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS TimelineItem-badge </h3>
    </div> <br>
  
    <div class="d-flex flex-justify-center">
        <div class="TimelineItem">
            <div class="TimelineItem-badge">
                <svg class="octicon" width="18" height="18" 
                     viewBox="0 0 16 16" >
                    
                  <path fill-rule="evenodd" 
                        clip-rule="evenodd" 
                        d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 
                         4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 
                         3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z" >
                  </path>
                </svg>
            </div>
                
            <div class="TimelineItem-body">
                GeeksforGeeks default
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Primer CSS TimelineItem-insignia

Ejemplo 2: El siguiente ejemplo demuestra el distintivo Primer CSS TimelineItem.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS TimelineItem-badge </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"  />
</head>
  
<body>    
    <div class="text-center">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS TimelineItem-badge </h3>
    </div> <br>
  
    <div class="d-flex flex-justify-center">
        <div class="TimelineItem">
          <div class="TimelineItem-badge 
                      color-bg-success-emphasis 
                      color-fg-on-emphasis">
            <svg class="octicon"
                 width="18" height="18" 
                 viewBox="0 0 16 16" >
                
              <path fill-rule="evenodd" 
                    clip-rule="evenodd" 
                    d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 
                     4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 
                     3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z" >
              </path>
            </svg>
          </div>
            
          <div class="TimelineItem-body">
            GeeksforGeeks Colorful
          </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Primer CSS TimelineItem-insignia

Referencia: https://primer.style/css/components/timeline#timelineitem-badge

Publicación traducida automáticamente

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

HTML

HTML

Deja una respuesta Cancelar la respuesta